Chceli by ste sa naučiť, ako implementovať lenivé načítanie vo WordPress?

Ak sa váš web WordPress vo veľkej miere spolieha na vizuálny obsah, možno budete musieť pridať funkciu Lazy Loading. Táto funkcia WordPress pomáha zlepšiť rýchlosť a výkon stránky webovej stránky, vďaka čomu je nevyhnutná pre vaše úsilie v oblasti SEO.

Tento článok preskúma, ako funguje Lazy Loading, ako aj jeho výhody a nevýhody. Dozviete sa tiež, ako ho implementovať na váš web a spôsoby, ako optimalizovať jeho použitie pre čo najlepšie výsledky.

Bez ďalších okolkov vás pozývame, aby ste si prezreli náš zoznam Témy WordPress. Ale predtým, ak ste nikdy nenainštalovali WordPress objaviť Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu 

Potom späť k tomu, prečo sme tu.

Čo je to lenivé načítanie?

Je to funkcia, ktorá umožňuje webovej stránke načítať iba obrázky viditeľné pre používateľa. Pomáha webovej stránke udržiavať vysokú rýchlosť načítania tým, že neodovzdáva obrázky mimo zobrazovanej oblasti.

Ako funguje lenivé načítanie WordPress?

Keď používateľ navštívi webovú stránku WordPress, jeho prehliadač stiahne všetky obrázky na webovej stránke naraz. V prípade stránok s mnohými obrázkami vo vysokom rozlíšení môže tento proces výrazne skrátiť čas načítania, čo môže zhoršiť výkon vášho webu.

Pridaním funkcie Lazy Loading na vašu webovú lokalitu sa zobrazí výzva na stiahnutie iba obrázkov, ktoré sú viditeľné na obrazovke používateľa. Zvyšok mediálnych súborov sa nahradí zástupným obrázkom a načíta sa iba vtedy, keď sa používateľ posunie nadol po webovej stránke.

Výhody a nevýhody lenivého načítania WordPress

Ak sa stále pýtate, či by ste mali implementovať lenivé načítanie obrázkov vo WordPress, tu sú výhody a nevýhody tejto funkcie:

Výhody:

  • Znižuje využitie šírky pásma a znižuje náklady na hosting.
  • Zlepšuje rýchlosť webových stránok, čím zlepšuje zážitok návštevníkov z prehliadania.
  • Zlepšuje mobilný zážitok.
  • Zlepšuje námahu SEO, čím sa zvýši hodnotenie vašej webovej stránky vo vyhľadávačoch.

Proti:

  • Spôsobuje ukladanie obsahu do vyrovnávacej pamäte, čo ovplyvňuje rýchlosť načítania.
  • Spomalí rýchle rolovanie.

Ako pridať lenivé načítanie na váš web WordPress: 3 metódy

Existujú tri spôsoby, ako implementovať lenivé načítanie na vašom webe WordPress. Odporúčame vám vybrať si metódu, ktorá najlepšie vyhovuje vašej situácii.

1. Inovujte na WordPress 5.4 alebo vyšší

WordPress 5.4 a novší štandardne podporuje lenivé načítanie. Aktualizácia WordPress na najnovšiu verziu bude automaticky podporovať lenivé načítanie.

Aj keď je to najjednoduchší spôsob, neumožňuje vám nakonfigurovať, ktoré obrázky sa majú načítať lenivo. Vaša webová lokalita preto môže túto funkciu zneužiť a prejaviť sa vyššie uvedené nevýhody.

Ďalším faktorom, ktorý je potrebné zvážiť, je odlišný charakter funkcie Lazy Loading v každej verzii WordPress. Nedávno WordPress vydal novú verziu WordPress, ktorá implementuje vylepšenia na riešenie problémov so slabým širokým skóre obsahu zo starších verzií.

To znamená, že webové stránky bežiace na starších verziách WordPress nedostávajú rovnaké výhody ako webové stránky používajúce WordPress 5.9, čo je najnovšia verzia.

2. Povoľte natívne lenivé načítanie cez prehliadač

Populárne prehliadače ako Chrome, Firefox a Opera podporujú lenivé načítanie. Stačí pridať atribút na cielené obrázky a videá, aby sa automaticky aktivoval.

Pri natívnom lenivom načítaní WordPress podporuje atribút loading tieto tri hodnoty:

  • Auto : Štandardne spúšťa lenivé načítanie, čo je ekvivalentné nezahrnutiu atribútu načítania.
  • lenivý : Distribuuje načítanie zdrojov, kým každý nedosiahne určenú vzdialenosť od výrezu.
  • Horlivý : Načíta všetky zdroje hneď po načítaní stránky, bez ohľadu na ich umiestnenie.

Tu je príklad použitia:

<img src=”nom-image.png” loading=”lazy” alt=”alt attribute” width=”800″ height=”411″>

Táto metóda je skvelá na lenivé načítanie určitých obrázkov, pričom každému dáva atribút načítania, ktorý určuje, kedy sa objavia vo výreze. Lenivé načítanie jednotlivých obrázkov však môže chvíľu trvať, najmä ak váš web obsahuje veľa mediálnych súborov.

3. Nainštalujte doplnok WordPress

Keďže nie všetky prehliadače podporujú lenivé načítanie obrázkov a videí, druhá metóda nemusí vždy fungovať. Tento problém môžete zmierniť nainštalovaním doplnku WordPress Lazy loading. Táto metóda vám dáva väčšiu kontrolu nad tým, ktoré obrázky sa majú načítať lenivo bez kódovania.

