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

Snad všechny moderní nástroje pro měření rychlosti načítání webových stránek vám sdělí, že byste měli optimalizovat načítání obrázků. Jak přímo jejich úpravou, tak změnou způsobu, jakým jsou vloženy do webu. Jednou z metod je tzv. lazy loading, zpožděné načítání obrázků na stránce.

Reklama

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.

Lazy loading v Drupalu

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.

Tagy: 

Reklama

Přidat komentář