Čo je lazy loading?

Lazy loading je odložené načítanie obsahu, najčastejšie obrázkov. Prehliadač stiahne len to, čo návštevník hneď vidí, a zvyšok načíta až keď sa k nemu posunie. Stránka sa vďaka tomu zobrazí rýchlejšie a šetrí sa prenesené dáta, čo je citeľné hlavne na mobilnom pripojení.

Všetky pojmy Opýtať sa

Vysvetlené po ľudsky.

Je to ako obsluha v reštaurácii, ktorá neprinesie naraz všetkých päť chodov. Prinesie predjedlo a ďalšie nosí až vtedy, keď na ne príde rad. Stôl nie je preplnený, jedlo je teplé a hosť začne jesť skôr. Chyba by bola nechať hosťa čakať aj na prvý chod, kým sa uvarí všetko ostatné. Presne to robí web, ktorý naraz sťahuje tridsať fotografií z galérie.

Prečo to majiteľa firmy zaujíma.

Pri weboch s fotogalériou realizácií je odložené načítanie jedno z mála opatrení, ktoré viditeľne zrýchli zobrazenie. Firma s tridsiatimi fotkami na stránke inak núti návštevníka stiahnuť niekoľko megabajtov ešte skôr, než uvidí prvú vetu. Pozor je však potrebný pri hlavnej fotografii v hornej časti stránky: tá sa nikdy neodkladá, lebo je to práve ten prvok, ktorý sa meria a ktorý má byť na obrazovke čo najskôr. Rovnako sa oplatí odložiť aj vloženú mapu a videá, ktoré patria k najťažšiemu obsahu.

Príklad z praxe.

Web stolárstva mal na jednej stránke šesťdesiat fotografií nábytku a načítaval ich všetky naraz. Na mobilnom pripojení to znamenalo desiatky sekúnd čakania a niekoľko desiatok megabajtov dát. Po zapnutí odloženého načítania pre všetko okrem prvej fotografie a po zmenšení obrázkov klesol objem sťahovaných dát pri príchode na zlomok pôvodného. Návštevník, ktorý si prezrel len prvých päť fotiek, si zvyšok nikdy nestiahol. Dôležitý detail bol vyňať z odkladania hlavnú fotografiu hore, lebo tá sa meria ako hlavný obsah a jej odloženie by hodnotu zhoršilo. Rovnaký postup používam pri každej galérii realizácií.

Kedy sa tým zaoberať.

Odložené načítanie zapnite všade, kde máte na stránke viac než niekoľko obrázkov, teda hlavne pri galériách realizácií a pri katalógoch. Pri weboch na moderných riešeniach býva zapnuté automaticky. Skontrolujte to vtedy, keď je stránka s fotkami pomalá alebo keď meranie hlási veľký objem prenesených dát. Zároveň overte, že hlavná fotografia hore odložená nie je, čo je najčastejšia chyba pri nasadení. Rovnaké pravidlo uplatnite na vloženú mapu a videá, ktoré patria k najťažšiemu obsahu na webe. Pri jednoduchej stránke s dvomi obrázkami to riešiť netreba, prínos by bol nulový a zbytočne by to komplikovalo kód.

Ako to skontrolujem.

Či odložené načítanie funguje, uvidíte v prehliadači.

1Otvorte vývojárske nástroje na záložke siete, načítajte stránku a sledujte, či sa obrázky sťahujú postupne pri posúvaní.

2V kóde overte, či majú obrázky pod prvou obrazovkou atribút loading s hodnotou lazy.

3Skontrolujte, že hlavná fotografia hore odložená nie je.

4Zmerajte stránku pred a po cez test rýchlosti a porovnajte objem prenesených dát.

Časté chyby.

×Odložené načítanie zapnuté aj na hlavnej fotografii, čím sa zhorší meraný čas zobrazenia.

×Chýbajúce rozmery obrázkov, kvôli ktorým obsah pri dopĺňaní poskakuje.

×Odkladanie riešené skriptom tam, kde to zvládne samotný prehliadač.

×Odložené obrázky, ktoré sa pri rýchlom posúvaní nestíhajú načítať a nechávajú prázdne miesta.

Súvisiace pojmy.

Ďalej v slovníku

Čo je WebP · Čo je LCP · Čo je CLS · Čo je Core Web Vitals · Čo je cache · Čo je minifikácia

Čítajte ďalej

Test rýchlosti webu · Koľko fotiek na web · Celý slovník pojmov · Tvorba webu · Nástroje · Blog

Časté otázky.

Zhorší odložené načítanie SEO?

Nie, ak je urobené štandardne cez atribút prehliadača. Vyhľadávač si obsah vie načítať. Problém vzniká len pri vlastných skriptoch, ktoré obrázky zobrazia až po interakcii.

Má sa odkladať všetko?

Nie. Odkladá sa to, čo je pod prvou obrazovkou. Hlavná fotografia, logo a text hore sa načítavajú prednostne.

Pomôže to aj pri vloženej mape a videu?

Áno a často najviac. Mapa a video sťahujú veľké množstvo cudzieho kódu, preto sa oplatí načítať ich až po kliknutí.

Funguje odložené načítanie vo všetkých prehliadačoch?

Áno, podporu má priamo v prehliadači a nepotrebuje žiadny skript. Stačí atribút pri obrázku, čo je najspoľahlivejšie riešenie.

Má sa odkladať aj obsah pod textom, napríklad tabuľky?

Netreba. Odkladá sa to, čo je datovo náročné, teda obrázky, mapy a videá. Text váži zanedbateľne a jeho odkladanie by len skomplikovalo kód.

Potrebujete to vyriešiť na svojom webe?

Robím weby na mieru od 250 €, redizajn od 250 € a e-shop od 590 €. Cenu poviem vopred podľa rozsahu.

Napíšte mi Kontrola webu zadarmo

Súvisiace

Kam sa pozrieť ďalej.

Súvisiace pojmy

Čo je alt text? Pri obrázkoch na webe · Čo je spätný odkaz? Autorita webu · Čo je CLS? · Čo je crawler? · Čo je DNS? Načo ho firma potrebuje

Nástroj a článok

Generátor meta tagov · Ako si vybrať firmu na tvorbu webu: 8 otázok pred podpisom