Lazy loading obrázků

Lazy loading je jednořádková úprava, která umí ušetřit megabajt dat, a zároveň jednořádková úprava, která umí přidat vteřinu k načtení hlavního obrázku. Rozdíl je jen v tom, na které obrázky ji použijete.

Co odložené načítání skutečně řeší

Lazy loading znamená, že prohlížeč načte obrázek až ve chvíli, kdy se blíží do viditelné části stránky. Na krátké vizitce je efekt nulový, protože se tam stejně všechno vejde na obrazovku. Na dlouhé stránce s referencemi, na blogu nebo ve výpisu produktů je to rozdíl mezi třemi megabajty a čtyřmi sty kilobajty.

Konkrétní příklad. Stránka realizací zámečníka se čtyřiceti fotkami. Bez odkládání si prohlížeč stáhl všech čtyřicet, tedy tři celé dvě megabajtu. S odkládáním stáhl šest, které byly vidět, a zbytek dobíral během posouvání. Data při prvním načtení klesla na tři sta osmdesát kilobajtů a doba do interaktivity o dvě sekundy.

Zásadní je, že tohle dnes umí prohlížeč sám. Není potřeba žádná knihovna ani skript. Atribut loading s hodnotou lazy podporuje Chrome od roku 2019, Safari od roku 2022. Kdo na to používá javascriptovou knihovnu, přidává na stránku kód, který dělá práci, jakou prohlížeč nabízí zdarma.

Hlavní obrázek nikdy neodkládejte

Nejdražší chyba je nastavit odložené načítání na všechny obrázky včetně toho hlavního nahoře. Prohlížeč pak musí nejdřív zpracovat stránku, spočítat rozvržení, zjistit, že obrázek je vidět, a teprve pak ho začne stahovat. Ztrácíte tím půl sekundy až sekundu na metrice LCP, tedy přesně tam, kde vás Google měří.

Hlavní obrázek naopak potřebuje prioritu. Atribut fetchpriority s hodnotou high řekne prohlížeči, aby ho stáhl přednostně před skripty a fonty. U webu s velkou úvodní fotkou to sráží LCP typicky o čtyři sta až sedm set milisekund. Kombinace s předběžným načtením v hlavičce dokáže ušetřit ještě o něco víc.

Pravidlo, které dávám do každé šablony: první dva obrázky na stránce bez odkládání a s vysokou prioritou, všechny další s odkládáním. U výpisu produktů posunuji hranici na první řadu, tedy obvykle první tři nebo čtyři položky. Zbytek si prohlížeč dobere sám a nikdo si toho nevšimne.

Rezervujte místo dřív, než obrázek dorazí

Odložené načítání zhorší poskakování stránky, pokud obrázek nemá rezervované místo. Text se vysází, pak dorazí fotka, odsune ho dolů a návštěvník klikne vedle. Metrika CLS to měří a hranice je nula celá jedna. Weby, které jsem viděl s hodnotou nula celá dvacet osm, měly téměř vždy chybějící rozměry obrázků.

Řešení je triviální a starší než celá metrika. Do značky obrázku napište atributy width a height s reálnými pixely originálu. Prohlížeč z nich spočítá poměr stran a místo si rezervuje dopředu i tehdy, když se obrázek v CSS roztahuje na sto procent šířky. Nic dalšího k tomu potřeba není.

U prvků, kde rozměr dopředu neznáte, použijte v CSS vlastnost aspect-ratio a pevnou minimální výšku. Platí to hlavně pro vložené mapy, videa a widgety s recenzemi. Půl hodiny práce srazí CLS z nula celá dvacet osm na nula celá nula dva a v testu rychlosti se to projeví okamžitě.

• obrázky bez atributů width a height v článcích a v galeriích
• reklamní bloky a widgety, které se načtou až po vykreslení textu
• vlastní font, který po načtení změní výšku řádků
• cookie lišta, která se vysune shora a odsune obsah
• karusel, který se poskládá až po spuštění javascriptu
• vložené mapy a videa bez pevného poměru stran

Jak to nastavit v praxi

Celé nastavení se vejde do několika atributů. Odkládané obrázky dostanou loading lazy a decoding async. Hlavní obrázek nedostane nic z toho, zato dostane fetchpriority high. Vložené rámy s mapou nebo videem dostanou odkládání také, protože jinak stahují stovky kilobajtů skriptů, které většina návštěvníků nikdy neuvidí.

