Sneller je woning ontruimen op deze groene site

En dat was direct reden nummer één dat wij benaderd werden. Want openbare gebruikersdata vertelde ons het volgende:

Core Web Vitals voor een indicatie van echte UX

Van alle mobiele Google Chrome bezoekers was de ervaring als volgt volgens Core Web Vitals data:

• Meer dan de helft van de bezoekers had geen goede eerste ervaring (53% moest langer dan 1.8 seconden wachten);
• 25% moest zelfs langer dan 2.2 seconden wachten;
• En ook de waargenomen laadervaring (LCP) was niet optimaal. Wederom meer dan de helft moest langer wachten dan 2.5 seconden;
• 25% moest zelfs langer dan 3.3 seconden wachten voordat de hero afbeelding of koptekst in beeld kwam.

En dat was te lang en te frustrerend. Met een te grote kans op uitstap door potentiele klanten. En dus wilde de opdrachtgever af van Wordpress als CMS, doordat het geloof in een snelle site inmiddels weg was.

Alles er aan gedaan om Wordpress sneller te krijgen

Wij hebben nooit de naam van de agency ontvangen die hier aan heeft gewerkt. Daardoor is het voor ons eenvoudig om discreet te blijven. Wel konden wij de volgende signalen en actiepunten achterhalen op basis van de voormalige broncode:

• WP Fastest Cache was gebruikt om CSS en JS te minimaliseren en bundelen;
• Resource hints waren in Wordpress gebruikt, bijvoorbeeld voor Google Fonts;
• Veel CSS werd geinlined. Dat is een veelgebruikte techniek in Wordpress, maar komt met anti-patterns indien het niet optimaal geïmplementeerd is;
• Er werd een CDN gebruikt voor public libraries. Ook dat komt zeker in het huidige HTTP/2 (eigenlijk zelfs HTTP/3) tijdperk juist eerder met kanttekeningen;
• Instant.page library werd gebruikt voor prefetching. Dat gebruiken wij zelf overigens ook en komt met enorme resultaten. In het geval van de voormalige Wordpress website bleek het getuige openbare data helaas weinig uit te halen;
• En WP Fastest Cache werd bovendien gebruikt om pagina's op de server te cachen. Soms wel voor maanden lang, concludeerden we op basis van tijdstempels. Daar hoeft niets mis mee te zijn bij meer statische websites. Echter, het kwam ook niet met merkbare pagespeed verbetering.

Behoud van lay-out

Het pijnpunt lag hem dus toch nog vooral in de snelheid van de website. De layout van de website mocht dus behouden blijven. Cases die we eerder hebben gedaan.

Desondanks hebben we een voorstel voor een nieuwe navigatie en header gedaan, waarbij bijvoorbeeld de social media icons naar de footer werd verbannen. Bij het bereiken van de website vanuit bijvoorbeeld een zoekmachine, zal namelijk niemand zo snel de behoefte hebben door te klikken naar social media kanalen. En ook wanneer je juist vanuit social media kanalen komt, zijn de icons logischerwijs niet meer van primair belang.

Wijziging in header-styling

Ook zijn we voor ruimte-besparing gegaan, zodat de header minder verticale ruimte in beslag hoeft te nemen op desktop apparaten. Hieronder het verschil:

De header voorheen:

De header na onze tussenkomst:

Third parties

Woning-ontruiming beschikt over reviews. Heel veel reviews, namelijk 1480+. En die waardering werd op de website getoond, via third party widgets van feedback company.

Meervoud inderdaad, want er werden drie widgets gebruikt:

• in de header met sterren-aanduiding;
• als sticky CTA met een cijfer als waarde-oordeel;
• en verder onderaan de pagina waren steeds de laatste twee reviews te vinden.

Met één third party onder de vouw valt nog een acceptabele score te behalen. Echter, met drie is die kans bekeken en dus hadden we hier zwaarder geschut nodig.

Gevolg: twee van de drie widgets hebben we exact nagebouwd. Namelijk de widget in de header en de sticky widget. Zelfs de uitklap hebben we exact nagebouwd. Maar dan met het lettertype van de website, zodat het ook nog beter in de website styling past.

