Ce este încărcarea leneră și cum îmbunătățește experiența utilizatorului?

Dacă există un aspect al unui site pe care majoritatea proprietarilor de site-uri îl ignoră, acesta este timpul de încărcare a paginii. Cheltuiți mult timp și bani obținând designul perfect pentru site-ul nostru și adăugând diferite tipuri de conținut pentru a menține vizitatorii implicați. Dar ce se întâmplă dacă asta nu este suficient pentru a-ți transforma vizitatorii în utilizatori?

Studiile arată că pentru fiecare secundă suplimentară necesară pentru a se încărca site-ul tău, șansa de a converti un vizitator în client scade. Potrivit Portent , șansa de conversie este de 40% la o secundă de încărcare, în timp ce scade la 34% la următoarea și 29% la trei secunde. S-ar putea să vă întrebați: „Atunci, care este soluția?”

Și aici intervine conceptul de Lazy Loading. Este o modalitate mai rapidă de a vă încărca site-ul web fără a sacrifica calitatea conținutului.

În acest articol, vom explora încărcarea leneră, de ce să o folosim și cum se compară cu alte metode. Să intrăm în ea!

Cuprins

• Ce este încărcarea leneșă?
• Importanța încărcării leneșe
• Încărcare nerăbdătoare vs încărcare leneșă
• Cum funcționează încărcarea leneșă
• Implementarea încărcării leneșe

Ce este Lazy Loading?

Încărcarea leneră este o modalitate de a economisi timp încărcând numai părți ale unui site web de care aveți nevoie imediat. În loc să încarce totul dintr-o dată, ceea ce poate fi lent și poate folosi o mulțime de resurse, această metodă încarcă conținutul bit cu bit

Imaginile sau videoclipurile care nu se încarcă imediat au adesea elemente substituenți până când sunt necesare. De exemplu, Lazy Loading nu încarcă toate imaginile simultan. Încarcă doar cele pe care le puteți vedea pe ecran. Restul nu se va încărca până când derulați în jos

În loc să așteptați ca totul să se încarce, puteți vedea imediat ce este deja pe ecran.

Sfat de expert: verificați cât de bine funcționează încărcarea leneșă pe diferite browsere și dispozitive.Acest lucru este pentru a vă asigura că nu există probleme de compatibilitate.

Importanța Lazy Loading

Știm deja că Lazy Loading vă poate ajuta să creșteți conversia. Dar acesta nu este singurul beneficiu pe care îl are. Iată câteva alte motive pentru care ar trebui să implementați Lazy Loading pe site-ul dvs. web.

Optimizați performanța

Încărcarea leneră reduce transferurile de date atunci când cineva vă vizitează site-ul. Acest lucru este esențial pentru persoanele care folosesc dispozitive mobile cu internet lent și planuri de date mici.

Reduceți lățimea de bandă și încărcarea serverului

Încărcarea lenevă salvează datele și reduce munca serverului. Acest lucru reduce costurile pentru proprietarii și utilizatorii de site-uri web, oprind încărcarea conținutului atunci când nu este necesar.

Îmbunătățiți SEO

Motoarele de căutare precum Google prioritizează atât de mult site-urile web cu încărcare rapidă încât este un factor oficial de clasare. Folosind tehnica Lazy Loading, puteți crește viteza de încărcare a paginii, puteți reduce rata de respingere și puteți conduce site-ul dvs. la un clasament mai ridicat.

Ce este Eager Loading?

Încărcarea dornică este exact opusul încărcării leneșe. Inițial, încarcă toate resursele necesare simultan, inclusiv fișiere media, scripturi și stiluri. Aceasta înseamnă că toate elementele necesare ale paginii sunt disponibile imediat. Deci, nu există încărcare suplimentară atunci când utilizatorii derulează sau interacționează.

Încărcarea dornică a fost metoda convențională folosită în trecut și multe site-uri web o folosesc și astăzi.

