Performance Lab: konverze obrázků do WebP a AVIF a další optimalizace WordPressu

Když jsem hledal vhodný WordPress plugin pro převod obrázků do WebP nebo AVIFu, objevil jsem Performance Lab. Bezplatné řešení nabízející jednoduché nastavení a aktivaci celé řady výkonnostních vylepšení. Navíc nijak neotravuje reklamou. 

Převod obrázků do WebP a AVIF ve WordPressu

1. Po instalaci pluginu Performance Lab přejděte do sekce Nastavení > Performance. Vyhledejte dlaždici Modern Image Formats a klikněte na tlačítko Aktivovat.
2. Následně přejděte do sekce Nastavení > Média. V nově přidané sekci Modern Image Formats byste měli vidět jako výchozí formát obrázků volbu AVIF. Pokud ji tam nemáte, tak pravděpodobně používáte zastaralou verzi PHP na svém hostingu.
3. Všechny nově přidané obrázky už WordPress automaticky převede do formátu AVIF.
4. Pro převod stávajících obrázků se mi osvědčil například plugin Regenerate Thumbnails. Po jeho aktivaci přejděte do Nástroje > Regenerate Thumbnails a klikněte na tlačítko pro přegenerování náhledů obrázků. Jen počítejte s tím, že to v závislosti na počtu fotek a výkonu serveru nebo hostingu bude chvíli trvat.

Image

Jediný problém, na který jsem narazil, je vybírání favikonky, která v AVIF být nemůže, ale procházení souborů v možnostech Přizpůsobení tvrdošíjně AVIF vybírá. Naštěstí to lez řešit nasazením ikonky v kódu.

💡 Tip: Podle caniuse.com je AVIF podporovaný už ve všech současných webových prohlížečích. Jediný důvod, proč se mu vyhnout a dát přednost třeba WebP je náročnost převodu. U WordPressu by vám to nemuselo vadit. Náhledy se generují v okamžiku nahrávání souboru a při zobrazení stránky návštěvníkem se už načítají hotové obrázky.

Co dalšího nabízí Performance Lab?

V nastavení pluginu najdete hned několik dalších optimalizací. Jejich aktivací se vždy přidá další plugin, takže pokud vás něco pozlobí, lze celou optimalizaci snadno vypnout a odinstalovat.

Následující kombinace by měla být bezpečná:

• Embed Optimizer přidá lazy loading pro vložené prvky jako iframy.
• Performant Translations – zrychlení vícejazyčných webů
• Enhanced Responsive Images – trochu pokročilejší počítání velikostí obrázků ve výsledném HTML

Určitě stojí za zvážení i další vylepšení, ale musíte vědět, co provádíte. Back/Forward cache nebo spekulativní načítání vám mohou rozhodit statistiky návštěvnosti, odložené načítání JavaScriptu může rozbít jiné pluginy a prioritizace načítání některých obrázků zase může web i zpomalit. Je třeba vše vyzkoušet na konkrétním webu, doporučuji si přečíst odkazem Learn more, co přesně plugin provádí.