Laiskalataus

Laiskalataus, englanniksi lazy loading, on verkkokehityksen tekniikka, jossa ei-pääasialliset resurssit ladataan vasta silloin kuin niitä todella tarvitaan. Yleinen käyttötapaus on kuvat, videot, iframe- upotukset ja muut media- tai kolmannen osapuolen sisällöt, jotka eivät ole näkyvissä heti sivun latautuessa. Tämän lähestymistavan tarkoituksena on parantaa sivun ensilatausta, pienentää siirrettävän datan määrää ja säästää käyttäjän laitteen resursseja.

Toimintaperiaate perustuu tapahtumaan, joka kertoo, milloin resurssi on tai on tulossa näkyviin käyttäjän näkökenttään. Nykyään yleisintä on käyttöönotto IntersectionObserver -sijainninvalvojaan pohjaavalla menetelmällä: kun elementti saapuu näytön rajojen sisäpuolelle, siihen liitetty resurssi ladataan. Vaihtoehtoisesti voidaan käyttää perinteisiä scroll- tai tapahtumalähtöisiä ratkaisuja sekä HTML5:n loading="lazy" -attribuuttia, jos ympäristö tukee sitä. On tärkeää tarjota toimiva fallback, esimerkiksi noscript-toteutus tai varotoimet, jotta sivu toimii myös ilman JavaScriptiä.

Hyödyt ja vaikutukset näkyvät erityisesti suorituskyvyssä: pienempi alkuperäinen lataus, parempi Time to First Byte ja usein parempi Largest Contentful Paint -arvo. Tämä voi parantaa käyttäjäkokemusta mobiililaitteissa ja rajoitetulla yhteydellä. Haasteisiin kuuluvat mahdolliset layout- ja sisällön viiveet sekä hakukoneiden käyttäytymisen huomioiminen, sillä liian aggressiivinen lazy loading voi vaikuttaa sisällön indeksointiin. Parempi käytäntö on yhdistää laiskan latauksen suunnittelu kattavaan suorituskyvyn optimointiin, mukaan lukien varo- ja placeholder-ratkaisut sekä sisältövasteisuus.

Lisätietoja: web-suorituskyvyn optimointi, IntersectionObserver, responsive images.