Olet ehkä kuullut lazy loadista, mutta mikäs ihme se laiska lataus on? Sehän kuulostaa vähän veltolta ja vetelältä. Mitä siitä siis pitäisi ajatella, kun verkkopalvelun tekninen toteuttaja höpöttää innoissaan lazy loadista?

Lazy loading (tunnetaan myös nimellä ”on demand” loading) on tapa ladata verkkosivulla olevaa sisältöä vasta sitten, kun kävijä sitä oikeasti tarvitsee. Tätä teknistä toteutustapaa käytetään eniten kuvien ja videoiden yhteydessä, mutta myös muuta sisältöä voi lazy loadata.

Miksi pitäisi käyttää lazy loadausta?

  • Lazy load auttaa parantamaan sivuston nopeutta.
  • Mitä isompi latausaika sivuston ensinäkymällä on, sitä todennäköisemmin kävijä sulkee sivun kokonaan.
  • Harva skrollaa sivustoa alusta loppuun, joten ilman lazy loadia lataat luultavasti kävijän saataville turhaa sisältöä, jota hän ei koskaan edes näe.
  • Jos sivun kaikki materiaali ladataan kerralla eli ilman lazy loadia, ensimmäisen näkymän renderöinti tapahtuu vasta sen jälkeen, kun kaikki sisältö on ladattu. Kävijä tuijottaa siis liian pitkään tyhjää näkymää.

Yksi konkreettinen esimerkki, kiitos

Käytännössä lazy load tarkoittaa esimerkiksi sitä, että sivulla olevasta, laadukkaasta kuvasta generoidaan myös yksi erittäin matalaresoluutioinen kuvaversio. Kuvan tiedostokoko on pieni, se latautuu nopeasti, mutta se on tietysti myös melko pikselimäinen. Tämän kuvan tehtävä on kuitenkin vain täyttää tyhjä tila sen aikaa, kun täysikokoinen kuva latautuu.

Tämä pienikokoinen kuva ladataan välittömästi sivulatauksen yhteydessä, eli kun kävijä avaa sivun. Vasta kun kävijä skrollaa kuvaa kohti ja se on saapumassa kävijän näytölle, ladataan uusi, täysikokoinen kuva, joka korvaa pikselöidyn kuvan.

Tässä on esimerkki, miten blogijulkaisun artikkelikuva latautuu vasta tärkeämmän sisällön jälkeen.

Blogikirjoituksen artikkelikuva ei ole vielä latautunut, joten käytetään erittäin matalaresoluutioista kuvaa taustana. Kuvan päällä oleva teksti ja muu tärkeä sisältö näkyy jo kävijälle.
Kun tärkeä sisältö on ladattu valmiiksi, voidaan myös ladata taustakuva ja tässä on sitten lopputulos.

Ilman lazy loadia kaikki tämä sisältö olisi ollut piilossa niin kauan, kunnes kuva olisi latautunut. Jos käyttäjällä on erittäin hidas verkkoyhteys, olisi pelkästään kuvan lataamiseen voinut helposti mennä monta sekuntia. Se on pitkä aika odottaa.

Lazy loadilla voidaan tarjota tärkein sisältö ensin ja niin nopeasti kuin mahdollista. Vasta sen jälkeen ladataan kaikki ylimääräiset sisällöt, kuten ne kuvat tai myös muu sisältö jossain sivun alareunassa.

Lazy load on olennainen osa verkkosivuprojektia

Sivuston toteutuksessa lazy loadia pitää miettiä erityisesti kuvien ja videoiden kohdalla, koska ne ovat yksi merkittävin latausaikaan vaikuttava sisältö. Minun mielestäni kuvien kanssa lazy loadin pitäisi tänä päivänä olla melkein pakollista. Meillä lazy load on lisätty mukaan jo aloitusteemaamme Aucor starteriin, eli kaikki WordPressin hallinnasta lisätyt kuvat lazy loadataan automaattisesti.

Tämän lisäksi mietimme jokaisessa projektissa erikseen, mitä muuta sisältöä tai mitä osia sivustosta voitaisiin kokonaisuudessaan lazy loadata. Koska lazy load toteutetaan javascriptillä, täytyy projektissa huomioida myös varasuunnitelma siltä varalta, ettei käyttäjällä ole selaimessaan javascriptiä aktivoituna.

Lazy loadaus ei tietenkään ratkaise kaikkia sivuston hitausongelmia. Myös sisältöä on syytä optimoida käyttötarkoitustaan varten. WordPressissä kuvakokojen optimointi ja lazy loadin käyttö ovat kuitenkin hyviä tapoja pitää sivusto nopeana. Meillä on tästä reilusti kokemusta, olemmehan nimittäin Suomen nopein digitoimisto.

Animaatioilla hienompaa lopputulosta

Lazy loadauksen yhteyteen voidaan ottaa käyttöön myös animaatioita. Käyttöliittymäanimaatiot antavat hienomman lopputuloksen ja parantavat käyttökokemusta. Kuva voidaan esimerkiksi tuoda hellästi pikselöidyn kuvan päälle, kun oikean kuvan lataus on valmistunut.

Jos taas lazy loadataan kokonaista elementtiä, jossa on pelkän kuvan sijaan kuvaa ja tekstiä, niin se voidaan tuoda näkyviin animaation avulla. Kun käyttäjä skrollaa sivustoa alaspäin ja näkymä alkaa lähestyä lazy loadattavaa elementtiä, se ladataan ja tuodaan näkyville jonkin hienon animaation saattelemana.

Selaimen oma Lazy load

Myös selainkehittäjät ovat havainneet, että lazy load palvelee kävijöitä. Siksi ainakin Chromella on jo menossa kehitystä ja testausta selaimen kautta tapahtuvasta lazy loadauksesta. Tällöin selain itse lataisi ensin vain ruudulla näkyvän sisällön ja lataisi sisältöä sitä mukaa, kun käyttäjä skrollaisi eteenpäin.

Jos selaimen oma lazy load etenee standardiksi, niin varmasti muut selaimet hyppäävät aika nopeasti mukaan leikkiin. Sitten ollaankin jo hyvällä tiellä, kohti nopeammin selattavaa internetiä.

Selainten oma lazy load vähentää hieman työkuormaa meiltä kehittäjiltä, mutta ei silti kokonaan poista sitä. Etenkin vielä nyt ja varmasti jatkossakin lazy loadaukseen täytyy panostaa myös projektissa. Sivustot vaativat pientä hiemosta siellä ja täällä, että sivusto toimii juuri oikein ja kävijälle miellyttävällä tavalla.

Onko sivustollasi käytössä lazy load? Selvensikö vai sekoittiko tämä selostus ajatuksiasi? Mitä muita termejä voisimme selittää?