Jak na lazy loading obrázků v Drupalu snadno a rychle

Jak lazy loading funguje? Ve zdrojovém HTML kódu, který server pošle do prohlížeče, není ve značce <img> a jejím atributu src uvedena cesta k souboru s obrázkem. Je tam buď cesta k nějakému malinkatému souboru s ikonkou načítání nebo totéž, ale reprezentované zápisem v podobě Data URI.

Dočasný symbol načítání obrázku se tedy načte rychleji než původní fotka. Doporučuji použít SVG, které se krásně zvětší při zachování obrazové kvality. Navíc je vektorový soubor i dostatečně malý.

A jak se do značky <img> dostane skutečný obrázek, který chcete návštěvníkovi webu zobrazit? Záleží na použitém způsobu a knihovně, ale obvykle je ta správná cesta k obrázku uvedena v nějakém doplňkovém datovém atributu u značky <img> a JavaScriptem se nahodí po načtení stránky.

Drupal a lazy loading

Můj návod pro zprovoznění lazy loadingu v Drupalu 7 i 8 bude velice jednoduchý. Stačí vám totiž aktivovat příslušný modul, kliknout na pár zatrhovátek a jste hotovi.

Přestože možností, jak lazy loading v Drupalu aktivovat, je více, doporučuji modul Lazy. Jeho nastavení je velice jednoduché a na rozdíl od jiných modulů funguje jak s políčky, tak s textovým formátem. Dovede tedy aplikovat lazy loading i na obrázky vložené přímo v textovém poli s editorem.

Poznámka: Jinou možností je například modul Blazy. Má mnohem více nastavení a nově již podporuje také formáty textu. Jeho zprovoznění je podobné. Nicméně není zatím ve stabilní verzi, jen coby alfa.

V Drupalu 7 i 8 si klasickou cestou modul nainstalujte. V sedmičce dále stáhněte knihovnu bLazy do složky sites/all/libraries/blazy, v Drupalu 8 do složky libraries/blazy. U osmičky možná oceníte spíše instalaci s využitím Composeru, návod najdete na stránce modulu.

Po aktivaci modulu a nakopírování knihovny přejděte do Konfigurace > Vytváření obsahu > Formáty textu (Drupal 7), resp. Nastavení > Vytváření obsahu > Textové formáty a editory (Drupal 8).

Zapněte filtr s názvem Lazy-load images and IFRAMEs via bLazy a nastavení uložte. Poté přejděte do Konfigurace > Vytváření obsahu > Lazy load (Nastavení > Vytváření obsahu > Lazy-load configuration v D8). Nastavte si cestu k obrázku s načítací ikonkou a nastavení s podporou pro obrázky a iframe uložte.

Nyní stačí načíst stránku s obrázkem vloženým přímo do textu a měli byste před jeho zobrazením vidět dočasnou ikonku. Vyzkoušejte například na webu knihadrupal.cz, případně u sedmičkového Drupalu na stihacky.cz.

Tip: Pokud máte bleskurychlé připojení, můžete si nasimulovat pomalejší pomocí vývojářské lišty v Chrome nebo Firefoxu.

Drupal 8 nabízí v nastavení modulu Lazy ještě zatrhovátko pro zapnutí podpory u obrázkových políček napojených k obsahu, blokům, uživatelům a dalším entitám v Drupalu. Sedmička má toto nastavení samostatně a najdete jej u jednotlivých políček v menu Struktura > Typy obsahu > Správa zobrazení. Místo klasického zobrazení obrázku můžete widget přepnout na Lazy-load image.

Drupal 8 má v aktuální vývojové verzi rovněž podporu pro nastavení přímo u obrázkových políček místo globálního zapnutí. Nicméně z nějakého důvodu mi v ní přestal fungovat lazy loading u obrázků v textu. Doporučuji tedy počkat na finální novou verzi modulu pro Drupal 8.