Lataa kuvat laiskasti

Kirjoitettu: 3.10.2019

Lazy loading on tekniikka, jonka avulla on mahdollista nopeuttaa verkkosivun latautumista. Tekniikan ideana on kaikessa yksinkertaisuudessaan, että kuvia jotka eivät ole näkyvissä ei tarvitse myöskään ladata. Sen sijaan kuvat ladataan vasta juuri ennen kuin ne tulevat sivua vieritettäessä näkyviin, jolloin käyttäjän ei periaatteessa pitäisi huomata minkäänlaista eroa kokemuksessa. Latausajat kuitenkin nopeutuvat olennaisesti sivustoilla, joilla käytetään paljon kuvia.

Tekniikka on ollut mahdollista toteuttaa JavaScriptin avulla jo aiemminkin, mutta aihe on nyt erityisen ajankohtainen, sillä Chromesta löytyy versiosta 76 alkaen sisäänrakennettuna tuki laiskalle lataukselle. Saat sen käyttöön helposti lisäämällä image- ja iframe-elementeille attribuutin loading="lazy".

WordPressissä laiskan latauksen käyttöönotto on helpointa asentamalla Googlen Native Lazy Load -lisäosa, joka lisää automaattisesti kaikkiin kuviin ja iframeihin Chromen käyttämät attribuutit. Muita selaimia varten lisäosa käyttää Intersection Observer API:in perustuvaa JavaScriptiä.

Esimerkki kuvaelementin HTML-koodista ennen lisäosan asentamista:

<img src="https://wp-palvelu.fi/wp-content/uploads/2019/06/janine-joles-1143603-unsplash-230x230.jpg">

…ja lisäosan asentamisen jälkeen:

<img src="https://wp-palvelu.fi/wp-content/plugins/native-lazyload/assets/images/placeholder.svg" loading="lazy" data-src="https://wp-palvelu.fi/wp-content/uploads/2019/06/janine-joles-1143603-unsplash-230x230.jpg">

Elementtiin siis lisätään uusi attribuutti laiskalle lataamiselle, jonka lisäksi alkuperäinen kuva korvataan sijaiskuvalla, jota selain käyttää kunnes on aika ladata data-src -attribuutissa mainittu varsinainen kuva.

Lisäksi sivun <head>-osioon tulee CSS-koodi, joka piilottaa kuvat latauksen alkuvaiheessa:

<style type="text/css">
.no-js .native-lazyload-js-fallback {
	display: none;
}
</style>

… ja sivun loppuun tulee JavaScript-pätkä joka hoitaa yhteensopivuuden vanhempien Chrome-versioiden ja muiden selaimien kanssa:

<script type="text/javascript">
( function() {
 var nativeLazyloadInitialize = function() {
  var lazyElements, script;
  if ( 'loading' in HTMLImageElement.prototype ) {
   lazyElements = [].slice.call( document.querySelectorAll( '.native-lazyload-js-fallback' ) );
   lazyElements.forEach( function( element ) {
    if ( ! element.dataset.src ) {
     return;
    }
    element.src = element.dataset.src;
    delete element.dataset.src;
    if ( element.dataset.srcset ) {
     element.srcset = element.dataset.srcset;
     delete element.dataset.srcset;
    }
    if ( element.dataset.sizes ) {
     element.sizes = element.dataset.sizes;
     delete element.dataset.sizes;
    }
    element.classList.remove( 'native-lazyload-js-fallback' );
   } );
  } else if ( ! document.querySelector( 'script#native-lazyload-fallback' ) ) {
   script = document.createElement( 'script' );
   script.id = 'native-lazyload-fallback';
   script.type = 'text/javascript';
   script.src = 'https://wp-palvelu.fi/wp-content/plugins/native-lazyload/assets/js/lazyload.js';
   script.defer = true;
   document.body.appendChild( script );
  }
 };
 if ( document.readyState === 'complete' || document.readyState === 'interactive' ) {
  nativeLazyloadInitialize();
 } else {
  window.addEventListener( 'DOMContentLoaded', nativeLazyloadInitialize );
 }
}() );
</script>

Lisäosan toimintaan voit tutustua tarkemmin tutustumalla sen lähdekoodiin GitHubissa.

Muutos sivuston toiminnassa

Ennen lisäosan käyttöönottoa WP-palvelun etusivu latasi 68 kuvaa:

Lisäosan käyttöönoton jälkeen etusivu lataa heti kättelyssä ainoastaan 54 kuvaa:

Loput kuvat ladataan vasta kun käyttäjä selaa sivua eteenpäin:

Eron näkee myös Webpagetest.org:n ennen ja jälkeen -vertailussa.

Johtopäätös

Native lazy load -tekniikka vaikuttaa toimivan näillä uusilla työkaluilla varsin saumattomasti. Emme ainakaan toistaiseksi ole havainneet siinä haittapuolia, joten uskallamme suositella kokeilemaan sen käyttöä. Harkitsemme itse myös Googlen lisäosan ottamista Seravon projektipohjan vakiokokoonpanoon. Kätevän lisäosan lisäksi tekniikan voi toki toteuttaa myös itse WordPressin teemaan koodaamalla. Mitä taas tulee selaintukeen, sopii toivoa, että muut selainvalmistajat eivät tässä kohtaa laiskottele, vaan seuraavat vikkelästi perässä.

Kommentoi

Otto Kekäläinen

Hae WP-palvelu.fi:stä

Lue myös

WordPressin haku nopeaksi MariaDB:llä

24.3.2020

WordPressin sisäänrakennettua hakutoimintoa ei voi aina kehua nopeaksi. Se hidastelee helposti varsinkin suurilla sivustoilla, kun tietokannassa on paljon sisältöä. Tätä […]

WooCommerce 4.0 on ulkona

13.3.2020

On olemassa monia hyviä syitä miksi kannattaa valita WooCommerce verkkokaupan alustaksi. Ei ole sattumaa, että se on maailman suosituin verkkokauppa-alusta, […]

TLS 1.1 ja 1.0 historiaan maaliskuussa

10.3.2020

Seravon WP-palvelussa on vuoden 2020 alusta ollut ensisijaisena HTTPS-liikenteen salausprotokollana käytössä TLS 1.3, jonka lisäksi käytössä on TLS 1.2. Sen […]