Hoe DPG Media de gemiddelde paginalaadtijd verlaagde om bezoekers te behouden

DPG Media is een privaat bedrijf met een omzet van 1,7 miljard en is voornamelijk actief in België, Nederland en Denemarken. Met meer dan 15 miljoen paginaweergaven per dag telt elke milliseconde vertraging — want die kost advertentie-inkomsten. Om de snelheid bij hun labels Volkskrant, Parool, Trouw, De Morgen, Humo en Libelle te verbeteren, richtten we ons op het verbeteren van de First Meaningful Paint (FMP) en de Time To Interactive (TTI).

Om de snelheid bij de labels Volkskrant, Parool, Trouw, De Morgen, Humo en Libelle te verbeteren, richtten we ons op het verbeteren van de First Meaningful Paint (FMP) en de Time To Interactive (TTI). Dit leidde tot:

20% sneller dan de snelste concurrenten.
Lagere serverkosten.
Een sterke performancecultuur binnen DPG Media.

DPG Media is een Belgisch mediabedrijf dat actief is in België, Nederland en Denemarken, en bekend staat om zijn (online) kranten en tijdschriften, radio- en televisiezenders, online diensten en andere mediagerelateerde activiteiten. Met een omzet van 1,7 miljard, meer dan 90 merken en meer dan 15 miljoen dagelijkse contacten met kijkers, lezers, surfers en gebruikers is het een ware mediagigant in Europa. DPG is in grote mate afhankelijk van advertenties via offline radio- en tv-commercials. Adverteerders kunnen ook bezoekersdata, (programmatische) displaybannerruimte, video- en audioadvertenties inkopen via hun online kanalen.

Het verkopen van displaybannerruimte betekent dat adverteerders kunnen bieden om hun advertenties te tonen op verschillende websitepagina's. Dankzij hun miljoenen dagelijkse bezoekers op uiteenlopende platforms weet DPG Media precies welke content door welke doelgroepen wordt gelezen. De advertenties hebben daardoor een grote kans om gezien te worden door de juiste doelgroep en zijn navenant waardevol. Met klikprijzen die variëren van € 2 tot zelfs € 25 is het voor DPG Media cruciaal dat de advertenties daadwerkelijk worden weergegeven en gezien door het juiste publiek. Omdat elke milliseconde vertraging bezoekers kan doen afhaken, staat websiteperformance hoog op de agenda. Dit project werd dan ook gestart om meer bewustzijn te creëren over websiteperformance, verbeteringen door te voeren en een cultuur te bouwen waarin dit onderwerp structureel aandacht krijgt.

De labels waarvoor we werkten: Volkskrant, Parool, Trouw, De Morgen, Humo en Libelle.

De projectopzet

Het project begon met het informeren en aligneren van stakeholders binnen DPG Media. We starten altijd met een websiteaudit: we beoordelen de performance van de website om vast te stellen of er een probleem is. Met de audit creëren we bewustzijn bij producteigenaren, marketeers, ontwikkelaars en management om het eigenlijke project op te starten. Ons doel in de aligneringsfase was groen licht te krijgen voor het plaatsen van verdere meetinstrumenten, zodat we konden beginnen met onze gestructureerde aanpak:

1. Tooling installeren om te meten. Het project begon met het plaatsen van trackers op de website om daadwerkelijk gebruikersgedrag te monitoren. Na twee weken konden we zien welke websitemetrics negatief werden beïnvloed. In dit geval sprongen meerdere metrics er duidelijk negatief uit: First Meaningful Paint en Time To Interactive.

2. Focusmetrics bepalen. We bepaalden dat we ons zouden richten op het verbeteren van twee metrics:

