Tuininspiratie, dit is waar terras & trends voor staat. En dat lukt: wij hadden enkel al moeite om de allerleukste sfeerafbeelding te kiezen voor onze eigen portfolio! Ook in dat opzicht was het een genot aan deze catalogus site te mogen werken.
Onze kracht: snelheid en maatwerk
Terras en Trends koos voor Blue 2 Blond voor hun te vernieuwen catalogus website. Niet zozeer qua oplevertijd, maar juist omwille van snelheid van de uiteindelijke website, als ook benodigde maatwerk. Doordat er voor onder meer productaanbod een koppeling met hun CRM moest worden gemaakt, was de afweging tussen maatwerk in WooCommerce of LightBolt CMS niet moelijk meer.
Het werd namelijk LightBolt CMS, juist vanwege de aanvullende gegarandeerde website snelheid voor bezoekers. Hieronder alvast een voor en na-situatie zoals gemeten in PageSpeed Insights.
De verbeterde website pagespeed metrics
- First Contentful Paint
van 4.5 naar 0.9 seconden, factor 5 verbetering; - Speed Index
van 6.0 naar 1.2 seconden, ook een factor 5 verbetering; - Largest Contentful Paint
van 9.3 naar 2.9 seconden, een ruime factor 3 verbetering; - Time to Interactive
van 9.0 naar 3.1 seconden, een ruime factor 3 verbetering; - Total Blocking Time
van 1430ms naar 100ms, een factor 14 verbetering; - Cumulative Layout Shift
van 15,9 naar 0,7%, een ruime factor 22 verbetering.
De algehele pagespeed score, in dit geval van de homepagina, gaat hiermee van 23% naar 95%.
Vergelijking van echte UX
Belangrijker is natuurlijk de ervaring van echte bezoekers. Die zorgen immers voor conversie. Dat kan in de vorm van bestellingen, offerte-aanvragen, sollicitaties of contactmomenten zijn. De UX zoals ervaren door echte gebruikers sluit zich aan bij onze PageSpeed Insights verbeteringen.
Onderstaand betreft een vergelijking van mobiele pageviews binnen Google Chrome, voor (februari 2021) en na de migratie (april 2021):
First Contentful Paint staat voor het moment waarop men voor het eerst iets in het scherm ziet gebeuren. Des te langer dit duurt, des te meer geduld er nodig is. Sommige gebruikers hebben dus wellicht al vroegtijdig weggeklikt. Die data kon dan niet gemeten worden, waardoor de 4.5 seconden lange witte pagina als optimistische inschatting beschouwd moet worden.
Verder kunnen we concluderen:
- Ongeveer een derde van alle pageviews leverde een gezonde FCP op. Na migratie die in de 2e helft van maart plaats vond, was dit zelfs ruim boven de 95%;
- De groep mensen met een middelmatige of slechte ervaring (12.9 + 50.4 procent) is 24 keer zo klein geworden! Dat zijn dus heel veel meer potentiele offerte aanvragen;
- De FCP is van 4.5 naar 0.6 seconden gegaan op het 75e percentiel (dit is de percentiel die Google ook voor Core Web Vitals gebruikt);
- Terwijl na migratie 97.4% dus al een snellere ervaring heeft dan 1.8 seconden, heeft 75% van alle pageviews zelfs nog een snellere ervaring dan 0.6 seconden. Op mobiel!
Webshop versus catalogus
Alhoewel de website voorheen een webshop betrof, is er bewust gekozen voor een catalogus site. Eén van de redenen is dat Terras & Trends juist een inspiratiepunt is. Naast het opvragen van informatie per product kan er echter ook een gehele offerte voor een combinatie van producten worden opgevraagd.
Koppeling met CRM
Ruim 1700 producten moest er in de website getoond worden over verschillende collecties. Het snel inladen van producten als ook gespecificeerd zoeken was daarbij een logische vereiste.
Echter, om bij dit punt te komen hebben we eerst de XML die we vanuit de CRM verkrijgen en elke nacht wordt binnengehaald, zoveel mogelijk plat moeten slaan. Omdat afbeeldingen niet gestructureerd meekomen, kunnen nieuwe producten binnen het LightBolt CMS geraadpleegd worden om ze vervolgens te voorzien van aanvullende informatie, waaronder:
- afbeeldingen;
- product informatie (bijvoorbeeld of een product zwaar belastbaar is);
- collecties/categorieen waar ze onder vallen (die in de basis ook meekomen vanuit de XML).
Verdere automatische koppelingen zijn gemaakt tussen producten, inspiratiepagina's en betrokken vakspecialisten. Door deze kruisbestuiving konden we veel content automatisch laten genereren, waardoor elk productpagina altijd minimale content heeft. Vooral bij livegang scheelde het feit dat er niet 1700 producten voorzien hoefden te worden van content.
Filter en zoekfunctie
De filter en zoekfunctie die je binnen collectie en dus product overzichtspagina terug vindt, hebben we zelf ontwikkeld. De reden is simpel: performance. Er gingen enkele iteraties overheen om tot een feature-rijke oplossing te komen, maar het resultaat mag er zijn.
Naast ongelooflijk snelle facet-filters hebben we ook een backup ingebouwd wanneer er geen resultaten meer zijn: De facet-search zal dan desnoods overeenkomstige producten uit andere categorieen tonen, in een andere opmaak zodat het duidelijk is dat men zich in een andere status begeeft.
Aanvullend is deze filter-oplossing dusdanig geschreven, dat we hem hebben kunnen hergebruiken op de vakspecialisten pagina, waarbij zelfs markeringen binnen de Google Maps kaart direct bijgewerkt wordt terwijl je zoekt.
Heeft jouw site of shop ook last van een trage zoekfunctie?
Met deze case bewijzen we dat het toch echt anders kan voor jouw bezoekers en conversie.
Technische SEO
Zelfs daar hield ons werk niet op. Aangezien er al sprake was van vele pagina's, de oude blog kwam te vervallen en er juist weer "nieuws en tuintips" werd geïntroduceerd, ontkwamen we niet aan redirects. Het LightBolt CMS hebben we eenvoudig aan kunnen passen om url-behoud van 1700 producten intact te houden. Voor collecties hebben we bewust gekozen een nieuwe url-opzet te hanteren. Redenen:
- door collecties over een andere URL te laten verlopen, hoeft het CMS een minder zware query te draaien, waardoor server side werk en daarmee Time to First Byte beperkt kan blijven;
- maar door het beperkt aantal collecties ten opzichte van het totaal aantal producten, is de impact hier gering.
Verwijderde pagina's
Het nadeel van een platform als Wordpress kan zijn dat er zonder beleid heel veel niet relevante pagina's worden gegenereerd. Als gevolg hebben we maar liefst 1208 pagina's verwijderd:
- pagina's voor alle mogelijke zoekfilter-opties;
- tags voor blog-categorieen.
Redenen waarom je dit wilt voorkomen zijn als volgt:
- duplicate content. Alhoewel de meningen over de ernst ervan uiteen lopen, zorgen gelijkende pagina's enkel voor ruis binnen je website en geldt: voorkomen is beter dan genezen;
- crawl-budget: des te meer pagina's, des te meer een zoekmachine bot zal gaan crawlen en des te minder andere meer belangrijke pagina's er gecrawled worden;
- nieuwe producten of nieuwsberichten komen daardoor wellicht minder snel in de zoekmachine resultaten terecht;
- minder verwarde bezoekers wanneer ze op zo een veelal toch kale pagina terecht komen;
- en minder onnodig verkeer, of het nou fysieke bezoekers of zoekmachine bots zijn, voorkomt onnodig verbruik van dataverkeer, servercapaciteit en is daarmee duurzamer.
Automatische redirects
Vervolgens hebben we een automatische redirect ingesteld die bij een niet gevonden pagina automatisch naar de meest gelijkende pagina redirect, op basis van een puntenstelse. Indien de match niet voldoende is, krijgt men de welbekende "niet gevonden" pagina te zien, onder webbouwers beter bekend als 404, en ziet men automatisch 3 meest gelijkende matches voor de opgevraagde pagina.
Dit hebben we gedaan voor pagina's die niet al vanuit het CMS een eigen redirect toegekend hebben gekregen. Hierdoor zijn het veelal oude blog-artikelen als ook oude afbeeldingen die hiermee worden afgevangen.
Andere cases met vergelijkbare pagespeed verbeteringen:
- Regge Tegels migratie met 4085 verwijderde pagina's
- Beekhuis Yachtbrokers, sneller dan hun online concurrenten
- Woningontruiming Regionaal, van 2.3 naar 0.9 seconden
- Swink, werd van 3.8 naar 0.8 seconden nog toegankelijker
- Website:
- terrasentrends.nl
- Oplevering:
- maart 2021
- Opdrachtgever:
- Buiter Beton te Balkbrug
- Vormgeving:
- Halte2 te Dedemsvaart
- Teamleden: