Julkaistu
Päivitetty

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://seravo.com/wp-content/uploads/2019/06/janine-joles-1143603-unsplash-230x230.jpg">

…ja lisäosan asentamisen jälkeen:

<img src="https://seravo.com/fi/wp-content/plugins/native-lazyload/assets/images/placeholder.svg" loading="lazy" data-src="https://seravo.com/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://seravo.com/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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Lue lisää

Kategoriassa: Suorityskyky

Nopeuta sivustoasi välimuistin fragmentoinnilla

Saat WordPress-sivustostasi entistä nopeamman tallentamalla sivuston osia transienteiksi. Vieläkin nopeammin toimivan sivuston saat objektivälimuistin avulla. Näin se tapahtuu!

17 kesäkuun, 2022

Black Friday – Varmista, että verkkokauppasi toimii

Kuinka varmistaa, että verkkokaupan toiminta ei lamaannu ostoryntäyksen keskellä?

25 marraskuun, 2021

WordPressin haku nopeaksi MariaDB:llä

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

24 maaliskuun, 2020

Tehosta WordPressiä komentoriviltä

Verkosta löytyy lukemattomia artikkeleita, jotka käsittelevät WordPressin suorituskyvyn tehostamista. Useimmat niistä kuitenkin neuvovat asentamaan lisäosia, vaikka ne usein pikemminkin pahentavat […]

28 helmikuun, 2020

PHP 7.3 – parempaa suorityskykyä ja tietoturvaa

Jos WordPressisi pyörii versiota 5.6 vanhemmalla PHP:llä, meillä on sinulle huonoja uutisia: WordPressin versiosta 5.2 eteenpäin minimivaatimus PHP:lle on versio […]

28 kesäkuun, 2019

Onko Cloudflaresta hyötyä?

Seravon asiantuntijat ovat olleet useasti esillä puhumassa WordPressin nopeusoptimoinnista, joten moni WordPress-sivuston kehittäjä kysyy meiltä vinkkejä sivustonsa nopeusoptimointiin. Meiltä kysytään […]

27 syyskuun, 2018