First Meaningful Paint (FMP) meet wanneer de primaire content van een pagina zichtbaar is voor de gebruiker. Hoe eerder een bezoeker zinvolle content ziet, hoe groter de kans dat hij of zij die ook daadwerkelijk leest. De FMP was (of is eigenlijk nu) een van de zes metrics in het Performance-gedeelte van het Lighthouse-rapport die een aspect van de paginalaadsnelheid meet. Tegenwoordig is deze metric vervangen door First Contentful Paint (FCP).
Time To Interactive (TTI) is de tijd die het kost voordat de pagina volledig interactief is. Voor DPG Media is het belangrijk dat de volledige webpagina zo snel mogelijk laadt om zowel de content als de displayadvertenties aan de gebruiker te tonen.

3. Grenzen en doelen stellen. Na het bepalen van de twee focusmetrics stelden we een zogenaamd performancebudget vast. Dit budget is geen geldbedrag, maar een grens om regressies te voorkomen. Het is een drempelwaarde die we niet meer wilden overschrijden. Naast het performancebudget stelden we een doel voor de verbeteringen: we wilden 20% sneller zijn dan de snelste concurrent.

4. Prioriteren en plannen. Concrete to-do's opstellen en inplannen op basis van de geschatte implementatietijd en impact op de focusmetrics.

5. Performancesprints uitvoeren. In het geval van DPG Media plannen we performance-to-do's (stories) in voor het bestaande ontwikkelteam.

6. Impact van verbeteringen meten. Als de impact positief is, verlagen we het performancebudget (stap 3) voor die metric en itereren we verder (stap 4, 5, 6).

7. Demo's & rapportage. Naast de daadwerkelijke analyse en verbeteringen was het ook belangrijk om kennis te delen met stakeholders. Daarom organiseerden we tweewekelijkse demo's en stelden we maandelijkse performancerapportages op.

Voor DPG Media is het belangrijk om de gemiddelde paginalaadtijd te verlagen — in dit geval gemeten via First Meaningful Paint (FMP) en een lagere Time To Interactive (TTI).

Focusmetric 1: First Meaningful Paint

First Meaningful Paint meet het moment waarop de eerste zinvolle content — zoals een tekst of afbeelding — aan de gebruiker wordt getoond. Dit is met name belangrijk voor een mediabedrijf, omdat het de kans vergroot dat bezoekers de content lezen en doorklikken. In dit specifieke geval verbeterden we de FMP door middel van:

Progressief laden van afbeeldingen
Caching
Verkleinen van het kritieke renderingpad door minimalisering van kritieke:

resources
bytes
padlengte

Opmerking: de variabele First Meaningful Paint is inmiddels vervangen door de Core Web Vital 'First Contentful Paint' (FCP), omdat deze te veel niet-zinvolle renders ving, zoals headers en navigatiebalken.

Focusmetric 2: Time to Interactive

De volgende focusmetric was het verlagen van de Time To Interactive, een van de Lighthouse Performance-metrics die een specifiek deel van de laadsnelheid bijhoudt. Het meet het moment waarop een bepaalde pagina volledig interactief is. Dit betekent dat:

De pagina nuttige content toont, gemeten door FCP.
De event handlers geregistreerd zijn voor de meest zichtbare paginaelementen.
Tracking is ingeschakeld.
Advertenties worden weergegeven.
De pagina binnen 50 ms reageert op een gebruiker.

Voor DPG is het belangrijk dat gebruikers kunnen navigeren naar andere content: hoe langer de gebruiker op hun website blijft, hoe groter de kans dat zij advertenties zien en ermee interacteren. Elke milliseconde telt — zeker met miljoenen gebruikers per dag. In dit specifieke geval verbeterden we de TTI door middel van:

Minimaliseren van het main thread-werk.
Verkorten van JavaScript-uitvoeringstijd.
Analyseren van de impact van third-party scripts.
Verwijderen van ongebruikte code.
Lazy loading van niet-kritieke code.
Verwijderen van verouderde legacy code.

Sander heeft ons geholpen om Web Performance op de kaart te zetten. Hij wist de FMP met 50% te verlagen en de TTI met 52% te verbeteren.