Ce este Lazy Loading? Un concept clar

Un concept clar despre ce este încărcarea leneșă. Cum să îmbunătățiți viteza de încărcare a site-ului aplicând tehnica de încărcare leneșă. Care sunt pluginurile de încărcare leneșă a imaginilor recomandate și altele?

Încărcarea leneră este o tehnică în care imaginile, videoclipurile și alte fișiere media sunt încărcate numai atunci când este necesar (în acest caz pagina este derulată în jos la imagine).

Încărcarea leneră a fost popularizată de Google. Google l-a implementat pe site-ul web cu trafic mare pe care îl dețin.

Este de fapt o modalitate excelentă de a îmbunătăți performanța site-ului dvs. pentru utilizatorii dvs.

Aceasta este o modalitate mai bună de a implementa încărcarea dinamică a resurselor decât preîncărcarea, deoarece este leneș în natură și încarcă activele numai atunci când este necesar.

Când derulați în jos pe pagină, fișierele media sunt încărcate și imaginile în special. Acest lucru reduce semnificativ timpul inițial de încărcare a paginii prin reducerea numărului de solicitări făcute pentru resurse HTML, CSS și JavaScript.

Imaginile cu încărcare leneră pot fi întotdeauna implementate folosind pluginuri terță parte, dar este de fapt destul de simplu de implementat pe site-ul dvs. web existent dacă sunteți confortabil cu codul HTML/CSS.

De ce ar trebui să adaug încărcare leneră pe site-ul meu?

Multă vreme, încărcarea tuturor elementelor de pe pagină în paralel a fost cea mai bună practică. Dar astăzi este foarte comun ca utilizatorii să aibă conectivitate limitată și rețele mobile rapide.

Din acest motiv, este o idee bună să încărcați doar ceea ce aveți nevoie la început și apoi să încărcați resurse suplimentare mai târziu, când sunt necesare.

Încărcarea lenevă poate reduce, de asemenea, cantitatea de muncă care trebuie efectuată de browser la momentul încărcării paginii. Acest lucru înseamnă în cele din urmă că veți obține o încărcare mai rapidă a paginii pentru utilizator.

Aveți mai multe moduri de a implementa încărcarea leneșă pe site-ul dvs. Ca orice tehnică, există câteva avantaje și dezavantaje asociate fiecărei metode.

Cum să adăugați încărcare leneșă pe site-ul WordPress?

Puteți adăuga încărcare leneșă la orice site web cu câteva completări simple de cod CSS și JavaScript. Tot ce aveți nevoie este și un pic de etichetare HTML.

Dar în această postare, voi vorbi doar despre pluginurile WordPress lazy loading care vă permit să vă bucurați de avantajele lazy loading imagini pe un site WordPress.

Cum se adaugă încărcare leneră folosind plugin-ul?

Există multe plugin-uri WordPress disponibile care vor adăuga funcționalitate de încărcare leneșă automat site-ului dvs. cu un singur clic.

Dacă doriți să creșteți timpul general de încărcare a site-ului, vă voi recomanda pluginul de optimizare a vitezei Permatters. Acest plugin vă va optimiza site-ul web pentru o experiență de utilizator și o performanță mai bună. Are, de asemenea, câteva funcții suplimentare, cum ar fi încărcare leneșă, compresie gzip etc...

Dacă doriți să vă murdăriți mâinile cu codul sau aveți o cerință de avans, vă voi recomanda alte plugin-uri următoare.

WP Rocket este unul dintre cele mai populare pluginuri cache pentru WordPress. Este, de asemenea, cel mai popular plugin pentru imagini de încărcare leneșă. Vă va ajuta să reduceți viteza de încărcare și să creșteți numărul total de afișări de pagină. Puteți citi WP Rocket Review.

De asemenea, puteți utiliza pluginul Light Speed ​​Cache, care este un alt plugin popular printre utilizatorii WordPress. Vă permite să utilizați reguli avansate de stocare în cache pentru site-ul dvs. web, ceea ce ajută la îmbunătățirea timpului de încărcare a paginii și reduce, de asemenea, utilizarea lățimii de bandă.

În plus, pluginurile de mai sus ajută la încărcarea iFrame-urilor. Vă recomand aceste plugin-uri pentru asta.

Încărcare leneră vs încărcare dinamică vs preîncărcare JavaScript vs încărcare leneră dornică

Marea diferență dintre cei patru termeni este ceea ce se întâmplă atunci când un utilizator vă vizitează pentru prima dată site-ul.

Încărcare leneră: cu încărcare leneră, resursele sunt încărcate după cum este necesar (după cum sugerează și numele). Aceasta înseamnă că, în funcție de acțiunile utilizatorilor, este posibil ca anumite elemente să nu fie încărcate deloc.

Încărcare dinamică : cu încărcarea dinamică, va trebui să preîncărcați totul – chiar dacă nu este necesar. Deci, în funcție de câte date trebuie să trimiteți, acest lucru ar putea crește semnificativ timpul de încărcare a paginii – chiar dacă o parte din acel conținut nu este văzut niciodată de nimeni.

Preîncărcare JavaScript:

Preîncărcarea JavaScript este o parte importantă a procesului de încărcare leneră a imaginii. Facilitează memoria cache a browserului prin livrarea HTML (și CSS dacă utilizați o soluție bazată pe stil).

Utilizează AJAX pentru a livra un fișier separat pentru fiecare imagine de pe pagina ta. Acest lucru permite browserelor să înceapă să descarce imagini înainte ca acestea să fi fost încărcate complet, crescând astfel numărul de imagini care pot fi încărcate printr-o conexiune de rețea lentă sau cu un computer client lent.

