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 scris

Avantajele si dezavantajele unui website de tipul One Page

Site-urile sunt o esentiale pentru orice afacere sau proiect personal. Site-urile de tipul “one page” (o pagina), au devenit foarte populara in ultimii ani. Dar care sunt avantajele si dezavantajele unui astfel de site? Sa [...]

Read More... from Lazy loading nativ pentru imaginile din website

Citeste tot articolul

INOVEO a scris

De ce culorile alese arata diferit in print fata de online

Culorile joaca un rol crucial in definirea identitatii vizuale a unui brand. De la celebrul rosu al Coca-Cola la albastrul vibrant al Facebook, culorile au puterea de a evoca emotii, de a crea recunoastere a [...]

Read More... from Lazy loading nativ pentru imaginile din website

Citeste tot articolul

INOVEO a scris

Optimizarea portofoliului de branduri

Optimizarea unui portofoliu de brand implica gestionarea si organizarea strategica a ofertei de produse ale unei companii pentru a maximiza valoarea globala a marcii si cota de piata. Pentru a optimiza portofoliul de marci pentru [...]

Read More... from Lazy loading nativ pentru imaginile din website

Citeste tot articolul

INOVEO a scris

Portofoliu de produse vs portofoliu de branduri

Portofoliul de produse se refera la gama de produse individuale pe care o companie le ofera intr-un anumit moment. Acesta cuprinde toate produsele sau serviciile pe care le comercializeaza o companie, fie ele similare sau [...]

Read More... from Lazy loading nativ pentru imaginile din website

Citeste tot articolul