Hoe Autoweek de Core Web Vitals haalde en de pagina-ervaring verbeterde

Autoweek is een van de vele mediabrandmerken van DPG Media. De website over auto's en mobiliteit trekt maandelijks zo'n 3 miljoen unieke bezoekers. Omdat Autoweek sterk afhankelijk is van advertentie-inkomsten, moet de website snel en gebruiksvriendelijk zijn.

Als gevolg van de Core Update van Google in '21 is websiteperformance urgenter geworden. Autoweek vroeg Iron/Out om de huidige staat van Autoweek.nl in kaart te brengen en te bekijken waar verbeteringen mogelijk waren. Om deze vraag te beantwoorden, hebben we de volgende stappen gezet:

1. Performanceaudit van Autoweek.nl.
2. Presentatie van de bevindingen, gezamenlijk stellen van performancedoelen en opstellen van een roadmap.
3. Ondersteuning bij de implementatie van verbeteringen.
4. Testen of de verbeteringen correct zijn doorgevoerd.

Het project leidde tot de volgende resultaten:

• LCP verbeterd van 74% naar 85%
• CLS verbeterd van 56% naar 85%
• 25,8% URL's met een goede pagina-ervaring op mobiel verbeterd naar 93% URL's
• 23% URL's met een goede pagina-ervaring op desktop verbeterd naar 96% URL's

Van dromen over sportauto's tot inspiratie voor alledaagse auto's, en van nieuwe tot gebruikte auto's: Autoweek is hét toonaangevende multimediale autoplatform van Nederland. Oorspronkelijk als printmagazine verschenen, is Autoweek nu voornamelijk online te lezen. De website AutoWeek.nl trekt meer dan 3 miljoen unieke bezoekers per maand, wat het tot een echte autogrootmacht maakt. Naarmate de populariteit van het platform groeide, investeerde Autoweek in verbeterde interactiemogelijkheden voor bezoekers, zoals reacties. In juni 2022 ontvingen ze maar liefst 7.000 reacties.

Artikelen op Autoweek zijn gratis te lezen, en video's — gemiddeld één per dag — zijn ook gratis te bekijken. Advertenties zijn dan ook de voornaamste inkomstenbron. Het is daarom essentieel om bezoekers een goede en soepele pagina-ervaring te bieden, zodat ze op de website blijven en meerdere advertenties zien: pagina's moeten snel laden en er professioneel uitzien.

De projectopzet

Voordat er verbeteringen werden doorgevoerd, wilde Autoweek eerst inzicht krijgen in de huidige performance. Om dit in kaart te brengen, voerden we een performanceaudit uit. De onderwerpen die in de audit aan bod kwamen, waren:

• Core Web Vitals-prestaties
• Overige performancemetrics (zoals Lighthouse)
• Performance vergeleken met de concurrentie
• Business-KPI's gerelateerd aan websiteperformance

De audit gaf Autoweek.nl een dieper inzicht in de huidige performancestatus. Op basis daarvan konden we gericht verbeteren. Na het identificeren van alle problemen presenteerden we de audit en stelden een roadmap voor, gebaseerd op verwachte impact versus inspanning. Als onderdeel van de roadmap werden uitvoerbare aanbevelingen opgenomen, inclusief voorbeelden van codefragmenten en user stories.

Tijdens de afsluitende fase van het project monitorden we de impact van de implementaties om te garanderen dat alles correct was doorgevoerd. Waar nodig informeerden en ondersteunden we het ontwikkelteam zodat eventuele resterende problemen alsnog correct konden worden opgelost.

Uitkomst van de performanceaudit

De uitkomst van de performanceaudit was als volgt:

• De laadsnelheid (LCP) op mobiele telefoons was net voldoende (circa 74%). We wilden dit versnellen.
• De website had flink wat problemen met visuele stabiliteit (CLS).
• Als gevolg hiervan haalde de website de Core Web Vitals niet en presteerde hij slechter dan de concurrentie (7 van de 12 concurrenten waren sneller).
• Er waren andere performanceproblemen met TTFB, FCP, Speed Index, TTI en TBT, wat resulteerde in een lage performancescore voor de meeste paginatypes.

De resultaten van het project

Voor Autoweek is het belangrijk om bezoekers naar de website te trekken. Zij willen dan ook de Google Search-prestaties maximaliseren, meer gebruikers aantrekken en het bouncepercentage verlagen. Daarnaast is het essentieel om bezoekers langer op de website te houden: meer tijd op de pagina, meer paginaweergaven per sessie en meer doorklikken — wat hopelijk leidt tot hogere advertentie-inkomsten en meer conversies.

We stelden voor om in 6 performancesprints door de problemen heen te werken:

Sprint 1 & 2: Largest Contentful Paint (LCP)-verbeteringen We begonnen met het verbeteren van de LCP, omdat dit de grootste impact heeft op de laadtijd van pagina's. Dit is ook de grootste uitdaging, omdat het de meerderheid van de templates betreft.

Focus:

• Pre-connect naar image CDN.
• Lazy loading toevoegen voor afbeeldingen onder de fold.
• First Paint & First Contentful Paint verbeteren.
• Kritiek renderingpad optimaliseren.
• Royal Slider-problemen oplossen.

Een verouderde implementatie van de Royal Slider-carousel veroorzaakte problemen op meerdere paginatypes. Na de initialisatie van de carousel animeerde het eerste item, en dat werd als LCP geteld. Het probleem werd opgelost door de afbeelding direct te laden zonder animatie of door middel van preloading.

LCP verbeterd van 74% naar 85%

Sprint 3: Cumulative Layout Shifts (CLS) verbeteren Het doel van deze sprint was om alle CLS-problemen op te lossen. Een aantal problemen was al opgelost bij het aanpakken van de LCP, maar er was nog veel werk te doen. Na deze sprint konden we een impact verwachten op de CWV-beoordeling.

Focus:

• Afbeeldingsdimensies toevoegen aan alle <img>-tags.
• Een vaste hoogte reserveren voor de banner.
• Google Fonts zelf hosten.

CLS verbeterd van 56% naar 85%

Sprint 4 & 5: backend-werk De vorige sprint was vrijwel volledig gericht op de front-end. Deze sprint richtte zich op de backend. Om te zorgen dat gegevensdistributie snel verloopt, werden in deze sprint alle cachingproblemen opgelost.

Focus:

• Een CDN toevoegen voor het hoofddomein.
• Geavanceerde cachingconfiguratie.

De CDN-configuratie wordt op dit moment nog door Autoweek uitgewerkt.

Sprint 6 en verder: Alle grote problemen om de Core Web Vitals te halen zijn nu opgelost. Nu is het tijd om de overige user stories op te pakken en te handelen op basis van de dashboardinformatie in SpeedCurve.

Het totale project leidde tot de volgende resultaten:

• 25,8% URL's met een goede pagina-ervaring op mobiel verbeterd naar 93% URL's
• 23% URL's met een goede pagina-ervaring op desktop verbeterd naar 96% URL's

De pagina's die de CWV-beoordeling nog niet halen, draaien op een verouderd systeem dat binnenkort wordt vervangen. De CWV-score zal naar verwachting verder stijgen zodra dit is afgerond.

Erg inspirerend en leerzaam om te zien hoe Iron/Out werkt. We zijn erg blij dat onze belangrijke Core Web Vitals door de samenwerking enorm zijn gestegen.

— Mitchel Netjes, Autoweek