Lazy loading: când ajută și când încetinește site-ul

Lazy loading, numit frecvent și lazy load, este o tehnică prin care anumite resurse ale unei pagini sunt încărcate doar atunci când devin necesare.

În loc să descarce imediat toate imaginile, videoclipurile sau elementele integrate, browserul poate amâna încărcarea celor aflate mai jos în pagină. Acestea sunt descărcate atunci când utilizatorul se apropie de ele prin scroll.

Tehnica poate reduce volumul de date transferat la deschiderea paginii. De asemenea, poate îmbunătăți viteza percepută a unui site.

Lazy loading trebuie însă configurat corect. Aplicat asupra imaginii principale sau asupra altor elemente din primul ecran, poate încetini afișarea conținutului important.

Ce înseamnă lazy loading?

Expresia „lazy loading” poate fi tradusă prin încărcare întârziată, încărcare amânată sau încărcare la cerere.

Resursele care nu sunt necesare imediat sunt considerate necritice. Browserul nu le descarcă odată cu elementele din primul ecran, ci le încarcă atunci când utilizatorul se apropie de zona în care trebuie afișate.

Lazy loading este folosit frecvent pentru:

• imagini;
• iframe-uri;
• videoclipuri;
• hărți integrate;
• postări social media încorporate;
• galerii foto;
• secțiuni cu multe produse;
• scripturi și componente interactive.

Pentru imaginile și iframe-urile HTML poate fi utilizat atributul nativ loading="lazy". Browserul decide când resursa este suficient de aproape de zona vizibilă pentru a începe descărcarea.

Cum funcționează lazy loading?

Să presupunem că o pagină conține 30 de imagini.

Fără lazy loading, browserul poate începe să descarce toate imaginile imediat după accesarea paginii. Acest lucru se întâmplă chiar dacă utilizatorul vede doar primele două imagini și nu ajunge niciodată la finalul paginii.

Cu lazy loading activ, resursele din primul ecran sunt încărcate imediat. Imaginile aflate mai jos sunt amânate.

Pe măsură ce utilizatorul face scroll, browserul începe să descarce imaginile care urmează să devină vizibile.

Resursa nu este încărcată neapărat exact în momentul în care intră în ecran. De regulă, browserul începe descărcarea puțin mai devreme, pentru ca elementul să fie pregătit înainte ca utilizatorul să ajungă la el. Distanța folosită diferă în funcție de browser, conexiune și implementare.

Ce resurse pot fi încărcate prin lazy loading?

Tehnica nu este limitată la imaginile unui site.

Imagini

Imaginile sunt cele mai frecvente resurse pentru care este folosit lazy loading.

O pagină cu galerii, produse sau articole poate conține zeci de imagini. Încărcarea lor amânată poate reduce dimensiunea transferată la deschiderea inițială.

Exemplu HTML:

<img
  src="imagine-serviciu.webp"
  alt="Prezentarea serviciului de dezvoltare web"
  width="800"
  height="600"
  loading="lazy"
>

Atributul loading="lazy" îi transmite browserului că imaginea poate fi încărcată mai târziu.

Iframe-uri

Un iframe permite afișarea unei resurse externe în interiorul paginii.

Poate fi folosit pentru:

• videoclipuri YouTube;
• hărți Google Maps;
• formulare externe;
• postări de pe rețelele sociale;
• documente;
• instrumente interactive.

Exemplu:

<iframe
  src="https://exemplu.ro/resursa"
  title="Resursă integrată"
  width="800"
  height="450"
  loading="lazy">
</iframe>

Browserul poate amâna încărcarea iframe-ului atunci când acesta se află în afara zonei vizibile.

Videoclipuri

Fișierele video pot consuma multe resurse.

În funcție de modul de integrare, pot fi amânate:

• fișierul video;
• imaginea poster;
• playerul;
• scripturile externe;
• conexiunea către platforma video.

