Pluginy pro líné načítání obrázků ve WordPressu

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.

6 komentářů u “Pluginy pro líné načítání obrázků ve WordPressu

  1. 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…

  2. 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 :)

  3. 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.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>