User-case: hoe bereik je optimale pagespeed

  • ± 4 minuten

De intentie van Wiechers Wonen is altijd: pionier zijn in de meubelbranche als ook online. En online ervaring gelijk trekken met de klantervaring in de winkel. Met een optimale website blijft men bereid om rond te klikken en over te gaan tot conversie.

Dat de drempel hoog wordt gelegd, bewijzen de recensies die jaar in jaar uit binnen blijven stromen. De online ervaring was niet meer in lijn met de ervaringen in de woonwinkels. Daar moest verandering in komen, waarvoor Fizz te Meppel in de arm is genomen. Voor de technische en daarmee pagespeed, performance en accessibility optimalisaties is opnieuw een beroep gedaan op Blue 2 Blond.

Mobiele gebruikers

Juist de meubelbranch kenmerkt zich door mobiele gebruikers. Hoe eenvoudig is het om via smartphone of tablet een oriënterende zoektocht te doen of optie te leggen op een bank voor in de nieuwe woning. Met een bezoekerspercentage van 65% mobiele gebruikers, is dat voor WiechersWonen.nl niet anders.

In tegenstelling tot de vorige versie, kan er niet meer om de mobile first gedachtegoed heen. Ook gezien Google's eerdere Mobilegeddon algoritme-aankondiging. Transitie naar een nieuwe website vond bovendien op een juist moment plaats.

Naast toegankelijk­heid, is helaas ook performance van websites nog vaak een ondergeschoven kindje. Zo een traject vergt kennis en kunde, waar een 80% score misschien ook volstaat voor een (desktop) gebruiker.

Een optimale score hoeft dus weinig uit te maken, totdat het een ranking factor wordt. Een verschuiving die nu plaats vindt in Google resultaten op basis van Lighthouse analyse, waarmee de concurrentie op dit vlak gewonnen kan worden. Veel webshop houders merken door een lagere waardering in PageSpeed Insights, een lagere organische ranking als ook toename in costs per click. Performance is, ook door invloeden van zoekmachines en algoritmen, naast een traject ook een project dat bovendien niet zomaar af is.

De oude pagespeed situatie

Alhoewel de eigenlijke snelheid van de vorige website bij gebrek aan JavaScript libraries mee kon met huidige snelheids-standaarden, was naast de afwezigheid van mobile-first gedachte, de performance en bijvoorbeeld toegankelijk­heid ondermaats. Ook wijze waarop afbeeldingen werden ingeladen, moest optimaler.

Nieuwe pagespeed situatie

Vooral door de impact van afbeeldingen, was de performance ondermaats. De oude website scoorde (nog in de voorganger van Lighthouse) als volgt:

  • 52% voor de homepagina;
  • 63% voor de vervolgpagina.

Handmatige performance verbetering

Door het ontwerp bureau, zijn de ontwerpen omgezet naar statische HTML. Voordat dit werd ingebakken in het LightBolt Content Management Systeem, is er aanvullende performance kennis en kunde aan te pas gekomen. Dit is bijvoorbeeld gedaan door:

Daarbovenop is JavaScript optimaler ingezet:

  • bootstrap's modal is overbodig gemaakt door popups te bewerkstelligen middels de reeds aanwezige fancybox;
  • bootstrap tooltips (gezien de beperkte inzet) vervangen door puur CSS;
  • datepicker JavaScript wordt pas na een actie van de gebruiker uitgevoerd, om de Time to Interactive optimaal te houden.

Automatische web performance optimalisatie

Aanvullend neemt het LightBolt CMS, waarmee de website gerealiseerd is, andere pagespeed en performance optimalisaties uit handen, waaronder:

Aanvullend is de hosting verantwoordelijk geweest voor:

Uitgebreidere toelichting omtrent gedane optimalisaties treft u in de portfolio-pagina.

Google Lighthouse resultaten

Grafieken spreken meer tot de verbeelding. Google's Lighthouse brengt verschillende aspecten goed in kaart en geven ontwikkelaars of website eigenaren bovendien een handvol tips waarmee men aan de slag kan om de score en daarmee organische ranking te verbeteren.

Eerste en tweede versie

Bovenstaande handmatige en automatische optimalisaties leverde de volgende verbetering op ten opzichte van de eerste versie, met dien verstanden dat er achter de eerste versie geen CMS hing. Vergelijking is gedaan met een gelijkende merken-overzichtspagina.

performance vergelijking met eerste en tweede versie

Branche vergelijking

Om een aanvullende vergelijking te maken, is de website naast branchgenoten (meubelzaken) gelegd, in dit geval uit het hoge noorden (stad Groningen).

Juist de wijze waarop een website met afbeeldingen om gaat, zal aanvullende impact hebben op de performance score. Echter, voor een gelijkwaardige benchmark, is steeds gebruik gemaakt van de privacy verklaring, zodat van elk een basis template met elkaar vergeleken wordt. Dit betekent dat onderstaande scores, steeds de meest optimale score is en scores voor home- of productpagina's nooit hoger zullen zijn.

In de vergelijking zijn eventuele tracking mechanismen intact gelaten. Immers hebben deze invloed op de performance en dragen dus bij (of eigenlijk juist niet) aan de score. Dat meer organisaties en hun websites baat kunnen hebben aan een performance en pagespeed optimalisatie traject, bewijst onderstaande vergelijking (websites zijn bewust niet bij naam en toenaam vermeld).

wiechers wonen performance vergelijking met de branch

Naast de Lighthouse score-resultaten, zijn ook steeds het aantal benodigde bronnen als ook totale dataverkeer opgenomen in de screenshot. Ook de laadtijden zijn meegenomen. Op een rij:

  • WiechersWonen.nl laadt met een totale laadtijd van 750ms ruim acht keer sneller dan de uitschieter (6,17 seconden) in deze vergelijking;
  • WiechersWonen.nl heeft met 13 benodigde bronnen, ruim 16 keer minder bronnen nodig dan de uitschieter (214);
  • WiechersWonen.nl kost met 244kb, 5 keer minder dataverkeer dan de uitschieter (1,2MB);

Uberhaupt is het opmerkelijk dat voor een afbeeldingsloze tekstpagina, 1.2MB gedownload moet worden. Minder dataverkeer profiteert zowel bezoeker als ook hosting-kosten van.

Nog geen 100% performance score

Ondanks de inspanning, is er voor WiechersWonen geen 100% behaald. Dit heeft een tweetal redenen:

  • tracking mechanismen, in dit geval Google Analytics, drukken op de performance en dus uiteindelijke Lighthouse score;
  • Bezoekers krijgen een optimale afhandeling van CSS voorgeschoteld, die in de Lighthouse test ongeveer een procentpunt aftrek oplevert. Zie de demo's op defer unused CSS.

Ook weten waar ruimte voor pagespeed en performance verbetering van de bedrijfs­website of webshop ligt, of weten hoe je met deze performance optimalisaties miljoenen meer omzet kunt halen uit je website?

Contact opnemen Miljoenen meer omzet