Lazy loading nativně v prohlížeči Chrome

Není tomu dlouho, co Google vydal novou verzi světově nejpoužívanějšího prohlížeče Chrome s pořadovým číslem 77. V nové verzi se objevilo několik novinek, dneska se zaměříme na jednu podstatnou změnu a to nativní podpora funkce lazy loading přímo v prohlížeči.

Co je to lazy loading?

Lazy loading někdy také nazývaný jako on-demand loading je technika optimalizace načítání stránky webu. Ta spočívá v rozdělení stránky na několik částí, které se načítají postupně, jak je uživatel reálně potřebuje. Výsledek je ten, že se stránka načítá uživateli rychleji, protože se načítají pouze komponenty, které v daný moment zasahují do výřezu obrazovky uživatele. Další výhoda je ta, že lazy loading šetří data uživatelů na mobilních zařízeních (FUP), pokud nedoscrollují na konec stránky a nedojte tak ke stažení všech zdrojů. Vedlejším pozitivním efektem je také lepší hodnocení stránky ve vyhledávači Google, který má rychlost načítání stránky jako jeden z hodnotících faktorů.

Jaký obsah lze načítat pomocí lazy loading?

Principiálně se to týká velkých souborů, jako jsou obrázky, či iframy. V některých případech lze odložit načítání také u větších prvků DOM (Document Object Model).

Jak lazy loading fungovalo dříve

Ještě než si řekneme, jak nativní lazy loading v prohlížeči funguje, pojďme si zopakovat, jak to bylo nyní. Chrome již dříve načítal obrázky s různou prioritou v závislosti na tom, kde jsou na stránce umístěny. Tedy i když obrázky pod výřezem byly načítány s nižší prioritou, stále se načítaly. Pokud chceme ovšem úplně odložit načítání souborů mimo výřez obrazovky, je nutné buďto použít některou z již existujících knihoven JavaScriptu, nebo na to napsat vlastní JavaScript. Teď je ale vše jinak. Chrome nyní podporuje lazy loading nativně, tedy automaticky, bez nutnosti implementovat jakékoliv scripty. Tím se také zbavujeme času na načtení a rendrování externího JS, což opět zrychluje načtení stránky.

Nativní lazy loading v prohlížeči

Odložení načítaní velkých souboru nativně znamená, že Google Chrome sám indentifikuje soubory mimo výřez obrazovky a odloží jejich načtení. Jakmile uživatel k těmto objektům „doscrolluje“ tyto soubory následně donačte.

Implementace lazy loadingu pro uživatelé Chrome s verzí 77 a výše je velmi snadná. Jak na to? V podstatě stačí přímo v HTML kódu stránky použít nový atribut loading, například:

<img src=“example.jpeg“ loading=“lazy“ alt=“Example“>

<iframe src=“https://example.com“ loading=“lazy“></iframe>

Podporované hodnoty pro atribut loading jsou:

• lazy – odloží načítání objektu, dokud dosáhne výřez obrazovky jeho vypočítané vzdálenosti
• eager – objekt načte okamžitě, bez ohledu na to, kde je umístěn na stránce
• auto – výchozí chování prohlížeče při lazy loadingu, prohlížeč se chová stejně, jako kdybyste atribut loading nepoužili

Zpravidla všechny obrázky a iframe, které jsou nad ohybem, případně jsou označeny atributem loading s hodnotou eager, se načítají ihned. Ty, které jsou pod výřezem obrazovky se načtou pouze tehdy, když se uživatel k nim přiblíží. Hranice vzdálenosti není pevně daná a liší se zejména v závislosti na těchto faktorech:

• Typ načítaného zdroje (objektu), tedy zda jde o obrázek nebo iframe.
• Typ připojení uživatele (3G, 4G apod.).

Výchozí hodnoty hranice, kdy se začne objekt načítat v závislosti na připojení uživatele, najdete v Chromiu. Hodnoty se mohou v budoucnu měnit. Google stále ideální vzdálenost testuje.