Pentru un videoclip YouTube aflat mai jos în pagină, poate fi afișată inițial doar o imagine. Playerul complet este încărcat după interacțiune sau când utilizatorul se apropie de secțiune.

Hărți

O hartă Google Maps integrată poate încărca mai multe scripturi și resurse externe.

Dacă harta se află în secțiunea de contact de la finalul paginii, încărcarea sa imediată poate fi inutilă pentru vizitatorii care nu ajung acolo.

Aplicarea lazy loading asupra iframe-ului poate reduce resursele necesare la deschiderea paginii.

Scripturi și componente

Conceptul de lazy loading poate fi aplicat și în dezvoltarea JavaScript.

O componentă, o bibliotecă sau un modul poate fi încărcat doar atunci când:

• utilizatorul deschide un popup;
• accesează o anumită secțiune;
• apasă un buton;
• intră într-o pagină;
• folosește o funcționalitate.

Această implementare este diferită de atributul HTML loading="lazy" și necesită, de regulă, dezvoltare suplimentară.

Care este diferența dintre lazy loading și eager loading?

Lazy loading amână încărcarea unei resurse necritice.

Eager loading indică faptul că resursa trebuie încărcată imediat.

Pentru imaginile HTML pot fi întâlnite următoarele valori:

loading="lazy"

Resursa poate fi încărcată mai târziu.

loading="eager"

Resursa trebuie încărcată imediat.

Dacă atributul loading lipsește, browserul folosește comportamentul său normal.

Nu este necesar să adaugi loading="eager" tuturor imaginilor din primul ecran. În multe situații, este suficient ca atributul loading="lazy" să lipsească.

Care sunt avantajele lazy loading?

Configurarea corectă poate îmbunătăți performanța unei pagini.

Reduce volumul inițial de date

Browserul nu mai descarcă imediat fiecare imagine sau iframe.

Un utilizator care citește doar începutul paginii nu va consuma date pentru toate elementele aflate la final.

Avantajul este important mai ales pe:

• conexiuni mobile;
• site-uri cu galerii;
• magazine online;
• pagini foarte lungi;
• articole cu multe imagini;
• pagini cu videoclipuri integrate.

Poate accelera încărcarea inițială

Atunci când sunt descărcate mai puține resurse, browserul se poate concentra asupra conținutului important din primul ecran.

Lazy loading poate reduce concurența dintre resursele critice și cele care nu sunt încă necesare.

Reduce solicitările inutile

O resursă poate să nu fie încărcată deloc dacă utilizatorul nu ajunge la ea.

Acest lucru poate reduce numărul solicitărilor către server și volumul de date transferat.

Poate îmbunătăți experiența pe mobil

Dispozitivele mobile pot folosi conexiuni mai lente sau planuri de date limitate.

Încărcarea doar a resurselor necesare poate face pagina mai rapidă și mai ușor de utilizat.

Este disponibil nativ în browsere

Pentru imaginile și iframe-urile obișnuite nu mai este întotdeauna necesară o bibliotecă JavaScript separată.

Atributul loading="lazy" poate fi interpretat direct de browserele moderne.

Care sunt dezavantajele lazy loading?

Tehnica nu trebuie aplicată automat tuturor resurselor.

Poate întârzia imaginile importante

Dacă imaginea principală a paginii este setată să se încarce întârziat, browserul poate începe descărcarea prea târziu.

Vizitatorul poate vedea pentru scurt timp un spațiu gol sau un fundal incomplet.

Problema poate afecta și valoarea Largest Contentful Paint.

Poate provoca apariția târzie a conținutului

Pe o conexiune lentă, utilizatorul poate ajunge la o imagine înainte ca aceasta să fie descărcată complet.

În locul imaginii poate apărea temporar:

• un spațiu gol;
• un placeholder;
• o animație de încărcare;
• o imagine neclară.

Distanța de preîncărcare trebuie să ofere browserului suficient timp pentru descărcare.