Deși este ușor de implementat, încărcarea dornică a devenit mai puțin relevantă din cauza mai multor factori, printre care:

Mărirea paginii web

Site-urile web moderne folosesc mai multe elemente media bogate și părți interactive. Aceasta înseamnă că pagina web medie este mult mai mare decât înainte. Astfel, încărcarea nerăbdătoare poate duce la timpi inițiali de încărcare a paginii mai lungi. Mai ales pentru utilizatorii cu conexiuni la internet mai lente.

Impact negativ asupra performanței

Timpii mai mari de încărcare a paginii pot afecta măsurile importante de performanță a site-ului web , cum ar fi First Contentful Paint (FCP) și Largest Contentful Paint (LCP). Acestea sunt cheie pentru SEO și experiența utilizatorului.

Creșterea utilizatorilor de telefonie mobilă

Odată cu utilizarea masivă a navigării pe mobil, ca lucrurile să se încarce super rapid chiar de la început a devenit crucial.

Încărcare nerăbdătoare vs. Încărcare leneșă

Iată o comparație rapidă între Eager Loading și Lazy Loading:

Încărcarea leneșă și încărcarea dornică sunt două metode diferite de încărcare a resurselor cu propriul set de avantaje și dezavantaje. Cu toate acestea, din perspectiva tehnologiei de astăzi, Lazy Loading este considerată tehnica preferată pentru majoritatea site-urilor web moderne datorită eficienței sale, beneficiilor de performanță și experienței de utilizator mai bune.

Cum funcționează Lazy Loading

Acum că știți de ce Lazy Loading asigură rezultate mai bune între cele două, să aruncăm o privire asupra modului în care atinge acest lucru.

Navigarea și interacțiunea utilizatorului : încărcarea leneră depinde de modul în care utilizatorii folosesc pagina web.Adesea, începe când utilizatorii derulează sau mișcă mouse-ul. Pe măsură ce derulează, browserul ghicește că este nevoie de conținut nou în zona pe care o pot vedea. Apoi începe să încarce acele resurse. Încărcarea lenevă poate începe și cu alte acțiuni, cum ar fi clic pe un buton sau trecerea cursorului peste un articol.

Implementare tehnică pentru imagini : Lazy Loading funcționează diferit pentru diferite tipuri de conținut.Pentru imagini, care sunt foarte frecvente, de obicei începeți prin a afișa un substituent de calitate scăzută sau o pictogramă simplă de încărcare. Când utilizatorul defilează lângă imaginea reală, se încarcă cea clară, de înaltă calitate. În acest fel, utilizatorii nu așteaptă imagini pe care nu le pot vedea încă.

Aplicarea diferitelor resurse web : Încărcarea leneră este o metodă flexibilă care poate fi utilizată pentru diferite elemente, nu doar pentru imagini.Funcționează la fel de bine pentru videoclipuri, cadre iframe și chiar pentru elemente care necesită o mulțime de scripturi. Încărcarea acestor elemente numai atunci când este necesar înseamnă că puteți spori considerabil viteza de încărcare a paginii și vă puteți gestiona eficient resursele. Acest lucru este crucial în special pentru resurse grele, cum ar fi videoclipurile de înaltă definiție.

Implementarea Lazy Loading

În această parte, vă vom arăta diferitele modalități de a implementa Lazy Loading pe site-ul dvs. web.

Metoda 1 – Implementarea manuală a Lazy Loading

Modul manual de implementare a încărcării leneșe nu este pentru toată lumea. Este complex și ar trebui să aveți cel puțin cunoștințe intermediare de codare.

Pentru a face acest lucru, veți folosi în principal HTML și JavaScript. Înainte de a începe, asigurați-vă că aveți acces la fișierele tematice ale site-ului dvs. WordPress și aveți încredere că puteți edita HTML și JavaScript.

Iată un ghid detaliat pentru a vă ajuta prin acest proces:

