Líný načítání obrázků: Kompletní průvodce Plus 3 způsoby, jak jej implementovat

Lazy Loading images: Complete Guide


S rostoucí funkčností a interaktivitou na webu došlo v posledních několika letech k neustálému zvyšování velikosti webové stránky. Počátkem roku 2018, průměrná velikost stránky na internetu stálo přes 2 MB! Jak s tím bojovat? Trochu nazývané líné načítání obrázků je jedním z lepších řešení.

V této příručce projdeme všechny složitosti líných načítání obrázků, a hovořit o třech různých způsobech jeho implementace.

Začněme s obsahem toho, co má přijít:

  • Proč líné nakládání záleží?
  • Co je líné načítání?
  • Výhody líného zatížení
  • Co je třeba zvážit při líném načítání obrázků
  • Možnost 1: Implementujte líné načítání od nuly (pro začátečníky: ⭐ / 5)
  • Možnost 2: Použijte plugin JavaScript (pro začátečníky: ⭐⭐ / 5)
  • Možnost 3: Použijte plugin WordPress (pro začátečníky: ⭐⭐⭐⭐⭐ / 5)
  • Závěr

Proč je líný nakládací záležitost?

Obrovské užitečné zatížení webové stránky se skládá především z obrázků, skriptů, stylů, písem a videí. Obrázky však zabírají více než 60% velikosti typické webové stránky. Obrázky jsou také rozhodující pro návrh webové stránky, takže to není jako byste se jich mohli zbavit.

Webový prohlížeč uživatele bez jakékoli optimalizace stáhne všechny zdroje, než úplně vykreslí stránku. To vede ke zvýšení doby načítání, což může lidi odvést. Odhadovaný WooCommerce že za každých 100ms zlepšení rychlosti stránky může web elektronického obchodu zvýšit příjmy o 1%.

V takovém scénáři má velký smysl dělat vše, co je potřeba k optimalizaci doby načítání. A protože obrázky primárně přispívají k velikosti webové stránky, je dobré začít s nimi. Zde přichází do hry líné načítání.

Co je líné načítání?

Abychom pochopili, jak líné načítání funguje, zde je rychlý animovaný GIF, který ukazuje, jak jsou obrázky vykreslovány na CodeinWP.

Lazy Loading Images DemoDemonstrace líného načítání na CodeinWP

Po načtení stránky nebudou všechny obrázky staženy okamžitě. Když přejdete dolů na obrázek, uvidíte nejprve jeho rozmazanou verzi a skutečný obrázek se začne načítat na pozadí. Tento rozmazaný obrázek je verzí finálního obrazu s nízkým rozlišením a má zlomek velikosti. Tento jev odkladu stahování a vykreslování obrázku, dokud jej uživatel neposouvá, je přesně to, co se nazývá líné načítání.

Ačkoli "líný" je obecně spojeno negativně, líné načítání je ve skutečnosti osvědčeným postupem a vede ke snížení doby načítání stránky celkovou optimalizací webu.

Poznámka. V tomto příspěvku se podíváme na proces líného načítání obrázků, ale líné načítání se neomezuje pouze na obrázky – můžete použít stejný nápad při vykreslování jakéhokoli jiného zdroje, jako jsou videa, komentáře (existuje celá část o tom, jak to udělat v tento příspěvek) a dokonce i písma.

Výhody líného zatížení

Protože doba načítání webové stránky je hlavním přispěvatelem k opuštění, líné načítání obrázků může výrazně vést k pozvednutí uživatelů, kteří zůstanou na stránce, dokud se nenačte, což by nakonec mohlo vést k vyšším prodejům nebo konverzi..

Další významnou výhodou líných načítání obrázků jsou snížené účty za server. Slouží pouze pro obrázky, které divák posouvá, a ušetříte šířku pásma pro části stránky, které nebyly prohlíženy. Protože obrázky tvoří dominantní část hmotnosti stránky, mohlo by to vést k potenciálně nižším nákladům na server.

Načtení všech obrázků dopředu je potenciálně škodlivé i pro vaše čtenáře. Pokud má uživatel neomezený datový plán pro web, pravděpodobně by na tom neměl záležet. U plánů s omezenými daty však ukládáte data svého prohlížeče líným načítáním obrázků.

Co je třeba zvážit při líném načítání obrázků

Nyní, když jste se rozhodli implementovat líné načítání na svůj web správným způsobem, projdeme několik klíčových úvah o tom, jak to udělat.

Identifikujte obrázky, které chcete líně načíst

Ne všechny obrázky jsou ideální pro líné načítání. Například byste nechtěli načíst ty, které jsou nedílnou součástí struktury vašeho návrhu, a je nutné je načíst, aby se vše správně vykreslilo.

Za líné načítání by měly být považovány pouze obrázky, které jsou mimo obrazovku a nepřispívají ke struktuře stránky. Obvykle se jedná o obrázky v  prvky, které se objevují v těle stránky.

Vyberte si zástupné symboly obrázků

Další věc, kterou je třeba zvážit, je mezilehlý obrázek nebo barva, která by se měla zobrazit, když se obraz načítá, jakmile jej prohlížeč posouvá. Doba načítání obrázku závisí na tom, jak velký je obrázek, a může trvat i několik sekund. Proto musíte zvážit, co byste chtěli použít během doby načítání.

V tomto ohledu vývojáři obvykle sledují dva směry:

  • Jako pozadí použijte dominantní barvu obrázku
  • Použijte nízkou kvalitu obrazu

zástupný symbol s nízkým rozlišenímPříklad nízko kvalitních verzí obrázků jako zástupných symbolů pro líné načítání