Poate cauza deplasări de layout

Dacă browserul nu cunoaște dimensiunile imaginii, spațiul necesar poate să nu fie rezervat.

După încărcare, imaginea împinge textul și celelalte elemente.

Atributele width și height sunt recomandate pentru imaginile lazy-loaded, deoarece ajută browserul să rezerve spațiul înainte de descărcarea fișierului.

Poate intra în conflict cu alte sisteme

Un site WordPress poate avea lazy loading activat simultan prin:

• funcțiile native WordPress;
• tema activă;
• Elementor;
• un plugin de cache;
• un plugin de optimizare a imaginilor;
• un CDN;
• un script personalizat.

Mai multe implementări aplicate aceleiași imagini pot cauza întârzieri, efecte vizuale nedorite sau probleme de compatibilitate.

După activarea unei funcții suplimentare, site-ul trebuie testat pe desktop și mobil.

Ce imagini nu trebuie încărcate prin lazy loading?

Lazy loading trebuie folosit în principal pentru imaginile aflate sub primul ecran.

Imaginea principală din hero section

Imaginea din hero este adesea una dintre cele mai mari resurse vizibile imediat.

Dacă aceasta este principalul element vizual al paginii, poate deveni elementul LCP.

Aplicarea loading="lazy" asupra imaginii LCP poate întârzia descărcarea și poate înrăutăți performanța. Recomandările web.dev indică eliminarea lazy loading de pe imaginea LCP și folosirea priorității ridicate atunci când aceasta poate fi identificată corect.

Exemplu:

<img
  src="hero-dezvoltare-web.webp"
  alt="Servicii de dezvoltare web"
  width="1200"
  height="800"
  fetchpriority="high"
>

Atributul fetchpriority="high" nu trebuie adăugat tuturor imaginilor.

El trebuie rezervat, de regulă, imaginii principale care are șanse mari să fie elementul LCP.

Logo-ul din header

Logo-ul este vizibil imediat și trebuie încărcat rapid.

În general, acesta nu trebuie tratat ca o imagine aflată în afara ecranului.

Imaginile vizibile în primul ecran

Nu doar imaginea LCP trebuie analizată.

Dacă mai multe imagini apar în zona above the fold, acestea nu ar trebui întârziate fără un motiv clar.

Exemple:

• imaginea unui produs;
• avatarul autorului;
• o pictogramă importantă;
• imaginea unei oferte;
• primele fotografii dintr-o galerie;
• imaginea principală a unui articol.

Imaginile necesare unei interacțiuni imediate

O imagine afișată imediat după deschiderea meniului sau a unui popup poate necesita preîncărcare.

Comportamentul trebuie stabilit în funcție de probabilitatea și rapiditatea interacțiunii.

Lazy loading și zona above the fold

Zona above the fold conține elementele vizibile înainte ca utilizatorul să facă scroll.

Resursele din această zonă sunt prioritare. Ele contribuie la prima impresie și la viteza percepută.

Regula generală este:

• imaginile above the fold se încarcă imediat;
• imaginile aflate mai jos pot folosi lazy loading;
• imaginea LCP poate primi fetchpriority="high";
• dimensiunile trebuie definite pentru toate imaginile.

Limita exactă a primului ecran diferă între desktop, tabletă și mobil.

O imagine poate fi sub fold pe desktop, dar vizibilă imediat pe un telefon. Din acest motiv, implementarea trebuie testată pe mai multe rezoluții.

Lazy loading și Core Web Vitals

Lazy loading poate influența mai multe metrici de performanță.

Largest Contentful Paint

Largest Contentful Paint măsoară timpul necesar pentru afișarea celui mai mare element vizibil din primul ecran.

În multe pagini, acest element este imaginea principală.

Dacă imaginea LCP folosește lazy loading, descărcarea sa poate începe prea târziu. Din acest motiv, resursa principală trebuie exclusă.