Pasul 1 : Faceți o copie de rezervă a site-ului dvs

Faceți întotdeauna o copie de rezervă a site-ului dvs. WordPress înainte de a face orice modificări ale fișierelor teme pentru a evita pierderea datelor dacă faceți o eroare.

Pasul 2: Editați fișierul functions.php al temei

• Accesați fișierele site-ului dvs. WordPress (folosind un client FTP sau un Manager de fișiere în panoul de control al găzduirii).
• Navigați la /wp-content/themes/your-theme/ și găsiți fișierul functions.php .
• Deschide functions.php pentru editare.

Pasul 3 : Adăugați scriptul Lazy Loading

În functions.php , adăugați o funcție pentru a pune în coadă un fișier JavaScript pentru Lazy Loading. Iată un exemplu de bază:

funcția add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

Acest cod presupune că aveți un fișier JavaScript numit lazy-load.js într-un folder js din directorul dvs. de teme.

Pasul 4 : Creați fișierul JavaScript

• Creați un fișier nou numit lazy-load.js în folderul js al directorului dvs. de teme.
• Adăugați JavaScript pentru a gestiona Lazy Loading. Iată un exemplu de bază folosind IntersectionObserver :

document.addEventListener(„DOMContentLoaded”, function() {

let lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if („IntersectionObserver” în fereastră) {

lasă lazyImageObserver = new IntersectionObserver(funcție(intriri, observator) {

entries.forEach(funcție(întrare) {

if (entry.isIntersecting) {

lasă lazyImage = entry.target;

lazyImage.src = lazyImage.dataset.src;

lazyImage.classList.remove(„leneș”);

lazyImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach(funcție(lazyImage) {

lazyImageObserver.observe(lazyImage);

});

}

});

Pasul 5 : Actualizați-vă etichetele de imagine în WordPress

Modificați etichetele de imagine pentru a accepta încărcare leneră. În șabloanele PHP sau direct în postările/paginile, schimbați etichetele de imagine după cum urmează:

<img class="lazy” src="placeholder-image.jpg" data-src="original-image.jpg" alt="descrierea imaginii">

Înlocuiți placeholder-image.jpg cu o imagine cu rezoluție scăzută sau un grafic de încărcare, iar original-image.jpg cu adresa URL reală a imaginii.

Sfat de expert: utilizați substituenți receptivi pentru imaginile încărcate lene pentru a vă asigura că aspectul rămâne stabil.

Pasul 6 : Testați modificările

• Dacă aveți instalat un plugin de cache, asigurați-vă că ștergeți memoria cache a site-ului dvs.
• Apoi, accesați site-ul dvs. web și derulați în jos la secțiunea în care o imagine ar trebui să fie încărcată leneș.
• Acordați un moment pentru a vedea dacă imaginile se încarcă fără probleme în timp ce derulați.

Note

• Asigurați-vă că testați întotdeauna într-un mediu de dezvoltare, înainte de a o face pe site-ul dvs. live.
• Luați în considerare crearea unei teme pentru copil în timp ce faceți acest lucru. Actualizările temei pot suprascrie modificările dvs.
• Pentru alte tipuri de conținut, cum ar fi videoclipuri sau cadre iframe, o abordare similară poate fi utilizată în cazul în care atributul src este înlocuit cu un atribut data-src și încărcat prin JavaScript când se află în fereastra de vizualizare.

Această tehnică este o modalitate simplă de a încorpora Lazy Loading. Dacă aveți site-uri web mai complicate sau cerințe specifice, poate doriți să explorați o soluție mai puternică sau un plugin.

Metoda 2 – Utilizarea unui plugin WordPress pentru a implementa Lazy Loading

Aceasta este cea mai ușoară dintre cele două metode, deoarece puteți utiliza un plugin WordPress pentru a activa în siguranță Lazy Loading. Plugin-uri multiple vă permit să faceți acest lucru, dar vom folosiWP-Optimize în acest exemplu.WP-Optimize este un plugin WordPress puternic care vă ajută să creșteți viteza site-ului dvs. și să îmbunătățiți experiența utilizatorului.

Oferă o metodă simplă și ușoară de a seta imaginile, cadrele iframe și videoclipurile la încărcare leneșă. Caracteristica sa încorporată Lazy Load întârzie automat încărcarea resurselor web până când acestea sunt vizibile, ceea ce duce la timpi de încărcare a paginii mult mai rapid. Aceasta este, totuși, o caracteristică premium a WP-Optimize.

Pentru a activa funcția:

• Deschideți filaWP-Optimize > Imagini din tabloul de bord WordPress Admin
• Deschideți subfila Lazy Load Images
• De aici, puteți activa Lazy Loading atât pentru imagini, cât și pentru videoclipuri/Iframes

Dacă trebuie să dezactivați Lazy Loading pentru anumite imagini, imagini de fundal, videoclipuri sau cadre iframe, activați-o de aici. De asemenea, puteți alege să omiteți anumite clase de imagini.

Inainte si dupa

Am testat viteza unui exemplu de site web înainte și după implementarea Lazy Load. Site-ul web era deja destul de rapid, cu un timp de încărcare a First Contentful Paint (FCP) de 1,5 secunde,conform GTMetrix.

După activarea Lazy Loading, FCP a devenit 344 ms, ceea ce este mult mai rapid decât ceea ce aveam înainte. Rezultatele pot varia în funcție de cât de mult conținut aveți pe pagina dvs., dar în cele mai multe cazuri scorul dvs. FCP se va îmbunătăți.

Ești gata să accelerezi timpul de încărcare a paginii?

Deci, asta este! Am vorbit despre ce este Lazy Loading și despre rolul important al Lazy Loading pentru site-urile moderne. Așteptând să încărcați lucrurile până când aveți nevoie de ele, face ca paginile să se încarce mai rapid, salvează datele de pe internet și face navigarea mai ușoară, în special pe telefoanele cu date limitate.

De asemenea, am oferit câteva sfaturi utile despre cum să utilizați Lazy Loading în WordPress. Acoperim totul, de la a le face singur cu cod până la utilizarea unui plugin precum WP-Optimize.

Încercați să adăugați Lazy Loading pe site-ul dvs. și spuneți-ne cum vă afectează performanța. Ai întrebări? Simțiți-vă liber să întrebați în comentarii.

întrebări frecvente

Lazy Loading este bun sau rău?

Lazy Loading este, în general, considerată o bună practică, deoarece are mai multe beneficii. Ajută la îmbunătățirea timpilor de încărcare a paginii web și îmbunătățește experiența utilizatorului prin încărcarea conținutului numai atunci când este necesar.

Ce este Lazy Loading în UI?

Lazy Loading în UI se referă la practica de încărcare a elementelor vizuale, cum ar fi imagini și videoclipuri, numai atunci când acestea sunt în (sau sunt în apropiere) fereastra de vizualizare a utilizatorului.

Lazy Loading afectează SEO?

Când este implementat corect, Lazy Loading poate avea un impact pozitiv asupra SEO prin îmbunătățirea timpilor de încărcare a paginii și îmbunătățirea experienței utilizatorului, ambele fiind factori importanți de clasare.

Ar trebui să încarci leneș toate imaginile?

Deși este benefic să încărcați leneș imaginile care sunt în afara ecranului, nu este necesar pentru imaginile care sunt vizibile imediat la încărcarea paginii. Încărcarea imediată a acestor imagini poate preveni orice întârziere în afișarea lor.

Care sunt problemele cu încărcarea leneră?

Unele probleme legate de Lazy Loading includ întârzieri la încărcarea conținutului pe măsură ce utilizatorii derulează, probleme potențiale cu indexarea motorului de căutare dacă nu este implementată corect și dependența de JavaScript, care este posibil să nu fie acceptat de toate browserele.