How DPG Media lowered average page load time to retain visitors on their website

DPG Media is a privately owned Belgian Media company in Belgium, the Netherlands and Denmark known for its (online) newspapers and magazines, radio and television channels, online services and other media-related services. With a turnover of 1.7 billion, over 90 brands and more than 15 million daily touches of viewers, readers, surfers and users it’s a true media giant in Europe. DPG is largely dependent on advertising via offline radio and TV commercials. Advertisers can also buy visitor data, (programmatic) display banner space, video and audio ads via their online channels.

×

Selling display banner space means that advertisers can bid to show their ads at a different website pages. Because of their millions of daily visitors across different platforms, DPG Media knows quite well which content is read by certain audiences. Therefore the ads have a high probability of being seen by their target audience and have a high value. With click prices of anywhere between € 2 to even € 25 it’s quite important for DPG Media that the actual ads are served and seen by the right audience. Since every millisecond of delay can cause visitors to drop off, it's important to have website performance high on their agenda. Therefore they started this project to create more awareness about website performance, to start improving it and to create a culture where this topic is high on the agenda.

The labels we worked for:
Volkskrant, Parool, Trouw, De Morgen, Humo and Libelle.

The project outline

The project started with informing and aligning stakeholders within DPG Media. We always start with a website audit: we check the performance of the website to determine if there is a problem. With the audit we can raise awareness among product owners, marketeers, developers and management to start the actual project. Our goal in the alignment phase was to get the green light for the placement of further measurement tools so we could start with our structured approach:

1. Install tooling to measure. The project started with placing trackers on the website to monitor actual user behavior. After two weeks we were able to see which website metrics were negatively influenced. In this case there were multiple metrics that clearly stood out in a negative way: First Meaningful Paint and Time To Interactive.

2. Determine focus metrics. We determined that we would focus on improving these two different metrics:

• First Meaningful Paint (FMP) measures when the primary content of a page is visible to the user. The sooner a visitor sees meaningful content, the higher the chance is that they actually read it. The FMP is (or actually was) one of six metrics tracked in the Performance section of the Lighthouse report to measure some aspect of page load speed. However, nowadays this metric is replaced by First Contentful Paint (FCP).

• Time To Interactive (TTI) is the time it takes for the page to become fully interactive. For DPG Media it’s important that the full web page loads as quickly as possible to show the content to the user, but also to show the display ads.

3. Determining boundaries and goals. After determining the two focus metrics we determined a so-called performance budget. This budget is not a monetary value but a limit to prevent regressions. It’s a boundary that we didn’t want to exceed anymore. Next to the performance budget we set a goal for the improvements: we wanted to be 20% quicker than the quickest competitor.

4. Prioritize and plan. Create specific to-do’s and plan them based on the estimated time to implement and impact on the focus metrics.

5. Run performance sprints. In the case of DPG we would plan performance to-do’s (story’s) for the existing development team.

6. Measuring the impact from improvements. If they have a positive impact we would lower the performance budget (step 3) for that metric and iterate more (step 4,5,6).

7. Demo’s & reporting. Next to the actual analysis and improvements it was also important to share knowledge among stakeholders. Therefore we organized biweekly demo’s and set up monthly performance reports.

Sander helped us to put Web Performance on the map. He was able to lower the FMP with 50% and improved the TTI with 52%

For DPG Media it’s important to decrease the average page load time and in this specific case this was measured by First Meaningful Paint (FMP) and a lower Time To Interactive (TTI).

Focus metric 1: First Meaningful Paint

First Meaningful Paint measures the time when the first meaningful content like a text or an image is shown to the user. This is specifically important for a media company, since it increases the chance they will read and click further.In this specific case we improved FMP by:

• Progressive image loading

• Caching

• Reducing the critical rendering path by minimizing critical:

1. resources

2. bytes

3. path length

Note: the variable First Meaningful Paint is now replaced by the Core Web Vital ‘First Contentful Paint’ (FCP) because it catched too many non-meaningful paints like headers and navigation bars.

×

Focus metric 2: Time to Interactive

The next focus metric was lowering the Time To Interactive which is one of the Lighthouse Performance metrics that tracks a specific part of loading speed. It measures the time when a certain page becomes fully interactive.This means:

• When a page shows useful content which is measured by FCP.

• The event handlers are registered for the most visible page elements.

• Tracking is enabled

• Ads are being displayed

• The page responds to a user within 50 ms.

For DPG it is important that users can navigate to other content: the longer the user stays on their website, the higher the chance they see and interact with their ads. Every millisecond counts, especially with millions over users every day.In this specific case we improved TTI by:

• Minimizing main thread work.

• Reducing JavaScript execution time.

• Analyze Third-party Impact

• Remove unused code

• Lazily loading code that is non-critical

• Removed old legacy code