Cumulative Layout Shift

Cumulative Layout Shift măsoară stabilitatea vizuală a paginii.

O imagine care apare fără ca spațiul să fi fost rezervat poate deplasa conținutul.

Definirea dimensiunilor prin width și height sau printr-un raport de aspect stabil reduce riscul deplasărilor.

Interaction to Next Paint

Lazy loading poate reduce cantitatea de cod și resurse procesate la începutul paginii.

Totuși, un script de lazy loading prea complex poate adăuga propriul consum de JavaScript.

Implementarea nativă este, de regulă, mai simplă decât o bibliotecă folosită doar pentru imaginile standard.

Lazy loading influențează SEO?

Lazy loading nu garantează poziții mai bune în Google.

Poate contribui însă la o pagină mai rapidă și la o experiență mai bună pentru utilizatori.

Problemele apar atunci când implementarea împiedică accesarea sau afișarea conținutului.

Motoarele de căutare trebuie să poată descoperi resursa în codul paginii. O imagine importantă nu ar trebui ascunsă exclusiv în spatele unei interacțiuni pe care robotul nu o poate executa.

Pentru o implementare simplă, atributul nativ loading="lazy" păstrează adresa imaginii în atributul src. Browserul decide doar momentul descărcării.

Optimizarea pentru SEO trebuie să includă și:

• text alternativ relevant;
• nume de fișier descriptiv;
• dimensiuni corecte;
• compresie;
• formate moderne;
• conținut contextual;
• sitemap pentru imagini, atunci când este necesar.

Lazy loading și optimizarea imaginilor sunt același lucru?

Nu.

Lazy loading controlează momentul în care imaginea este încărcată.

Optimizarea imaginilor controlează dimensiunea, formatul și calitatea fișierului.

O imagine de 5 MB rămâne prea mare chiar dacă este încărcată mai târziu.

O strategie completă poate include:

• redimensionarea imaginii;
• compresia fișierului;
• folosirea WebP sau AVIF;
• generarea mai multor dimensiuni;
• folosirea atributelor srcset și sizes;
• definirea dimensiunilor;
• lazy loading pentru imaginile aflate sub fold.

Cele două tehnici trebuie folosite împreună.

Lazy loading și caching sunt același lucru?

Nu.

Cachingul păstrează temporar copii ale unor resurse sau pagini pentru a le livra mai rapid.

Lazy loading amână descărcarea unor resurse până când acestea devin necesare.

O imagine poate fi:

• salvată în cache;
• comprimată;
• livrată prin CDN;
• încărcată prin lazy loading.

Fiecare tehnică rezolvă o parte diferită a procesului de optimizare.

Lazy loading și CDN

Un CDN distribuie resursele site-ului printr-o rețea de servere.

Acesta poate livra imaginile dintr-o locație apropiată de utilizator.

Lazy loading stabilește când sunt solicitate acele imagini.

Cele două soluții sunt complementare:

• CDN-ul poate reduce timpul de transfer;
• lazy loading poate evita solicitarea resurselor care nu sunt vizualizate.

Folosirea unui CDN nu înseamnă că toate imaginile trebuie încărcate imediat.

Lazy loading în WordPress

WordPress include lazy loading nativ pentru imagini începând cu versiunea 5.5.

Platforma poate adăuga automat atributul loading="lazy" imaginilor eligibile. Implementarea a fost îmbunătățită ulterior pentru a evita, prin euristici, încărcarea întârziată a primelor imagini care pot apărea în viewport.

Versiunile moderne WordPress pot calcula atribute de optimizare precum:

• loading="lazy";
• fetchpriority="high";
• decoding="async".

Acestea sunt adăugate în funcție de contextul imaginii. Lazy loading și fetchpriority="high" nu trebuie aplicate simultan aceleiași imagini.

Este necesar un plugin de lazy loading în WordPress?

Nu întotdeauna.

