How Autoweek passed the Core Web Vitals and improved their page experience

From dreaming of sports cars to finding inspiration for normal cars, to buying new and used cars, Autoweek is the leading multimedia car platform in the Netherlands. Originally published in print, Autoweek is now mostly read online. The website AutoWeek.nl attracts more than 3 million unique visitors each month, which makes it a car giant. As the platform's popularity grew, Autoweek invested in better response options that allow visitors to interact in comments. In June 2022, they received 7.000 comments.

Articles on Autoweek are free to read, and videos - about one per day - are also free to watch. Therefore, advertising is their main source of income. It's therefore important to provide visitors with a good and fluid page experience so that they stay on your website and see multiple ads: pages should load quickly and look professional.

The project outline

Before implementing any improvements, Autoweek wanted to know their current performance. To map Autoweek's current performance, we conducted a performance audit. Topics covered in the performance audit included:

• Core Web Vital performance

• Other performance metrics (like Lighthouse)

• Performance compared to the competition

• Business KPIs related to website performance 

Through the performance audit, Autoweek.nl gained a deeper understanding of its current performance status. Based on it, we were able to improve. After identifying all issues, we presented the audit and proposed a roadmap based on expected impact vs. effort. As part of the roadmap, actionable recommendations were included, such as examples of code snippets and user stories.

During the final phase of the project, we monitored the impact of the implementations to ensure they were done correctly. We would inform and support the development team if issues still existed so that it could be implemented correctly.

Outcome performance audit 

The outcome of the performance audit was:

• The loading speed (LCP) on mobile phones was just enough (around 74%). We wanted to speed it up.

• The website has quite some issues with the visual stability (CLS). 

• As a result, the website didn’t pass the Core Web Vitals and isn’t performing well compared to competitors (7 out of 12 were faster). 

• There were other performance issues with the TTFB, FCP, Speed Index, TTI, and TBT which resulted in a low performance score for most page types.

Very inspiring and educational to see how Iron/Out works, we are very happy that our important Core Web Vitals have skyrocketed through the collaboration

Mitchel Netjes - Autoweek

The results of the project 

For Autoweek it is important to attract people on their website so they want to maximise Google Search performance, attract more users and lower the bounce rate. Next to that, it’s also important to keep people on the website by increasing the time on page, get more pageviews per session, get more click throughs, which hopefully leads to higher advertising revenue and other conversions. 

We proposed to work in 6 performance sprints where we worked ourselves through the issues:

Sprint 1 & 2: Largest Contentful Paint (LCP) improvements
We started working on improving the LCP since these will have a significant impact on page load time. This is also the biggest challenge since it will affect the majority of the templates.

Focus:

• Pre-connect to image CDN. 

• Add lazy loading for images under the fold.

• Improve First Paint & First Contentful Paint

• Optimise critical rendering path.

• Fix royal slider issues.

An old implementation of the Royal Slider carousel caused an issue on several page types. After the initialisation of the carousel, the first item animated and that counted as the LCP. The problem was resolved by loading the image directly without animation or preloading.

×

LCP improvement from 74% > 85%

Sprint 3: improve Cumulative Layout Shifts (CLS)
The goal for this sprint is to fix all CLS issues. There have already been some issues resolved when fixing issues with LCP but we still have a lot of work to do. After this sprint we can start seeing an impact on CWV.

Focus: 
Add image dimensions to all <img> tags.
Reserve a fixed value for the banner. We used a value 
Self host Google fonts.

CLS improvement from 56% > 85%

Sprint 4 & 5: backend work
The previous sprint was almost entirely focused on the front-end. This sprint involves the backend. To ensure data distribution happens quickly, this sprint aims to resolve all caching issues.

Focus: 
Add a CDN for the main domain.
Advanced caching setup.

The CDN configuration is still being worked on by Autoweek. 

Sprint 6 onwards:
All major problems to pass the Core Web Vitals are now resolved. Now it’s time to pick up all the other stories and start acting on the dashboard information in SpeedCurve.

The total project led to the following results:
25.8% URLs with a good page experience on mobile improved to 93% URLs 
23% URLs with a good page experience on a desktop improved to 96% URLs

×

The pages that are still failing the CWV assessment are running on an outdated system that will be replaced shortly. The CWV score is expected to increase even further when this is completed.

×