Ladda snabbare genom att ladda senare

Publicerad: 18.6.2020 Uppdaterad: 16.6.2020

Lazy loading är en teknik som gör att webbsidor kan laddas snabbare. Den enkla idén är att inte hämta de bilder som ännu inte är synliga. I stället hämtas alla bilder strax innan de visas i takt med att besökaren skrollar nedåt på sidan. För användarupplevelsen ska detta inte innebära någon egentlig skillnad, men tiden för att hämta sidor kan förbättras kraftigt, i synnerhet på webbplatser med många bilder. 

Det har redan tidigare varit möjligt att optimera på detta sätt med hjälp av JavaScript, men det som aktualiserar detta ämne just nu är det faktum att webbläsaren Chrome kommer att ha inbyggt stöd för denna funktion från och med version 76. Du kan börja använda finessen genom att helt enkelt lägga till attributet loading="lazy" för bilder och iframe-element på din webbplats. På WordPress-webbplatser kan man enkelt åstadkomma samma sak genom att helt enkelt installera Googles tillägg Native Lazy Load. Tillägget lägger automatiskt till de attribut som behövs för Chrome och använder dessutom en reservlösning, baserad på Intersection Observer API för andra webbläsare.

Här är ett exempel på hur HTML-koden kan se ut innan man installerar tillägget:

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

… och efter:

<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">

Förutom att tillägget lägger till attributet för aktivering av lazy loading ersätts den faktiska bildkällan som anges i data-src med en tillfällig bild tills besökaren når tillräckligt nära den punkt på sidan där det faktiska innehållet kommer att behövas.

Utöver detta läggs några rader CSS-kod in i HTML-huvudet för att dölja bilder från början vid den första laddningen av sidan.

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

Dessa stycke JavaScript läggs till i slutet på sidan. Koden sköter kompatibilitet med andra webbläsare och med äldre versioner av Chrome:

<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>

För att lära känna tillägget mer i detalj kan du studera dess källkod på GitHub.

Förändringar på sidnivå

Innan vi började använda tillägget hämtades totalt 68 bilder vid laddning av startsidan för vår finska webbplats. 

Efter aktivering av tillägget hämtades bara 54 bilder vid laddning av samma startsida.

Resten av bilderna läses in i takt med att användaren skrollar nedåt på sidan.

Du kan även se jämförelsen mellan ”före” och ”efter” på webpagetest.org.

Slutsatser

Med hjälp av dessa nya verktyg verkar det vara helt bekymmersfritt att använda inbyggt stöd för lazy loading. Hittills har vi inte hittat någon anledning att avråda dig från att prova. Vi överväger även att låta tillägget Native Lazy Load ingå som standard i Seravos projektmall.

Samma funktion kan givetvis läggas in i direkt i koden för ett WordPress-tema utan att man behöver använda tillägget. Vad gäller stöd för funktionen hos olika webbläsare håller vi tummarna för att andra tillverkare snart kommer att följa Googles exempel och låta denna optimeringsmöjlighet finnas inbyggd i deras webbläsare.

Kommentera

Otto Kekäläinen

Verkställande direktör otto@seravo.se @ottokekalainen

Sök Seravo.se

Mer läsning

WordPress 5.5 ”Eckstine” är här

12.8.2020

Större WordPress-releaser har historiskt alltid namngetts efter olika jazzmusiker, och WordPress 5.5 är inget undantag där den fått ge releasen […]

Webinar: Använd Xdebug för PHP-profilering

7.8.2020

Under COVID-19-utbrottet våren 2020 slutade vi med alla våra utbildningar på plats och ersatte dem med gratis webinarier som visade […]

Underhåll i världsklass för ett evenemang i världsklass

25.6.2020

Utöver Slush är Nordic Business Forum en av de största framgångssagorna på den finska eventmarknaden. Något som började år 2010 […]