Líné načítání obrázků (tzv. lazy loading) je technika pro zrychlení načítání webových stránek uživateli. Rychlé načítání stránky je důležité především z hlediska uživatelského prožitku. Uživatelé prostě neradi čekají na načtení stránky a pokud načítání trvá neobvykle dlouho, mohou odejít jinam (třeba ke konkurenci).
Pokud tedy využijeme techniku líného načítání obrázků, načtou se na stránce pouze obrázky, které uživatel vidí. Naopak ty obrázky, které nevidí (jsou na stránce níže), se načtou až v momentě, kdy se k nim uživatel dostane (např. skrolováním).
Tato technika je velmi užitečná pro stránky, které obsahují na stránkách plno obrázků. Mnoho webů využívá líné načítání i pro obsah (příkladem může být Amazon.com nebo Ebay.com). Šetří tím jednak čas pro načtení a zobrazení stránky u uživatele a především množství přenesených dat (ne všichni uživatelé skrolují až na konec každé stránky).
Níže jsem připravil přehled pluginů pro líné načítání obrázků pro redakční systém WordPress.
Jak to funguje
Plugin projde celý obsah stránky a všechny výskyty adres obrázků nahradí zástupným obrázkem (tzv. placeholder image) o velikost 1 x 1 pixel. Tento obrázek má velmi malou velikost a stáhne se jen jednou, protože všechny obrázky budou mířit na tento soubor.
Jakmile uživatel narazí na tento obrázek (objeví se mu okně), JavaScriptový plugin zajistí stažení původního obrázku. Vhodnější je také začít načítat obrázek už ve chvíli, kdy se uživatel k tomuto obrázku blíží. Diskutabilní je také použití líného načítání na mobilních zařízeních. Na jednu stranu se nemusí načítat všechny obrázky při zobrazení stránky. Na druhou stranu se ale nemusí líně načítané obrázky později vůbec zobrazit z důvodu výpadku sítě atd.
Z hlediska SEO může být líné načítání také problematické, protože vyhledávačům je místo adresy originálního obrázku podstrčena adresa zástupného obrázku.
Místo jednoduchého jednopixelového obrázku můžete využít jako zástupný obrázek animaci (např. přesýpací hodiny atd.). Toto umožňuje první plugin v přehledu.
Přehled pluginů
BJ Lazy Load
Umožňuje líné načítání obrázků (i gravatarů) a iframů v obsahu. Podporuje volbu umístění vložení skriptu (hlavička nebo patička) a také zástupného obrázku (ten, který se zobrazí než se obrázek načte).
Advanced lazy load
Podporuje pouze líné načítání obrázků s nepříliš rozsáhlým nastavením.
Image Lazy Load (Unveil.js)
Tento plugin umožňuje zvolit počet pixelů mezi obrázkem a oknem prohlížeče, kdy se začne obrázek načítat. Umožňuje také zapnout/vypnout líné načítání na mobilních telefonech.
jQuery Image Lazy Load WP
Velmi jednoduchý plugin pro líné načítání obrázků bez žádného nastavení.
Lazy Load
Opět jednoduchý plugin bez nastavení.
Unveil Lazy Load
Další jednoduchý plugin pro líné načítání bez žádného nastavení.
WP images lazy loading
A nakonec poslední jednoduchý plugin bez nastavení.
Líné načítání obrázku jsem zkusil využít na jednom webu. Konkrétně využívám prvně zmíněný plugin BJ Lazy Load pro jeho široké nastavení.
A co vy, využíváte líné načítání obrázků? Co si o něm myslíte?
Zdroj obrázku: http://en.wikipedia.org/wiki/File:Grapevinesnail_01.jpg
Mgr. Tomáš Matonoha
Zabývám se vývojem webových stránek s redakčním systémem WordPress. Programuji také webové stránky a eshopy na míru pomocí PHP a frameworku Nette. Zajímá mě responzivní design a moderní webové technologie: HTML5, CSS3, LESS, PHP, MySQL, jQuery a Twitter Bootstrap.
Je fakt, že na nějakých webech jsem to líné načítání viděl, že je to možné nějak udělat mě taky napadlo, ale že je pro to 5 plug-inů na WordPress to jsem teda jako vážně nevěděl
To SEO by mě netrápilo, stejně jsem Google zakázal na mém webu indexovat obrázky. Google je jenom zloděj obrázků, žádné návštěvníky stejně nepřinese atd…
Tak pokud jsou ty obrázky autorsky ošetřené, tak to nevadí, že si je google bere ne? Ony se stejně objeví v sekci obrázky. Mi třeba někdy přes to lidé chodili, když byl obrázek fakt pěkný.
Jinak to líné načítání začnu využívat. Něco takového jsem hledal
Díky za skvělý tip, o takovém pluginu jsem dosud neslyšel, určitě to využiju.
Právě s načítáním obrázků mám problém na svém webu.
Díky za tipy na pluginy určitě nějaký vyzkouším a dám feedback.
Dobrý deň,
ďakujem Vám za tento článok, v ktorom podrobne rozpisujete, ako ten lazy load vlastne funguje.
Tento článok som použil ako doplnkové čítanie pri mojom článku o WP pluginoch (http://vojkovsky.sk/wordpress-pluginy/). Zmienku o Vás nájdete pri plugine #21.
Pokračujte v dobrých článkoch!
Dobrý den,
zajímavý článek, určitě vyzkouším. A mám nějaký tip pro líné stránky, testuji plugin Comet. Nastavení jednoduší než WP Super Cache.
Viz http://www.tenzor.cz/doporucene-pluginy/
Jinak snažím se počet pluginů spíše minimalizovat.