Lazy Loading
PerformanțăLazy Loading (încărcarea leneșă) este o tehnică de optimizare care amână încărcarea resurselor non-critice — în special imagini și videoclipuri — până în momentul în care acestea devin vizibile în viewport-ul utilizatorului. Aceasta reduce timpul inițial de încărcare a paginii, economisește lățime de bandă și îmbunătățește performanța percepută de vizitator.
Lazy Loading sau încărcarea leneșă este o strategie de optimizare a performanței web care prioritizează încărcarea conținutului vizibil imediat (above the fold) și amână restul până când utilizatorul derulează pagina.
Principiul este simplu și eficient: în loc să descarce toate cele 50 de imagini ale unei pagini la încărcarea inițială, browserul descarcă doar cele 3-4 vizibile în viewport. Pe măsură ce utilizatorul derulează, imaginile următoare sunt încărcate progresiv, exact înainte de a deveni vizibile.
Implementarea modernă a lazy loading-ului este remarcabil de simplă. Atributul HTML nativ loading="lazy" pe elementele img și iframe este suportat de toate browserele moderne. Nu necesită JavaScript suplimentar și este metoda recomandată de Google.
Pentru scenarii mai complexe, Intersection Observer API oferă control programatic complet. Aceasta permite definirea pragurilor de vizibilitate, a marjelor de preîncărcare și a comportamentelor personalizate pentru diferite tipuri de conținut.
Beneficiile lazy loading-ului sunt substanțiale:
Timp de încărcare redus — pagina inițială se încarcă mai rapid deoarece browserul descarcă mai puține resurse.
Economie de bandă — utilizatorii care nu derulează până la sfârșitul paginii nu descarcă resursele de acolo.
Performanță LCP îmbunătățită — mai puține resurse concurente permit încărcarea mai rapidă a elementului principal al paginii.
Un aspect important: imaginea principală a paginii (hero image sau LCP element) nu trebuie să aibă lazy loading, deoarece aceasta trebuie încărcată imediat. Aplicarea lazy loading-ului pe elementul LCP va înrăutăți scorul Core Web Vitals.
Pentru videoclipuri și iframe-uri (YouTube, Vimeo), lazy loading-ul este deosebit de benefic, deoarece fiecare embed descarcă resurse suplimentare semnificative.