Lazy loading și tehnici de preîncărcare pentru performanță web optimă
Lazy loading și preîncărcarea (preloading) sunt tehnici complementare de optimizare a performanței web care, aplicate corect, pot reduce semnificativ timpii de încărcare percepuți și pot îmbunătăți scorurile Core Web Vitals.
Lazy loading amână încărcarea resurselor care nu sunt imediat vizibile, reducând volumul de date transferat la încărcarea inițială. Preîncărcarea accelerează încărcarea resurselor critice prin indicarea browser-ului să le descarce cu prioritate.
Aceste tehnici nu sunt opuse, ci complementare: aplicați lazy loading pentru resursele din afara viewport-ului și preîncărcați resursele esențiale pentru experiența inițială a utilizatorului.
Lazy loading și tehnici de preîncărcare pentru performanță web optimă
Lazy loading (încărcarea leneșă) este strategia de a amâna încărcarea resurselor necritice (imagini, videoclipuri, iframes, componente JavaScript) până când acestea sunt aproape de a deveni vizibile în viewport-ul utilizatorului.
Beneficiile lazy loading includ: reducerea volumului de date transferate la încărcarea inițială, îmbunătățirea LCP (Largest Contentful Paint) prin concentrarea resurselor pe conținutul above-the-fold, și economisirea de bandă pentru utilizatorii care nu derulează pagina complet.
Preîncărcarea (preloading, prefetching, preconnecting) este strategia opusă, dar complementară: instruiești browser-ul să înceapă descărcarea resurselor critice cât mai devreme, înainte ca parser-ul HTML să le descopere natural în cod.
Lazy loading pentru imagini
Atributul HTML nativ `loading=”lazy”` este modalitatea cea mai simplă de a activa lazy loading pentru imagini: `
`. Este suportat de toate browserele moderne și nu necesită JavaScript sau biblioteci externe.
Imaginile above-the-fold (vizibile la încărcarea inițială) nu trebuie să aibă lazy loading. Dimpotrivă, imaginea principală (care contribuie la LCP) trebuie să aibă `loading=”eager”` sau fără atribut loading pentru a fi prioritizată.
Setați întotdeauna atributele `width` și `height` pe tag-urile img, indiferent dacă utilizați lazy loading sau nu. Fără dimensiuni specificate, browser-ul nu rezervă spațiul necesar și apare CLS (Cumulative Layout Shift) când imaginea se încarcă, deteriorând scorul Core Web Vitals.
Lazy loading pentru iframes și videoclipuri
Iframele (Google Maps, YouTube embeds, Facebook Like button) pot adăuga zeci de request-uri suplimentare și câteva sute de KB la greutatea paginii. Atributul `loading=”lazy”` funcționează și pentru iframes în browserele moderne.
Videoclipurile YouTube înglobate prin `