tu sú najlepšie doplnky WordPress lenivého načítavania na výber, dostupného cez adresár WordPress pluginy.

Zvýšte rýchlosť načítania svojej webovej stránky

Jednou z dobrých vecí na tomto doplnku WordPress je, že podporuje všetky typy obrázkov vrátane AVIF. Tento freemium lenivý doplnok WordPress poskytuje optimalizáciu a aktualizáciu. mierka obrazu prispôsobiť ich zariadeniam návštevníkov, zabezpečiť užívateľskú skúsenosť optimálne.

implementovať lenivé načítanie

Keď zistí pomalšiu sieť, tento doplnok WordPress vám dáva možnosť znížiť kvalitu obrazu. Okrem toho môžete ušetriť úložný priestor ukladaním obrázkov do cloudovej knižnice tohto doplnku WordPress.

Tento bezplatný doplnok vám umožňuje optimalizovať obrázky až pre 5 000 návštev mesačne. Zakúpenie plánu Pro vám umožní lenivé načítanie obrázkov pre 25 000 aktívnych návštevníkov mesačne a viac. Obrázky pre oba plány sa poskytujú prostredníctvom AWS Cloudfront CDN.

Stiahnuť | demo | web hosting

smush

Smush je populárny doplnok na optimalizáciu obrázkov, ktorý podporuje lenivé načítanie. Je kompatibilný s Témy WordPress populárne, nástroje na tvorbu stránok a doplnky knižnice médií. Navyše vám umožňuje uložiť nastavenia pluginu v neobmedzených konfiguráciách a použiť ich len niekoľkými kliknutiami.

implementovať lenivé načítanie

Ďalšími užitočnými funkciami sú nesprávne zisťovanie veľkosti obrázkov, podpora pre viacmiestne a nástroje na kompresiu obrázkov. Inovácia na Smush Pro vám umožňuje optimalizovať veľké obrázky bez obmedzenia veľkosti, ukladať pôvodné obrázky a pristupovať k ďalším zásuvným modulom WPMU Pro. Ceny začínajú od 5 $ / mesiac.

Stiahnuť | demo | web hosting

a3 Lenivé zaťaženie

a3 Lazy Load je bezplatný doplnok pre lenivé načítanie orientovaný na mobilné zariadenia. Je plne kompatibilný s WordPress 5.9 a množstvom populárnych nástrojov vrátane doplnkov WebP a AMP.

implementovať lenivé načítanie

Okrem toho, že ponúka základné funkcie lenivého načítania, a3 Lazy Load vám tiež umožňuje lenivé načítanie videí vrátane videí vložených do stránok, príspevkov, vlastných typov príspevkov a miniaplikácií. Dostupné sú aj efekty lenivého načítania a možnosť načítať skripty z hlavičky alebo päty.

Ďalšie pozoruhodné funkcie, ako je podpora viacerých stránok, podpora obrázkov WebP a pomalé načítanie prvkov iframe – to platí pre prvky iframe, ktoré nenačítava jadro WordPress, ako sú Mapy Google a vložené médiá.

Stiahnuť | demo | web hosting

Tipy na lenivé načítanie WordPress

Kľúčom k maximálnemu využitiu lenivého načítavania je jeho správne používanie. Tu je niekoľko tipov na nastavenie lenivého načítania na vašom webe WordPress:

  • Nenačítajte obrázky hlavičky lenivo. Keďže obrázky umiestnené v hornej časti stránky sú pri načítaní viditeľné, ich lenivé načítanie nemá žiadnu výhodu.
  • Vyberte vhodné zástupné symboly. Ako zástupný znak pre vaše obrázky odporúčame použiť plný farebný odtieň alebo obrázok nízkej kvality.
  • Pridajte čas vyrovnávacej pamäte na načítanie obrázka. Týmto spôsobom sú vaše obrázky pripravené tesne pred vstupom do výrezu návštevníka, čím sa eliminuje čakanie.
  • Definujte rozmery kontajnerov obrázkov. Pomôže vám to predísť náhlym zmenám rozloženia, vďaka ktorým bude vaša webová stránka pri načítaní vyzerať upravene.
  • Implementujte lenivé načítanie len na dlhých stránkach. Medzi dlhé strany patria tie, ktoré si vyžadujú viac ako dve otočenia na dosiahnutie konca a majú viac ako päť obrázkov.

Lenivé načítanie vo WordPress vám umožňuje poskytnúť návštevníkom lepší zážitok z prehliadania. Okrem zvýšenia rýchlosti webových stránok táto funkcia tiež znižuje využitie šírky pásma. Celkovo to pomáha vášmu úsiliu SEO o lepšie umiestnenie vo výsledkoch vyhľadávačov.

Ďalšie odporúčané zdroje

Tiež vás pozývame, aby ste si prečítali zdroje uvedené nižšie, aby ste sa presadili a ovládali svoje webové stránky a blog.

záver

To je všetko pre tento tutoriál, ktorý vám ukáže, ako implementovať Lazy Loading na vašom webe WordPress. Dúfame, že vám tento článok pomohol pochopiť, ako čo najlepšie využiť funkciu lenivého načítania na webových stránkach WordPress. Uistite sa, že používate a Hosting WordPress vysoká kvalita na ďalšie zlepšenie výkonu vašich webových stránok.

Ak máte akékoľvek pochybnosti alebo návrhy, dajte nám vedieť Komentáre.

Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Medzitým, zdieľajte tento článok na rôznych sociálnych sieťach.   

...