Lazy loading
Lazy loading este o tehnică ce amână încărcarea resurselor necritice, precum imaginile de sub pliul paginii, până când acestea sunt cu adevărat necesare, îmbunătățind viteza de încărcare inițială a paginii.
Lazy loading este o strategie de optimizare a performanței care amână încărcarea resurselor până când acestea sunt necesare. În loc să încarce fiecare imagine, videoclip și script la deschiderea inițială a paginii, lazy loading încarcă doar resursele vizibile în viewport-ul inițial și le aduce pe restul pe măsură ce utilizatorul derulează. Cea mai comună aplicare este lazy loading pentru imagini.
Fără lazy loading, browserul descarcă toate cele 50 de imagini imediat, risipind lățimea de bandă și încetinind randarea inițială. Cu lazy loading, doar imaginile vizibile se încarcă primele, iar restul se încarcă pe măsură ce utilizatorul derulează până la ele.
În practică
- Un portofoliu de fotografie cu 200 de imagini pe pagină a redus timpul de încărcare inițial de la 12 secunde la 1,8 secunde prin încărcarea lazy a tuturor imaginilor de sub primele trei rânduri
- O pagină de categorie e-commerce cu 60 de imagini de produs a implementat lazy loading nativ, reducând greutatea inițială a paginii de la 8MB la 800KB
- Un site de știri încarcă lazy videoclipurile YouTube încorporate, înlocuindu-le cu miniaturi ușoare până când utilizatorul dă clic pentru redare, economisind 1,5MB de JavaScript per videoclip
- O pagină de articol long-form încarcă lazy widget-urile de articole similare și secțiunile de comentarii din partea de jos, prioritizând conținutul articolului pentru cea mai rapidă randare inițială posibilă
Nu sunteți sigur cum se aplică în cazul dumneavoastră?
Un inginer senior parcurge site-ul dumneavoastră, prezența în căutări și felul în care ajung la dumneavoastră solicitările, apoi notează primele trei lucruri care merită reparate. Păstrați documentul în orice caz.