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 toegankelijkheid, 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 toegankelijkheid 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:
- toegankelijkheid te verbeteren;
- dubbele HTML declaraties te verwijderen om HTML ruis te voorkomen;
- CSS declaraties en DOM-nodes in te perken;
- SVG / afbeeldingen om te zetten naar puur CSS;
- animaties op hardware accelerated wijze plaats te laten vinden.
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:
- Optimale TTFB: uitvoertijden van 0.001 tot 0.04 (afhankelijk van caching-instelling);
- Critical Render Path;
- Defer unused CSS;
- Resource hints;
- Automatisch comprimeren van afbeeldingen;
- Lazy loading van afbeeldingen;
- Geoptimaliseerde webp-afbeeldingen;
- Gebruik van WWW tegen cookie-verkeer/network latency;
- Server side caching;
Aanvullend is de hosting verantwoordelijk geweest voor:
- PHP7 ondersteuning (sneller dan PHP5);
- HTTP/2 ondersteuning;
- Webp ondersteuning;
- Ondersteuning voor comprimeren van JPG/PNG afbeeldingen.
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.
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).
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 bedrijfswebsite of webshop ligt, of weten hoe je met deze performance optimalisaties miljoenen meer omzet kunt halen uit je website?