Încărcare leneră dornică : aceasta este similară încărcării leneșe și veți încărca resurse după cum este necesar. Diferența este că, cu metoda eager, nu trebuie să vă faceți griji dacă ceva este vizibil sau nu chiar acum. Dacă este încărcat deja, bine și bine - în caz contrar, încărcați-l atunci când devine necesar.

Înțelegerea Lazy Loading pentru SEO

Unii oameni sunt îngrijorați că încărcarea leneșă a imaginilor va avea un impact negativ asupra capacității SEO de a-și accesa conținutul.

Google face o treabă grozavă în stocarea în cache a resurselor de pe site-ul dvs. ori de câte ori îl accesează cu crawlere, așa că dacă încărcați elemente într-un mod care rămâne rapid în timp și nu se schimbă prea des, nu cred că cineva ar trebui să-și facă griji că le afectează căutarea. rangul motorului.

Lazy Loading și CDN

Există câteva CDN utile în industrie care vă pot ajuta să vă distribuiți fișierele de imagine și media. Cele mai multe dintre aceste servicii oferă o experiență excelentă pentru utilizator prin implementarea funcționalității de încărcare leneșă pentru dvs.

Cloudflare CDN este unul pe care aș dori să îl evidențiez printre alte servicii CDN.

Cloudflare este o rețea de livrare de conținut care oferă CDN gratuit și plătit pentru toți utilizatorii contului său. De asemenea, vă optimizează site-ul web și îmbunătățește securitatea prin implementarea unor strategii avansate, cum ar fi optimizarea vitezei paginii, HTTP/2 și multe altele. De asemenea, vă ajută să încărcați leneș imaginea site-ului și fișierele media.

Încărcare leneșă pe desktop sau mobil: cum afectează SEO Google?

Încărcarea leneră există de mult timp pe desktop-uri. Este o caracteristică care este disponibilă în majoritatea browserelor majore, dar există unele caracteristici – cum ar fi preîncărcarea și încărcarea parțială – care nu sunt disponibile pentru toate browserele.

Cu toate acestea, cu dispozitivele mobile, încărcarea leneră este ceva la care va trebui să fii atent.

Este important să vă gândiți la el ca un factor de clasare SEO, deoarece Google acordă acum atenție încărcării leneșe a imaginilor pe dispozitivele mobile.

Cheia aici nu este doar să implementați încărcarea leneșă, ci și să vă asigurați că încarcă resursele într-un mod rapid și eficient. Dacă nu, există o șansă ca clasarea în motorul dvs. de căutare să fie afectată negativ.

Imagine de încărcare leneșă în diferite dimensiuni

Un alt motiv pentru care ar trebui să vă concentrați pe încărcarea leneșă a imaginilor este din cauza utilizării sporite a dispozitivelor mobile.

Oamenilor le place să navigheze și să caute cu telefoanele lor, dar nu sunt la fel de rapidi sau precisi când vine vorba de clicuri pe linkuri, așa că având imagini mai mari înseamnă că oamenii vor face probabil clic înainte de încărcarea completă a imaginii.

Deci, a avea imagini mai mici va fi, evident, mai bine pentru dispozitivele mobile, chiar dacă înseamnă că trebuie încărcate mai multe date, merită pe termen lung, deoarece oamenii vor face clic, mai degrabă decât să părăsească site-ul dvs. cu totul.

Ce cadre sunt utilizate în sarcina leneșă?

Există câteva opțiuni disponibile pentru dvs.:

1. Completare imagine (utilizare implicită)

Picturefill este un script care oferă funcționalitate de încărcare leneșă pentru imaginile dvs. Această bibliotecă JavaScript ușoară va funcționa cu aproape toate browserele majore și este, de asemenea, receptivă. Deci își va schimba comportamentul în funcție de tipul de dispozitiv pe care îl utilizați.

2. LazyLoadJS (utilizare implicită)

LazyLoadJS este un script care oferă funcționalitate de încărcare leneșă pentru imaginile dvs. și este foarte ușor și funcționează cu toate browserele majore. Deci, nu trebuie să vă faceți griji cu privire la nicio problemă atunci când îl utilizați.

De asemenea, include mai multe cozi pentru a îmbunătăți performanța generală a site-ului dvs. și este foarte ușor de utilizat - dezvoltatorii de toate nivelurile de calificare nu ar trebui să aibă nicio problemă în utilizarea acestuia.

3. LoadCSS (utilizare implicită)

LoadCSS este un script care oferă funcționalitate de încărcare leneșă pentru foile de stil, spre deosebire de alte biblioteci care funcționează doar cu imagini sau fișiere video. Acest lucru va preîncărca și HTML și JavaScript.

4. SlimerJS (nu este disponibil)

SlimerJS este un script care oferă funcționalitate de încărcare leneră pentru imaginile dvs. și nu folosește nicio bibliotecă JavaScript, dar are propriul API pe care îl puteți utiliza pentru a configura modul în care funcționează încărcarea leneșă a imaginii.

De asemenea, este foarte ușor și rapid, așa că nu va afecta în niciun fel performanța site-ului dvs.

Încărcarea leneșă funcționează în imaginile de fundal?

Da, ar funcționa în imagini de fundal.

Concluzie

Încărcarea leneră este una dintre cele mai subutilizate tehnici de optimizare a performanței atunci când vine vorba de WordPress și de site-uri web în general.

Este foarte ușor de implementat odată ce știi cum, dar nici măcar nu mulți oameni știu despre asta. Dacă doriți să îmbunătățiți viteza de încărcare a paginii, vă voi recomanda cu căldură să implementați încărcare leneră pentru fișierele de imagine și media.