Správná volba zde záleží na designu vašeho webu a na tom, co byste raději zobrazovali uživateli při čekání na načtení obrázku..

Ačkoli jednou technikou je načtení obrázků, jakmile vstoupí do portu pro zobrazení, možná budete chtít zvážit přidání času do vyrovnávací paměti dříve, než k tomu dojde – takže uživatel nikdy neuvidí zástupný symbol.

Při načítání obrázků si dejte pozor na změnu struktury stránky

Před načtením obrázku se může zobrazit pomocí 0 px. To není ideální pro udržování struktury návrhu.

To může snadno změnit rozvržení stránky a umístění textu. Jednoduchým řešením je okamžité přidání správných rozměrů do obrázku – to zajistí, že velikost prvku obrázku zůstane po načtení stejná.

S výše uvedenými úvahami z cesty se nyní podívejme, jak můžeme skutečně implementovat líné načítání na web WordPress.

Možnost 1: Implementujte líné načítání od nuly

Podívejme se nejprve, jak to udělat bez použití jakýchkoli pluginů. Tato možnost je doporučena pro ty z vás, kteří jsou s jazykem JavaScript spokojeni. V ideálním případě je třeba podniknout následující kroky:

  1. Zabránit načtení obrázku během načítání stránky: Když zadáte adresu URL nebo cestu obrázku v atributu src souboru  , bude obrázek stažen prohlížečem během načítání stránky. Chcete-li zabránit stahování obrázku v prohlížeči, musíte určit umístění obrázku v atributu data-src souboru  místo toho.
  2. Zaregistrujte funkce obsluhy událostí v JavaScriptu a zkontrolujte prvky dvou událostí: načítání a posouvání.
  3. Když prvek vstoupí do portu zobrazení, načtěte hodnotu prvku data-src do prvku src, což spustí prohlížeč, aby načíst obrázek.

Jednoduchá implementace tohoto procesu byla vysvětlena Robin Osborne a demo je k dispozici na CodePen.

Možnost 1.1: Použijte rozhraní API pro pozorování průniků

Rozhraní pozorovatele průniku pomáhá identifikovat prvky DOM, které jsou v portu zobrazení v kterémkoli daném okamžiku. Toto je čistší způsob implementace líného zatížení bez zápisu funkcí obsluhy událostí. Počet řádků kódu pro implementaci líného zatížení také značně klesá. Problémem však zůstává kompatibilita prohlížeče.

Blog vývojářů Google vysvětluje implementaci rozhraní API pro pozorování průniků pomocí toto demoverze CodePen.

Možnost 2: Použijte plugin JavaScript

Dvě výše uvedené možnosti vyžadují znalost jazyka JavaScript na střední úrovni. Pokud hledáte snadnější implementaci líného načítání bez použití těžkého pluginu, který zavede zatížení na server, můžete vyzkoušet prostý plugin JavaScript, blázon.

 bLazy knihovna při velikosti menší než 2 KB nezatěžuje užitečnou zátěž a přitom vám umožňuje snadno zpracovávat líné načítání obrázků.

Chcete-li použít knihovnu bLazy, musíte ji inicializovat  prvky s následujícími atributy:

  • class: set class of all  tagy pro b-líný
  • src: odkaz na zástupný obrázek
  • data-src: odkaz na obrázek, který se má načíst
  • data-src-small: odkaz na obrázek, který se načte na obrazovky o šířce menší než 420 pixelů

Musíte inicializovat knihovnu bLazy v několika řádcích kódu a všechny vaše obrázky budou vykresleny líným načtením.

; (function () {
// Inicializovat
var bLazy = new Blazy ();
}) ();

K dispozici je demo CodePen tady.

Možnost 3: Použijte plugin WordPress

Existuje několik možností, které vám mohou líné načítání. Zejména:

Všechny tyto pluginy vám zařídí líné načítání automaticky. Každý také přichází s některými pěknými vedlejšími funkcemi.

Například Lazy Load by WP Rocket také líně načte videa z YouTube a nahradí je miniaturou.

Optimole, kromě toho, že je nejnovějším přírůstkem do rodiny ThemeIsle, vám také poskytuje optimalizaci obrazu v pevném stavu (jak je zde testováno) s poměrně pokročilými funkcemi v tomto ohledu. Poskytuje například dynamické změny velikosti na základě velikosti obrazovky uživatele.


Optimalizace obrazu & Lazy Load by Optimole Optimalizace obrazu & Líné zatížení Optimole

Autor: Optimole

Aktuální verze: 2.3.1

Poslední aktualizace: 21. dubna 2020

optimole-wp.zip


Hodnocení 96%


50 000 + instalace


WP 4,7 + vyžaduje

Stejně jako u většiny pluginů, i když chcete získat líné načítání, stačí nainstalovat plugin a povolit funkci v ovládacím panelu pluginu:

Optimole pro líné načítání obrázků

Závěr

Tento příspěvek prozkoumal potřebu a výhody líných načítání obrázků. Diskutovali jsme také o třech různých způsobech implementace líného načítání na web WordPress:

  • Pokud máte středně pokročilé znalosti jazyka JavaScript, můžete implementovat líné načítání od nuly
  • Pokud znáte nějaké programování, ale nechcete žádné pluginy, odlehčenou knihovnu JavaScriptu, bLazy je možnost
  • Pokud byste chtěli jednorázové řešení pro líné načítání obrázků na svůj web, měli byste jít na plugin jako Optimole

Co si myslíte o líném načítání? Zkoušeli jste ji použít ke zlepšení výkonu vašeho webu?

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map