Náhrada vloženého videa náhledovým obrázkem je největší jednotlivá úspora, jakou u malých webů znám. Vložený přehrávač YouTube stáhne kolem sedmi set kilobajtů skriptů, i když návštěvník na video nikdy neklikne. Náhradou za statický obrázek s tlačítkem ušetříte skoro celý megabajt a video se přehraje až na vyžádání.

Testujte vždy na simulovaném pomalém připojení. V nástrojích prohlížeče najdete v záložce Network volbu pro pomalou síť. Na kancelářské optice vypadá dobře i špatně postavený web. Zákazník, který na vás narazí v tramvaji na okraji Brna, má úplně jiné podmínky a rozhoduje se během tří sekund.

• první dva obrázky nad ohybem bez odkládání a s vysokou prioritou
• všechny ostatní obrázky s atributem loading a hodnotou lazy
• u každého obrázku vyplněné width a height v pixelech originálu
• vložené video nahradit náhledem s přehráním po kliknutí
• mapu načíst až po posunutí na její pozici
• otestovat na pomalém připojení, ne jen v kanceláři na optice

Kdy odkládání uškodí

Odkládání není zadarmo, jen se za něj platí jinde. Pokud ho nasadíte na obrázky v karuselu, druhý snímek se začne stahovat až po přepnutí a návštěvník uvidí prázdné místo. U tisku se odložené obrázky někdy nevytisknou vůbec, což potrápí weby s ceníky, jídelními lístky a katalogy ke stažení.

Druhá past jsou staré javascriptové knihovny, které skutečnou adresu ukládají do atributu data-src. Bez spuštěného javascriptu takový obrázek neexistuje. Roboti vyhledávačů dnes javascript zvládnou, ale ne vždy a ne hned. Pokud vám na obrazovém vyhledávání záleží, používejte nativní řešení prohlížeče, ne knihovnu z roku 2016.

• hlavní obrázek a logo v hlavičce stránky
• snímky v karuselu, který se přepíná automaticky po dvou sekundách
• obrázky v tiskové verzi ceníku, jídelníčku nebo katalogu
• galerie ovládaná knihovnou s vlastním načítáním
• ikony a grafika, které tvoří samotné rozvržení stránky
• šablony e-mailů, kde atribut stejně nefunguje

Náklady a čísla, která má smysl sledovat

Nasazení na malém webu do dvaceti stránek je práce na dvě hodiny a účtuji ji od tisíce devíti set korun. U e-shopu nebo webu s galeriemi počítám od čtyř tisíc devíti set, protože se upravují šablony výpisu, detailu i karuselu a všechno je potřeba projít na mobilu i na desktopu.

Bez měření to nedělejte. Změřte PageSpeed a hlavně reálná data z terénu před úpravou i po ní. U webu s referencemi, který jsem upravoval v červnu, vypadala tabulka takto. Rozdíl v počtu poptávek z mobilu byl vidět během tří týdnů, protože z rychlé stránky odchází míň lidí předčasně.

Pokud chcete vidět dopad na peníze, ne jen na body v testu, potřebujete měření událostí. Nastavení Pixelu a serverového posílání dat vychází na šest tisíc devět set korun jednorázově. Bez toho poznáte, že web zrychlil, ale ne jestli přibyly poptávky, a přesně o to celou dobu jde.

Časté otázky

Mám lazy loading zapnout na všechny obrázky?

Ne. První dva obrázky nad ohybem, typicky hlavní fotku a logo, nechte bez odkládání a hlavní fotce přidejte vysokou prioritu. Odkládání na hlavním obrázku prodlouží metriku LCP o půl sekundy až sekundu, což je přesně to, co Google měří. Všechno ostatní pod prvním překlopením obrazovky odkládejte bez obav.

Uškodí odložené načítání pozicím ve vyhledávání?

Nativní řešení prohlížeče přes atribut loading ne, Google s ním počítá a obrázky indexuje. Problém dělají staré javascriptové knihovny, které skutečnou adresu schovávají do atributu data-src. Tam se stává, že se obrázek do obrazového vyhledávání vůbec nedostane. Pokud vám na něm záleží, knihovnu vyhoďte a použijte nativní atribut.

Potřebuji na to plugin nebo knihovnu?

Nepotřebujete. Atribut loading s hodnotou lazy je součástí prohlížečů od roku 2019 a Safari ho zvládá od roku 2022. Knihovna navíc znamená další skript ke stažení a spuštění, tedy přesně to, čemu se snažíte vyhnout. Ve WordPressu se atribut přidává automaticky, jen zkontrolujte, že ho šablona neruší u hlavního obrázku.