Optimalizace obrázků pro web se často zužuje na jedinou činnost, totiž na zmenšení souboru. Pro rychlost, kterou hodnotí Google, ale rozhoduje i to, kdy a jak prohlížeč největší obrázek na stránce načte. Tento obrázek bývá prvkem, podle kterého se měří metrika LCP.
Pokud se načte pozdě, web působí pomalu, i když jsou všechny fotky dokonale zkomprimované. Co tedy LCP měří, proč na něm mají obrázky tak velký podíl a jak hlavní obrázek stránky zrychlit v šesti krocích?
Co je LCP a proč na něm záleží
Largest Contentful Paint, zkráceně LCP, měří, kdy se na obrazovce vykreslí největší obsahový prvek v první viditelné části stránky. Patří mezi metriky Core Web Vitals, kterými Google posuzuje uživatelský zážitek.
Za dobrý výsledek se považuje LCP do 2,5 sekundy, nad 4 sekundy je hodnocení špatné. Měří se 75. percentil návštěv, tedy hodnota, kterou splní tři čtvrtiny návštěvníků. U většiny stránek je prvkem LCP obrázek. Obvykle jde o úvodní fotografii, banner, hlavní produktovou fotku či náhledový obrázek článku.
Komprese vždycky nestačí
Tato analýza, kterou zveřejnil tým prohlížeče Chrome, upozorňuje na nejčastější omyly při optimalizaci LCP. U většiny webů se špatným LCP tvoří samotné stahování obrázku méně než deset procent celkového času. Zbytek připadá na odezvu serveru, zpoždění, než prohlížeč o obrázku vůbec zjistí, a na vykreslení.
Zmenšení souboru je tedy užitečné, často ale nestačí. Stejně důležité je, aby prohlížeč začal hlavní obrázek stahovat co nejdřív.
6 kroků ke zrychlení hlavního obrázku
1. Zjistěte, který prvek je LCP
Spusťte test stránky v nástroji PageSpeed Insights či v Lighthouse, který je součástí prohlížeče Chrome. V diagnostice najdete, který prvek byl vyhodnocen jako LCP. Na mobilu a na počítači to bývá jiný prvek, proto zkontrolujte obě verze.
2. Hlavní obrázek nenačítejte líně
Odložené načítání, takzvaný lazy loading, šetří data u obrázků níže na stránce. U hlavního obrázku ale škodí, protože prohlížeč ho začne stahovat až po vykreslení rozvržení stránky. Odstraňte u něj atribut pro odložené načítání.
3. Dejte mu přednost
Atribut fetchpriority s hodnotou high prohlížeči řekne, že má obrázek stáhnout přednostně. U hlavního obrázku jde o jednu z nejjednodušších úprav s viditelným efektem.
4. Vložte ho jako běžný obrázek
Prohlížeč najde obrázek nejrychleji, když je přímo v kódu stránky jako značka img. Obrázky vložené jako pozadí přes CSS či načítané skriptem, například v posuvných galeriích, objeví až později. Pokud se jim nevyhnete, použijte přednačtení pomocí značky link s atributem preload.
5. Správné rozměry pro každé zařízení
Telefon nepotřebuje fotku připravenou pro velký monitor. Připravte několik velikostí obrázku a pomocí atributů srcset a sizes nechte prohlížeč vybrat tu vhodnou. U obrázků uvádějte v kódu šířku a výšku, aby se stránka při načítání neposouvala.
6. Komprese a moderní formát
Teprve nyní přichází na řadu samotná velikost souboru. Úvodní fotka o velikosti několika megabajtů zdrží načtení i při dokonalém nastavení priority. Zkomprimujte ji a použijte moderní formát WebP či AVIF. Kompresi lze provést i online s pomocí nástrojů optimalizace obrázků pro web, které běží přímo v prohlížeči bez instalace programu.
Posuvné galerie na úvodní stránce
Velké posuvné galerie s několika fotkami patří k nejčastějším příčinám špatného LCP. Skript, který galerii ovládá, se musí nejdřív načíst a spustit, a teprve poté prohlížeč zobrazí první obrázek. Ostatní fotky galerie navíc soupeří s tím hlavním o připojení.
Pokud galerii potřebujete, zajistěte, aby se první snímek načetl jako běžný obrázek přímo v kódu stránky, a ostatní snímky načítejte až po něm. Nejrychlejším řešením bývá nahradit galerii jedním silným obrázkem.
Když je prvkem LCP text
Na některých stránkách, třeba u článků bez úvodní fotky, je prvkem LCP nadpis či odstavec textu. Optimalizace obrázků pro web tu na LCP přímý vliv nemá a rozhoduje hlavně odezva serveru a načtení písma. Pokud do úvodní části stránky později přidáte velkou fotku, stane se prvkem LCP právě ona a začnou platit všechna výše popsaná pravidla.
Co dělat s ostatními obrázky
U obrázků, které se zobrazí až po posunutí stránky, naopak implementujte lazy loading. Ušetříte data i výkon zařízení a hlavní obrázek nebude soupeřit o připojení s desítkami dalších souborů.
U všech obrázků platí stejná pravidla pro rozměry a kompresi. Pozor na animované GIFy v úvodní části stránky. Prohlížeč u nich počítá LCP podle zobrazení prvního snímku, celý soubor přitom bývá velký. V takovém případě se řiďte pravidly komprimace GIF.
Jak výsledek ověřit
Po úpravách spusťte test znovu a porovnejte hodnotu LCP. Laboratorní test v Lighthouse ukáže okamžité změny, data od skutečných návštěvníků, která Google zobrazuje v PageSpeed Insights a v Search Console, se pak aktualizují postupně za několik týdnů.
Sledujte zvlášť mobilní verzi. Pomalejší připojení a slabší procesory tu rozdíly mezi dobře a špatně nastaveným hlavním obrázkem nejvíc zvýrazní.
Rychlost ovlivní i jediný obrázek
Pro metriku LCP je rozhodující hlavně jeden obrázek, ten největší v první viditelné části stránky. Pokud ho prohlížeč najde včas, stáhne přednostně a dostane soubor rozumné velikosti, výsledek se zlepší i bez zásahů do zbytku webu.
Začněte u stránek s nejvyšší návštěvností. Zjistěte jejich prvek LCP, odstraňte u něj odložené načítání, přidejte prioritu a zkontrolujte velikost souboru. Teprve potom se pusťte do optimalizace ostatních obrázků.
