Mikä on lazy loading ja miten se vaikuttaa sivustonopeuteen?

Lazy loading eli laiska lataus on tekniikka, jolla sivuston resursseja, kuten kuvia ja videoita, ei ladata heti sivun avautuessa, vaan vasta siinä vaiheessa, kun käyttäjä vierittää ne näkyviin. Sen sijaan, että selain lataisi kaikki sivun kuvat kerralla, se lataa ensin vain näkyvässä osassa olevat resurssit ja lykkää muiden lataamista.

Kuvat ovat useimmiten sivuston suurin yksittäinen lataustaakka. Ilman lazy loadingia selain lataa kaikki sivun kuvat heti, myös ne, jotka ovat sivun alaosassa ja joita käyttäjä ei ehkä koskaan edes näe. Tämä hidastaa sivun alkuvaiheen latautumista merkittävästi ja vaikuttaa suoraan Core Web Vitals -mittareihin, erityisesti LCP:hen eli Largest Contentful Paintiin.

Lazy loading hyödyttää SEO:ta usealla tavalla:

• Parantaa LCP-tulosta, koska selain voi keskittyä lataamaan ensin näkyvässä osassa olevat resurssit
• Vähentää sivun alkuperäistä datan määrää, mikä on erityisen tärkeää mobiililaitteilla hitaammilla verkkoyhteyksillä
• Vähentää palvelimen kuormitusta, koska kaikkia resursseja ei pyydetä kerralla
• Säästää käyttäjän dataa, kun kuvia ei ladata turhaan sivun alaosasta, jos käyttäjä poistuu ennen kuin vierittää sinne

Modernein ja suositeltavin tapa on natiivi lazy loading, joka toimii suoraan HTML-attribuutilla ilman JavaScriptiä. Lisää loading="lazy" -attribuutti kuva- tai iframe-elementtiin:

<img src="kuva.jpg" alt="kuvan kuvaus" loading="lazy" width="800" height="600">

Natiivi lazy loading toimii kaikissa moderneissa selaimissa ja on yksinkertaisin tapa ottaa se käyttöön. Se ei vaadi ylimääräistä JavaScriptiä, mikä tekee siitä suorituskyvyn kannalta parhaan vaihtoehdon.

Iframelle se toimii samalla tavalla:

<iframe src="video.html" loading="lazy"></iframe>

Tämä on teknisen SEO:n tärkeimmistä säännöistä lazy loadingin kohdalla. Älä koskaan lisää lazy loadingia sivun suurimpaan näkyvään elementtiin eli LCP-elementtiin. Se on yleensä hero-kuva sivun yläosassa.

Jos LCP-elementillä on loading="lazy", selain lykkää sen lataamista, mikä pahentaa LCP-tulosta dramaattisesti. LCP-elementin pitää ladata mahdollisimman nopeasti, joten sille kannattaa jopa lisätä päinvastainen attribuutti:

<img src="hero-kuva.jpg" alt="hero-kuva" fetchpriority="high" width="1200" height="600">

fetchpriority="high" kertoo selaimelle, että tämä resurssi on ladattava ensisijaisesti. Käytä siis lazy loadingia kaikkiin kuviin paitsi ensimmäiseen näkyvään kuvaan.

WordPress lisää loading="lazy" -attribuutin automaattisesti kaikkiin kuviin versiosta 5.5 lähtien. Tämä tarkoittaa, että useimmilla WordPress-sivustoilla lazy loading on jo käytössä ilman erillisiä toimenpiteitä.

Ongelma on kuitenkin se, että WordPress saattaa lisätä lazy loading -attribuutin myös hero-kuvaan, joka on sivun LCP-elementti. Tarkista tämä PageSpeed Insightsista: jos raportti varoittaa “Render-blocking resources” tai “Lazy load LCP image”, sinulla on tämä ongelma.

Korjaus WordPressissä tapahtuu lisäämällä pieni koodi functions.php-tiedostoon tai käyttämällä lisäosaa, joka poistaa lazy loadingin ensimmäisestä kuvasta automaattisesti. WP Rocket tekee tämän automaattisesti tunnistamalla LCP-elementin ja asettamalla sille oikean prioriteetin.

YouTube-videoiden upotukset ovat yksi suurimmista sivustonopeuden ongelmista. Jokainen upotettu YouTube-video lataa useita kolmannen osapuolen skriptejä ja resursseja, vaikka käyttäjä ei koskaan katsoisikaan videota. Ratkaisu on facade pattern eli kevyt esikatselukuva, joka korvaa varsinaisen upotuksen sivun latautuessa.

Käytännössä tämä tarkoittaa, että sivulle näytetään ensin vain videon pikkukuva, ja varsinainen YouTube-upotus ladataan vasta, kun käyttäjä klikkaa play-nappia. WordPressissä tämän hoitaa esimerkiksi Lyte -lisäosa tai WP Rocketin built-in YouTube-optimointi.

• Chrome DevTools: Avaa Network-välilehti, lataa sivu uudelleen ja tarkista, mitkä kuvat latautuvat heti ja mitkä vasta vierittämisen jälkeen. Lazy loading -kuvien tulisi näkyä verkkoikkunassa vasta, kun vierität ne näkyviin
• PageSpeed Insights: Raportoi, jos sivulla on kuvia, jotka voitaisiin lazy ladata. Se myös varoittaa, jos LCP-elementillä on lazy loading vahingossa päällä
• Screaming Frog: Näyttää sivun kaikkien kuvien attribuutit, mukaan lukien loading-attribuutin arvon

Lazy loading lykkää sivun alaosassa olevien kuvien ja videoiden lataamista siihen asti, kun käyttäjä vierittää ne näkyviin. Se parantaa sivuston latausnopeutta ja Core Web Vitals -tuloksia erityisesti LCP:n osalta. Muista kuitenkin yksi kriittinen sääntö: älä koskaan lisää lazy loadingia sivun LCP-elementtiin eli ensimmäiseen suureen näkyvään kuvaan.