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.

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

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Nové diskuze
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru