Lazy loading slike: kdaj jih odložiti, kdaj ne

Lazy loading slike: kdaj jih odložiti, kdaj ne

Uporabite loading="lazy" za vse slike, ki niso vidne ob prvem prikazu strani. Za hero sliko ali drug LCP element to nastavitev izpustite, saj brskalniku raje sporočite prioriteto z fetchpriority="high" in <link rel="preload">. Vsaki sliki poleg tega vedno določite width in height ali razmerje aspect-ratio, da preprečite skakanje postavitve med nalaganjem.

Na kratko:

• Za kritične slike, kot so hero elementi, je priporočljivo uporabiti fetchpriority="high" in <link rel="preload"> namesto lazy loadinga, da se izognemo poslabšanju LCP.
• Privzeto WordPress od leta 2020 samodejno doda atribut loading="lazy" na slike v vsebini, na hero slikah ga je treba ročno izključiti prek kode.
• Uporaba lazy loading omogoča manjšo porabo pasovne širine in hitrejši prvi prikaz strani, vendar lahko poslabša vidnostne ukrepe, če se uporablja za glavne slike.
• Implementacijo lazy loadinga je najpreprosteje doseči z atributom loading="lazy" na <img>, za natančnejši nadzor pa je uporabna API Intersection Observer.
• Testiranje vpliva lazy loadinga na hitrosti strani priporočajo uporabo Lighthouse ali PageSpeed Insights, pri čemer je pomembno primerjati vrednosti LCP in Cumulative Layout Shift.

Kazalo

• Kaj je lazy loading slike in kako brskalnik odloči, kdaj jo naložiti
• Prednosti in omejitve tehnike lenega nalaganja
• Kako implementirati: native atribut, Intersection Observer ali JS knjižnice
• Pogoste napake pri lazy loadingu in kako jih odpraviti
• Napredne prakse: fetchpriority, preload in CDN
• Kako WordPress in drugi CMS-ji obravnavajo lazy loading
• Kako testirati vpliv lazy loadinga na Core Web Vitals
• Izkušnje Moxy-web pri optimizaciji slik in hitrosti strani
• Perspektiva: kdaj zadostuje native rešitev, kdaj poklicati strokovnjaka
• Ponudba Moxy-web: izvedba, testiranje in vzdrževanje slikovnih optimizacij
• Viri
• Pogosta vprašanja

Kaj je lazy loading slike in kako brskalnik odloči, kdaj jo naložiti

Odloženo nalaganje pomeni, da brskalnik naložitev nekritičnih virov, predvsem slik izven vidnega polja, preloži do trenutka, ko jih uporabnik dejansko potrebuje. Namesto da stran ob nalaganju povleče vseh petdeset slik naenkrat, se tiste globlje na strani prenesejo šele, ko se jim uporabnik s skrolanjem približa.

Za to obstaja preprost native atribut, ki ga podpirajo vsi sodobni brskalniki:

• loading="lazy" na elementu <img> ali <iframe> sporoči brskalniku, naj sam presodi, kdaj je slika dovolj blizu vidnega polja za nalaganje.
• Brskalnik uporablja notranjo logiko, podobno principu Intersection Observer, ki spremlja razdaljo elementa od roba zaslona in sprosti nalaganje, preden uporabnik sliko sploh zagleda.
• Prednost native pristopa pred JavaScript knjižnicami je odsotnost dodatne skripte, ki bi jo moral brskalnik prenesti in izvesti, preden lazy loading sploh začne delovati.

Rezultat je manj dela za brskalnik in enostavnejša koda za razvijalca.

Prednosti in omejitve tehnike lenega nalaganja

Prihranek pri pasovni širini je največji, ko je na strani veliko slik pod prvim zaslonom. Teža povprečne strani je med letoma 2011 in 2019 narasla s približno 250 KB na 900 KB na namiznih napravah, na mobilnih napravah pa s 100 KB na 850 KB. Brez odloženega nalaganja bi vsa ta teža bremenila prvi obisk strani, tudi če uporabnik nikoli ne skrola do konca.

Lazy loading pa ni brez tveganja:

• Pospeši prvi prikaz strani, ker brskalnik porabi manj pasovne širine za slike, ki jih uporabnik morda sploh ne bo videl.
• Lahko poslabša Largest Contentful Paint (LCP), če ga po nesreči uporabite na sliki, ki je del prvega zaslona.
• Ni primeren za hero slike, glavne bannerje ali kakršenkoli element, ki je viden takoj ob nalaganju strani.

Meja med koristjo in škodo je torej vprašanje pozicije slike na strani, ne tehnike same.

Kako implementirati: native atribut, Intersection Observer ali JS knjižnice

Za večino sodobnih strani zadostuje en sam atribut. Za posebne primere pa obstajata dve dodatni poti.

1. Native loading="lazy" za standardne primere

<img src="slika.jpg" loading="lazy" width="800" height="600" alt="Opis slike">

Ta zapis je dovolj v devetih od desetih primerov. Testi Chroma kažejo, da se na omrežjih 4G kar 97,5 % odloženih slik popolnoma naloži v 10 milisekundah po tem, ko postanejo vidne, kar pomeni, da uporabnik zamude praktično ne opazi.

2. Intersection Observer za natančnejši nadzor

Kadar potrebujete lastno logiko, na primer nalaganje slike šele 300 pikslov pred vidnim poljem, ali nalaganje CSS background-image, ki ga native atribut ne pokrije, poseže se po Intersection Observer API. Ta pristop zahteva nekaj vrstic JavaScripta, vendar da razvijalcu popoln nadzor nad pragom nalaganja.

3. Knjižnice kot lazysizes ali yall.js za starejše primere

Za starejše brskalnike brez podpore native atributa ali za posebne elemente, kot je poster pri videu, se uporabljajo knjižnice poput lazysizes ali yall.js, ki v ozadju prav tako gradijo na principu Intersection Observer.

Pri odzivnih slikah lazy loading brez težav sodeluje z srcset in sizes:

<img srcset="mala.jpg 480w, velika.jpg 1080w"
     sizes="auto"
     loading="lazy"
     width="1080" height="720"
     src="velika.jpg" alt="Odzivna slika">

Brskalnik s tem izbere pravo velikost slike glede na širino zaslona, hkrati pa jo naloži šele, ko je to smiselno.

Pogoste napake pri lazy loadingu in kako jih odpraviti

Najpogostejša napaka je uporaba loading="lazy" na sliki, ki je LCP kandidat, torej največji vidni element ob prvem prikazu strani. V testih je mediana LCP na straneh z napačno uporabo lazy loadinga znašala 3.546 milisekund, v primerjavi z 2.922 milisekundami na straneh brez te napake. Razlika izvira iz tega, da brskalnik hero sliko odkrije prepozno, ker čaka na presojo o njeni vidnosti.

Druge tipične pasti:

• Manjkajoč width in height (ali aspect-ratio) povzroči Cumulative Layout Shift, ker brskalnik ne rezervira prostora za sliko vnaprej.
• Karuseli in drsniki pogosto skrivajo prvo sliko z barvo CSS, kar zmede lazy loading logiko in slika se ne naloži pravočasno.
• Hitro skrolanje na dolgih straneh lahko za trenutek pokaže prazen prostor, če je prag nalaganja postavljen preblizu vidnega polja.

Strokovni nasvet: Preverite vsak hero element ročno. Če je slika prva stvar, ki jo uporabnik vidi, loading="lazy" tam preprosto ne sodi, ne glede na to, kako lepo izgleda koda.

Napredne prakse: fetchpriority, preload in CDN

Za slike, ki so LCP kandidati, kombinacija fetchpriority="high" in <link rel="preload"> pogosto prinese najbolj zanesljive rezultate. Brskalniku s tem eksplicitno poveste, naj to sliko obravnava kot prednostno, namesto da čaka na standardno razvrščanje virov.

<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">
<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Glavna slika">

Nekaj dodatnih prijemov, ki jih velja poznati:

• Atribut sizes="auto" v kombinaciji z srcset in loading="lazy" pomaga brskalniku izbrati pravo velikost slike šele po izračunu postavitve, kar prepreči prenos prevelikih datotek.
• Dober CDN in ustrezno nastavljen predpomnilnik (cache) skrajšata zakasnitev pri prikazu slike, saj se datoteka streže s strežnika, ki je geografsko bliže uporabniku.
• Lazy loading <iframe> elementov, na primer vdelanih videoposnetkov YouTube, lahko prihrani več kot 500 KiB pri začetnem nalaganju strani.

Za širšo sliko o tem, kako se te tehnike prepletajo s formatom slik in kompresijo, si oglejte vodnik za optimizacijo spletnih slik za hitrejšo prodajo.

Kako WordPress in drugi CMS-ji obravnavajo lazy loading

WordPress Core je lazy loading vgradil v jedro sistema in privzeto dodaja loading="lazy" na slike v vsebini objav. Sistem to počne na strežniški strani, torej pri generiranju HTML kode, še preden stran doseže brskalnika.

Za urednike vsebin in razvijalce to pomeni nekaj praktičnih posledic:

• Privzeta nastavitev je dobra za večino slik v telesu članka, saj so redko del prvega zaslona.
• Slikovni blok, ki deluje kot naslovna slika ali hero element, je treba iz lazy loadinga ročno izključiti, sicer WordPress vseeno doda atribut.
• Izklop se navadno uredi prek filtra v kodi teme ali vtičnika, ne prek uporabniškega vmesnika, zato je pri kritičnih straneh smiselno vključiti razvijalca.

Enak previdnostni ukrep velja tudi za druge sisteme za upravljanje vsebine, ki avtomatsko dodajajo atribut loading vsem slikam v galerijah ali seznamih objav.

Kako testirati vpliv lazy loadinga na Core Web Vitals

Vtis, da je implementacija uspešna, ni dovolj, dokler ga ne potrdite z merjenjem.

1. Zaženite Lighthouse ali PageSpeed Insights pred in po spremembi ter primerjajte vrednosti LCP, CLS in INP.
2. Odprite zavihek Network v razvijalskih orodjih brskalnika in preverite, ali se slike pod foldom dejansko nalagajo šele ob skrolanju, ne vse naenkrat.
3. Test ponovite v produkcijskem okolju, saj lokalno testiranje pogosto skrije težave s pravim omrežnim prometom in CDN predpomnilnikom.
4. Po vsaki spremembi spremljajte podatke še nekaj dni, da odkrijete morebitno regresijo pri realnih uporabnikih.

Podroben postopek merjenja najdete v vodniku za Core Web Vitals audit za razvijalce in tržnike.

Izkušnje Moxy-web pri optimizaciji slik in hitrosti strani

Podjetje razvija spletne strani, trgovine in aplikacije, pri čemer je hitrost nalaganja pomemben element projekta. Pri tem se uporabljajo najnovejše tehnologije in integracije, prilagojene posameznemu naročniku.

• Tehnične vsebine podjetja obravnavajo tudi širšo temo optimizacije slik za hitrejšo prodajo, vključno s predpomnjenjem na strežniku pri WordPressu.

• Pristop temelji na razvoju lastne kode brez uporabe predpripravljenih platform, kar omogoča natančno nastavitev lazy loadinga glede na dejansko postavitev strani.

Perspektiva: kdaj zadostuje native rešitev, kdaj poklicati strokovnjaka

Za preprost blog ali predstavitveno stran native loading="lazy" povsem zadostuje. Za spletno trgovino ali pristajalno stran, kjer je LCP neposredno povezan s prodajo, pa napačna nastavitev stane več, kot bi stal strokovni pregled.

— Ziga

Ponudba Moxy-web: izvedba, testiranje in vzdrževanje slikovnih optimizacij

Ker gre razlika med pravilno in napačno nastavljenim lazy loadingom pogosto le za en atribut, a lahko pomeni razliko med hitro in počasno prodajno stranjo, marsikatero podjetje raje prepusti izvedbo nekomu, ki dela s kodo vsak dan. Pri izdelavi spletnih strani, trgovin in aplikacij slikovne optimizacije in Core Web Vitals audit vgradijo neposredno v projekt, pri čemer se koda razvija brez uporabe vnaprej pripravljenih predlog, kar omogoča natančno prilagoditev vsaki postavitvi. Storitev lahko vključuje tudi gostovanje, registracijo domene in redno vzdrževanje, da se hitrost strani ne poslabša ob prihodnjih posodobitvah. Hitrost nalaganja neposredno vpliva na obisk in konverzije, kar potrjuje tudi analiza povezave med hitrostjo strani in prodajo. Če želite preveriti, kako bi audit hitrosti in prenova slikovnih nastavitev vplivala na vašo stran, si oglejte ponudbo na glavni strani Moxy-web in povprašajte za oceno projekta.

Viri

• Lazy loading - MDN Web Docs
• Web
• Lazy-loading images in WordPress Core

Pogosta vprašanja

Ali lazy loading upočasni nalaganje slik?

Ne, nasprotno, pospeši prvi prikaz strani, ker brskalnik ne prenaša slik, ki niso takoj vidne. Zamuda pri kasnejšem prikazu je zanemarljiva, saj se na omrežjih 4G kar 97,5 % odloženih slik naloži v 10 milisekundah po tem, ko postanejo vidne.

Zakaj ne smem uporabiti loading=“lazy” na hero sliki?

Ker brskalnik takrat sliko odkrije prepozno in poslabša LCP. Testi kažejo, da je mediana LCP pri napačni uporabi lazy loadinga znašala 3.546 milisekund, v primerjavi z 2.922 milisekundami pri pravilni nastavitvi.

Ali WordPress samodejno uporablja lazy loading?

Da, WordPress Core od leta 2020 privzeto dodaja atribut loading=“lazy” na slike v vsebini objav. Za hero slike je treba to nastavitev ročno izklopiti prek kode teme ali vtičnika.

Kaj naj uporabim namesto lazy loadinga za kritične slike?

Za LCP slike uporabite kombinacijo fetchpriority="high" in <link rel="preload">, ki brskalniku sporoči, naj sliko naloži prednostno. Ta pristop deluje bolje kot privzeto obnašanje brskalnika brez dodatnih navodil.

Kako preverim, ali lazy loading škoduje moji strani?

Zaženite Lighthouse ali PageSpeed Insights pred in po spremembi ter primerjajte vrednosti LCP in CLS. Za pomoč pri interpretaciji rezultatov so na voljo storitve tehnične podpore in vzdrževanja, ki vključujejo preglede hitrosti.

Priporočeno

• Vodnik za optimizacijo spletnih slik za hitrejšo prodajo
• WebP slike za splet: kako prehod skrajša čas nalaganja
• WordPress: strežniška predpomnitev, kaj predpomniti in kdaj izprazniti
• CDN nastavitve za hitrejšo stran: praktičen vodnik po korakih