Pentru imaginile standard, WordPress și browserul pot gestiona deja încărcarea întârziată.

Un plugin poate fi util atunci când trebuie optimizate suplimentar:

• imaginile de fundal;
• videoclipurile YouTube;
• iframe-urile;
• hărțile;
• galeriile speciale;
• elementele generate de alte pluginuri;
• componentele JavaScript.

Înainte să activezi funcția într-un plugin de cache, verifică dacă lazy loading este deja aplicat.

Două sisteme active simultan pot produce rezultate mai slabe decât implementarea nativă.

Cum verifici dacă WordPress folosește lazy loading?

Deschide pagina în browser și accesează codul sursă sau instrumentele pentru dezvoltatori.

Caută imaginea și verifică dacă elementul conține:

loading="lazy"

Pentru imaginea principală trebuie verificat dacă atributul lipsește.

Poți analiza și panoul Network pentru a vedea momentul în care sunt descărcate imaginile.

Lazy loading în Elementor

Elementor poate afișa imagini prin mai multe tipuri de widgeturi:

• Image;
• Image Box;
• Gallery;
• Loop Grid;
• Posts;
• Products;
• background image;
• video;
• Google Maps.

Imaginile introduse ca elemente HTML pot beneficia de lazy loading nativ.

Imaginile adăugate ca fundal CSS necesită o analiză diferită. Atributul HTML loading nu poate fi adăugat direct unei proprietăți background-image.

Pentru imaginea principală a unui hero, folosirea unui widget Image poate oferi mai mult control decât o imagine de fundal. Astfel pot fi definite:

• textul alternativ;
• dimensiunile;
• srcset;
• prioritatea;
• comportamentul de încărcare.

Alegerea depinde și de rolul vizual al imaginii.

Lazy loading pentru imagini de fundal

O imagine setată prin CSS poate arăta astfel:

.hero {
  background-image: url("hero.webp");
}

Atributul loading="lazy" nu poate fi aplicat acestei reguli CSS.

Browserul descarcă imaginea atunci când stilul este aplicat unui element relevant.

Pentru imaginile de fundal aflate mai jos în pagină pot fi folosite soluții precum:

• aplicarea clasei după apropierea de viewport;
• JavaScript cu Intersection Observer;
• funcțiile unui plugin de performanță;
• înlocuirea fundalului cu un element <img>;
• încărcarea condiționată a secțiunii.

Nu este recomandat ca imaginea principală din hero să fie ascunsă printr-un sistem agresiv de lazy loading.

Ce este Intersection Observer?

Intersection Observer este o interfață JavaScript care poate detecta apropierea sau intrarea unui element în viewport.

Poate fi folosită pentru:

• încărcarea imaginilor;
• pornirea animațiilor;
• afișarea componentelor;
• încărcarea scripturilor;
• înlocuirea unui placeholder;
• pornirea unui videoclip.

Browserul urmărește relația dintre element și zona vizibilă.

Această soluție oferă mai mult control decât atributul HTML nativ, dar implică și mai mult cod.

Pentru imagini și iframe-uri obișnuite este recomandată, de regulă, implementarea nativă. JavaScript poate fi păstrat pentru situațiile pe care browserul nu le poate gestiona direct.

Cum implementezi corect lazy loading?

Identifică resursele din primul ecran

Înainte să activezi tehnica, stabilește ce elemente sunt vizibile imediat.

Verifică separat:

• desktop;
• laptop;
• tabletă;
• telefon.

Nu aplica lazy loading automat imaginii LCP sau resurselor esențiale din primul ecran.

Aplică lazy loading resurselor aflate mai jos

Imaginile din articole, galerii și secțiunile inferioare sunt candidate potrivite.

Exemplu:

<img
  src="studiu-de-caz.webp"
  alt="Rezultatele unui proiect de marketing"
  width="900"
  height="600"
  loading="lazy"
>

Definește dimensiunile

Adaugă valorile width și height.