Custom feedbackcompany widget styling

En de reviews onderaan: wij konden eenvoudig gebruik maken van een koppeling, waarmee we vrijheid zouden hebben in look & feel, en een betere pagespeed konden behalen. We hebben de opdrachtgever dan ook om goedkeuring gevraagd om met een beter alternatief te komen. Het verschil was als volgt:

Voorgaande feedbackcompany iframe widget:

De door ons gerealiseerde maatwerk feedback widget:

Dat vonden wij een veel netter presentatie, met bovendien de mogelijkheid om door meer reviews te scrollen via pijltjestoetsen of naar links en rechts te slepen (op touch devices zoals smartphones).

Pagespeed verbeteringen

Deze inspanning bleef niet onbeloond. Ook Lighthouse zag deze verbetering getuige onderstaande vergelijking.

Voorheen behaalde de Wordpress homepagina op mobiel een score van 26%. De metrics waren als volgt:

• First Contentful Paint: 3.4 seconden;
• Speed Index: 6.5 seconden;
• Largest Contentful Paint: 7.6 seconden;
• Time to Interactive: 14.1 seconden;
• Total Blocking Time: 2020 milliseconden;
• Cumulative Layout Shift: 0.02 (2%)

De nieuwe metrics behorende bij de behaalde mobile pagescore van 97% is als volgt:

• First Contentful Paint: 1.5 seconden;
• Speed Index: 1.5 seconden;
• Largest Contentful Paint: 2.3 seconden;
• Time to Interactive: 3.5 seconden;
• Total Blocking Time: 60 milliseconden;
• Cumulative Layout Shift: 0.001 (0.1%)

Op basis van cijfers van echte bezoekers kunnen we zien dat ook hun ervaringen flink zijn verbeterd. Zoals bijvoorbeeld de LCP metric op smartphones. Deze werd in field data zelfs beter dan in lab data en ging van 3.3 naar 1.1 seconden.

Verder is te zien:

• Dat 59.1% voorheen een goede ervaring had. Inmiddels is dat 97.8%;
• 24.2 en 16.7% respectievelijk een middelmatige en slechte ervaring had;
• En dankzij ons CMS en pagespeed kennis werd dit slechts respectievelijk 1.4 en 0.8%;
• Bij 1000 pageviews hadden gebruikers 167 keer kans om tegen een slechte ervaring aan te lopen. Na de migratie nog maar 8.

Bij u in de buurt

De voormalige website had een postcode of plaatsnaam zoekmodule om een regiomanager te vinden gebaseerd op deze gegevens. Hier hebben we een CSV lijst voor aangereikt gekregen. Daar zijn we mee aan de slag gegaan om deze geïmporteerd te krijgen.

Eenmaal bezig ging onze fantasie er mee vandoor, en hebben we er op eigen initiatief een meer uitgebreide zoekfunctie van gemaakt. Bijvoorbeeld, binnen de door ons gebouwde site worden ook direct suggesties gegeven. Een autocomplete dus. Zo hoeft iemand niet de exacte postcode of plaatsnaam in te vullen.

En wanneer je vervolgens door klikt, wordt de plaatsnaam alvast direct ingevuld in het offerte formulier. Weer een drempel minder voor bezoekers. Deze extra onaangekondigde functionaliteiten werd goed ontvangen.

Content migratie en meertaligheid

Een andere uitdaging betrof content. De website was namelijk niet enkel meertalig, maar er was ook sprake van veel content. Namelijk 121 pagina's na selectie, waaronder ook blogs en landingspagina's voor verschillende regio's.

Oog voor behoud van URLs was dan ook van belang om te voorkomen dat zoekmachines dubbele content in hun cache gaan hebben of de migratie door www/non-www of trailing slash en .html helemaal de mist in ging.

Andere cases met vergelijkbare pagespeed verbeteringen:

• Regge Tegels migratie met 4085 verwijderde pagina's
• Terras & Trends met 1208 verwijderde pagina's
• Beekhuis Yachtbrokers, sneller dan hun online concurrenten
• Swink, werd van 3.8 naar 0.8 seconden nog toegankelijk­er