Oletko huomannut, että sivustosi latautuu hitaasti, vaikka sisältö sinänsä olisi hyvää? Usein syy piilee kuvissa – erityisesti silloin, kun sivu yrittää ladata kerralla kaikki kuvat, vaikka käyttäjä näkee aluksi vain muutaman ensimmäisen. Lazy loading eli laiska lataaminen on ratkaisu tähän ongelmaan, ja se voi parantaa sivustosi nopeutta merkittävästi ilman että käyttäjäkokemus kärsii.
Mikä lazy loading oikeastaan on?
Lazy loading tarkoittaa tekniikkaa, jossa kuvat ladataan vain silloin, kun ne ovat tulossa näkyviin käyttäjän ruudulla. Sen sijaan, että selain lataisi heti kaikki sivun kuvat kerralla, se odottaa kunnes käyttäjä vierittää sivua alaspäin. Kun kuva on lähestymässä näkyvää aluetta, se ladataan juuri oikealla hetkellä.
Ajattele asiaa vaikkapa pitkää blogiartikkelia, jossa on 20 kuvaa. Ilman lazy loadingia selain lataa kaikki 20 kuvaa heti, vaikka käyttäjä näkee aluksi vain kolme ensimmäistä. Jos käyttäjä lukeekin vain alkupään ja poistuu sivulta, olet turhaan käyttänyt sekä käyttäjän että palvelimesi resursseja 17 kuvan lataamiseen.
Miksi lazy loading kannattaa ottaa käyttöön?
Nopeampi alkulataus on ehkä tärkein syy. Kun sivusi lataa aluksi vain näkyvissä olevat kuvat, käyttäjä pääsee lukemaan sisältöä nopeammin. Google mittaa sivuston nopeutta erityisesti alkuvaiheen osalta, joten tämä vaikuttaa myös hakukonesijoituksiisi.
Vähemmän kaistankulutusta sekä käyttäjälle että palvelimellesi. Jos käyttäjä ei koskaan vieritä sivua loppuun asti, säästyy turhalta lataamiselta. Tämä on erityisen tärkeää mobiilikäyttäjille, joilla saattaa olla rajallinen datapaketti.
Parempi suorituskyky hitaammilla laitteilla. Kun selain ei joudu käsittelemään kymmeniä kuvia kerralla, sivu toimii jouhevammin myös vanhemmilla puhelimilla ja tietokoneilla.
Omakohtaisena kokemuksena voin kertoa, että kun otin lazy loadingin käyttöön erään asiakkaani portfoliosivustolle, jossa oli noin 50 suurta kuvaa, sivun latausnopeus parani melkein kolme sekuntia. Se ei kuulosta paljolta, mutta käytännössä se tarkoitti että sivuston hylkäysprosentti putosi merkittävästi.
Miten lazy loading toimii teknisesti?
Perinteisessä toteutuksessa kuva ladataan näin: <img src=”kuva.jpg” alt=”Kuvaus”>. Selain näkee tämän ja lataa kuvan heti.
Lazy loadingissa käytetään sen sijaan loading-attribuuttia: <img src=”kuva.jpg” alt=”Kuvaus” loading=”lazy”>. Tämä yksinkertainen lisäys kertoo modernille selaimelle, että kuvan voi ladata vasta kun se tulee lähelle näkyvää aluetta.
Vanhemmat selaimet eivät tue tätä attribuuttia, mutta ne yksinkertaisesti jättävät sen huomiotta ja lataavat kuvan normaalisti. Eli lazy loading on niin sanottu progressiivinen parannus – se toimii hyvin uusissa selaimissa, mutta ei riko mitään vanhoissa.
Käytännön toteutus WordPressissa
WordPress lisäsi lazy loadingin automaattisesti versiosta 5.5 alkaen kaikille kuville. Jos sivustosi on ajan tasalla, sinun ei tarvitse tehdä mitään – WordPress lisää loading=”lazy”-attribuutin automaattisesti jokaiseen kuvaan.
Voit tarkistaa asian katsomalla sivusi lähdekoodia (oikea hiiren nappi → Näytä sivun lähdekoodi) ja etsimällä img-tageja. Jos niissä lukee loading=”lazy”, homma toimii jo.
Jos haluat enemmän hallintaa, voit käyttää lisäosia kuten a3 Lazy Load tai Lazy Load by WP Rocket. Nämä tarjoavat lisäasetuksia, kuten mahdollisuuden lisätä latausindikaattoreita tai placeholder-kuvia.
Milloin lazy loadingia ei kannata käyttää?
Vaikka lazy loading on yleensä hyvä asia, on tilanteita missä se voi olla haitallinen:
Ensimmäinen näkyvä kuva eli niin sanottu ”hero image” kannattaa ladata normaalisti. Jos laitat sivun pääkuvan lazy loadaukseen, se saattaa vilkkua tai latautua viiveellä, mikä näyttää epäammattimaiselta.
Pienet kuvat kuten ikonit eivät hyödy lazy loadingista. Jos kuva on vain muutaman kilotavun kokoinen, latauksen viivästämisestä ei ole mitään hyötyä.
Kriittiset UI-elementit kuten logot, painikkeet tai navigaation kuvat pitää ladata aina heti. Muuten sivusto saattaa näyttää rikkinäiseltä.
Yleisiä väärinkäsityksiä
Myytti: Lazy loading huonontaa SEO:ta. Totuus on, että Google osaa nykyään käsitellä lazy loading -kuvia oikein, kunhan ne on toteutettu kunnolla. Älä kuitenkaan piilota kuvia JavaScriptillä niin, ettei hakukone löydä niitä ollenkaan.
Myytti: Lazy loading vaatii monimutkaista JavaScriptiä. Ennen tämä piti ehkä paikkansa, mutta nykyään riittää yksinkertainen HTML-attribuutti. JavaScript-pohjaiset ratkaisut ovat tarpeellisia vain jos tarvitset erikoisominaisuuksia tai vanhempien selainten tukea.
Myytti: Kaikki kuvat pitää laittaa lazy loadingiin. Kuten mainitsin, näkyvän alueen kuvat kannattaa ladata normaalisti. Liika lazy loading voi itse asiassa haitata käyttäjäkokemusta.
Vinkkejä parempaan toteutukseen
Käytä oikeita kuvaformaatteja. WebP-formaatti on nykyään laajalti tuettu ja tarjoaa pienemmän tiedostokoon kuin JPEG tai PNG. WordPress osaa muuntaa kuvia automaattisesti WebP-muotoon uudemmissa versioissa.
Määrittele kuvien korkeus ja leveys HTML:ssä. Tämä estää sivun ”hyppimisen” kun kuvat latautuvat. Kirjoita siis: <img src=”kuva.jpg” width=”800″ height=”600″ loading=”lazy” alt=”Kuvaus”>
Harkitse placeholder-kuvien käyttöä. Voit näyttää esimerkiksi hämärän, pikselijälkeisen version kuvasta ennen kuin oikea kuva latautuu. Tämä antaa käyttäjälle paremman käsityksen siitä, mitä on tulossa.
Lazy loading on yksi niistä pienistä asioista, jotka yhdessä tekevät sivustosta nopean ja miellyttävän käyttää. Ota se käyttöön, testaa sivustosi nopeus ennen ja jälkeen, ja näet itse eron.