Browserul poate calcula raportul imaginii și poate rezerva spațiul necesar înainte de încărcare.

Păstrează adresa reală în src

Pentru implementările native, imaginea trebuie să aibă adresa în atributul src.

Evită soluțiile vechi care înlocuiesc src cu un fișier transparent și păstrează imaginea reală doar într-un atribut personalizat, dacă nu există un motiv tehnic clar.

Optimizează fișierul

Lazy loading nu înlocuiește:

• compresia;
• redimensionarea;
• formatele moderne;
• imaginile responsive.

Testează fără cache

După modificare, golește cache-ul site-ului, al CDN-ului și al browserului.

Verifică dacă imaginea principală se încarcă imediat și dacă celelalte apar înainte ca utilizatorul să ajungă la ele.

Măsoară rezultatele

Folosește instrumente precum:

• PageSpeed Insights;
• Lighthouse;
• Chrome DevTools;
• raportul Core Web Vitals;
• panoul Network;
• testarea pe dispozitive reale.

Nu presupune că activarea opțiunii a îmbunătățit automat site-ul.

Cum verifici dacă o imagine este încărcată prea târziu?

Poți identifica problema prin mai multe semne:

• imaginea principală apare după text;
• hero-ul rămâne gol pentru câteva momente;
• este vizibil un efect de fade întârziat;
• imaginea apare abia după scroll;
• PageSpeed semnalează că imaginea LCP este lazy-loaded;
• resursa începe să fie descărcată târziu în panoul Network;
• LCP crește după activarea unei funcții de optimizare.

Într-o astfel de situație, imaginea trebuie exclusă din lazy loading.

Greșeli frecvente când folosești lazy loading

Aplicarea tehnicii tuturor imaginilor

Nu toate imaginile sunt necritice.

Logo-ul, imaginea principală și imaginile vizibile imediat trebuie încărcate fără întârziere.

Lazy loading pe imaginea LCP

Aceasta este una dintre cele mai frecvente erori de optimizare.

Pluginul reduce numărul solicitărilor inițiale, dar întârzie tocmai cel mai important element vizual.

Activarea funcției în mai multe pluginuri

Lazy loading poate fi activ în WordPress, tema site-ului, pluginul de cache și CDN.

Păstrează o singură implementare principală și verifică excluderile.

Lipsa dimensiunilor imaginilor

Fără dimensiuni, elementele pot deplasa conținutul după încărcare.

Folosirea unui efect de fade prea lent

Unele pluginuri adaugă o animație atunci când imaginea apare.

Un efect lung poate crea impresia că site-ul este mai lent, chiar dacă fișierul a fost deja descărcat.

Încărcarea întârziată a imaginilor foarte apropiate de fold

O imagine aflată imediat sub primul ecran trebuie să înceapă descărcarea înainte ca utilizatorul să ajungă la ea.

Implementările native gestionează automat o distanță față de viewport. Soluțiile personalizate trebuie configurate cu o marjă suficientă.

Ignorarea versiunii mobile

O imagine aflată sub fold pe desktop poate apărea în primul ecran pe mobil.

Testarea trebuie făcută pe mai multe dispozitive.

Folosirea lazy loading pentru a ascunde lipsa optimizării

O imagine foarte mare rămâne neoptimizată.

Tehnica doar amână problema până când utilizatorul ajunge la resursă.

Site-ul tău folosește corect lazy loading?

O funcție de optimizare activată greșit poate întârzia exact imaginile pe care utilizatorul trebuie să le vadă primele.

În cadrul serviciilor de dezvoltare și optimizare web, analizăm modul în care sunt încărcate imaginile, videoclipurile și resursele externe. Verificăm zona above the fold, imaginea LCP, stabilitatea vizuală și comportamentul pe mobil.

Prin serviciul de mentenanță, putem configura pluginurile de performanță, elimina funcțiile care se suprapun și testa site-ul după fiecare modificare.