Dalším krokem ve zrychlení našeho webu byly obrázky. Obrázků obecně na webu moc nemáme, ale jak už jsme naznačili v první části tohoto seriálu, o to tady vůbec nejde – chceme nejlepší možné hodnocení od Google na naší šílené šabloně z ThemeForest, kterou by bylo nejlepší vyhodit.
Google doporučuje načítat obrázky ve formátech nové generace. Existují pluginy, které na základě externího API všechny obrázky převedou do webp a následně, pokud poznají podporovaný prohlížeč, tak načtou webp obrázek (např. WebP Express). Ale nechtěli jsme další plugin a na homepage jsme měli pouze jeden velký obrázek – panorama Dubaje s velikostí 201 kB. V Irfan View jsme tedy obrázek překonvertovali do WebP a 40,2 kB. Jediný problém je podpora – nefunguje to například v Safari nebo starších verzích Edge – zde jsme využili skript, který testuje, zda prohlížeč podporuje WebP, a pokud nikoliv, tak obrázek nahradí jpg. Autorem je David Walsh.
Dále jsme optimalizovali obrázky v novinkách. Naše šablona totiž načítala náhledové obrázky v kvalitě „full“, ve chvíli kdy by stačil malý náhled „thumbnail“.
Tímto jsme tedy ušetřili dalších cca 0.3 sekundy.
Na druhou stranu, následně jsme museli nahradit náš W3 Total Cache plugin jiným pluginem WP Fastest Cache, jelikož začala být cache nepředvídatelná a občas nefungovala. To se nám již u tohoto pluginu stalo i na jiných projektech.
Takže poučení zde:
- obrázky zkusit načítat v nových formátech, ale nezapomenout na nepodporované prohlížeče,
- ověřit si, že WordPress i všechny pluginy načítají jenom takovou velikost obrázku, jakou skutečně potřebují.
WordPress sám umí velmi dobře zmenšovat obrázky dle potřeby, pokud jsou v jejich klasickém editoru nebo Gutenberg editoru. V tu chvíli využívají srcset (rozsáhlý článek o tom, jak WordPress využívá responsivní obrázky) a obrázek je jen tak velký, jak je třeba. Ale to nefunguje ve všech pluginech.
