Scris de Marius Chiriac

Lazy loading nativ pentru imaginile din website

„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.

Mai multe articole

INOVEO a facut

Teambuilding la Berlin pentru echipa INOVEO

Intreaga echipa INOVEO a participat recent intr-o misiune de descoperire si inspiratie la Berlin, ce a oferit totodata si un bun prilej de teambuilding inedit. Parte din strategia interna de dezvoltare si consolidare a coeziunii, [...]

Citeste tot articolul from Lazy loading nativ pentru imaginile din website

Citeste tot articolul

INOVEO a scris

Co-branding si Co-marketing

Strategia de co-branding este o forma de colaborare intre doua sau mai multe branduri care isi unesc fortele pentru a crea un produs sau serviciu nou comun, care poarta amprenta ambelor branduri. Un exemplu in [...]

Citeste tot articolul from Lazy loading nativ pentru imaginile din website

Citeste tot articolul

Dochita Zenoveiov a spus

Despre Branduri si Branding – Interviu TVBreak

Afla in interviul video de mai jos ce este brandul, cum se construieste, cum abordeaza antreprenorii aspectul brandingului si de ce e nevoie de branding de tara pentru Romania. [...]

Citeste tot articolul from Lazy loading nativ pentru imaginile din website

Citeste tot articolul

Dochita Zenoveiov a spus

15 minute cu un antreprenor – Interviu ZF

Cateva din subiectele discutate la ZF Live cu Dochita Zenoveiov: – Sunt mult mai multe nume româneşti care devin branduri faţă de acum câţiva ani. – Brandul este o investiţie pe termen lung. – In [...]

Citeste tot articolul from Lazy loading nativ pentru imaginile din website

Citeste tot articolul