„Lazy loading” este un mod de incarcare a imaginilor intr-un website care ajuta cu viteza a unei pagini web prin decalarea incarcarii pozelor pana cand acestea intra in zona vizibila a ferestrei la scroll. Acest lucru este foarte util in special pentru website-urile care au multe poze de incarcat, in special pe varianta de mobil.

Sunt multiple moduri in care un website poate implementa lazy loading. Poti incerca unul din multele plugin-uri sau librarii ce ofera aceasta functionalitate sau poti incerca sa o introduci folosind noul mod nativ direct in codul tau.

Folosirea unui plugin deobicei ofera o compatibilitate sporita cu browserele majore si setari avansate mult mai granulare. Singurul dezavantaj este faptul ca trebuie sa incarci cod extra third-party in website, lucru pe care uneori nu vrei sa il faci.

Desi nu este inca complet compatibil cu toate browserele (Safari inca nu supporta acest lucru in mod implicit), incarcarea nativa de tip lazy loading este indeajuns de prezenta acum online sa fie o alternativa viabila. Pentru mai multe detalii legat de compatibilitate poti accesa site-ul caniuse.com.

Modul in care activezi lazy loading nativ pentru poze este prin adaugarea atributului loading=”lazy”, acestea fiind incarcate doar dupa ce vizitatorul ajunge la ele prin scroll:

<img src=”poza.jpg” loading=”lazy” alt=”poza” width=”220″ height=”220″>

Pentru a evita modificari de layout in timp ce se incarca pozele este recomandat sa fie folosite atributele de width si height sau sa fie specificate aceste valori in css. Daca pozele nu au o dimensiune specificata este posibil sa fie folosita valoarea implicita de 0 pixeli (0x0) lucru care poate crea probleme daca toate pozele incap in primul ecran (above-the-fold) la incarcare, ele incepand sa se incarce toate. Pentru pozele care sunt in mod normal in primul ecran este recomandat sa nu se foloseasca lazy loading.

Un exemplu bun de cat de mari pot fi beneficiile este website-ul nostru inoveo.ro unde avem pe homepage un numar foarte mare de poze. Fara lazy loading site-ul ar avea de incarcat in jur de 12MB in total, dar cu lazy loading activat un vizitator incarca doar 3MB initial si restul apare treptat la scroll.

Daca ai nevoie ca site-ul sa se incarce mai repede lazy loading te va ajuta asa cum ne-a ajutat pe noi si o poti folosi impreuna cu numeroase alte metode de imbunatatire a performantei unui website. Ca orice alta functionalitate noua, este bine sa testezi bine inainte si dupa si sa vezi efectele ce le are asupra vizitatorilor.