Case Study: Core Web Vitals for Site Performance
The website of one of our customers had a serious performance problem with a Largest Contentful Paint (LCP) exceeding 32 seconds on mobile devices. This made the site virtually inaccessible for many users, especially on mobile devices.
Google Search Console had reported the problem, highlighting an excessively high LCP on all pages. In June 2023, we decided to migrate the site to a new platform, using Storyblok for content management and Next.js with React for the framework, but the LCP problems persisted.
In this case study, we will focus on the strategy implemented to turn a slow-performing site into a fast and successful one.
Website Migration and LCP Optimisation
Despite the migration of the website from WordPress to a new modern platform, immediately after the transition, we noticed an increase in LCP problems, with many pages suffering. It seemed that we had made the situation worse, but the reality was quite different.
In fact, we discovered that the main culprit of the LCP was the contact form, which was loaded during the page load event. Our solution was to make the contact form only activate when users scroll down, preventing it from being detected as an LCP by search engines. This change reduced the number of pages with a high LCP.
However, some pages still showed a high LCP due to the image in the banner. To solve this problem, we further optimised the LCP image, resulting in considerable improvements in loading times.
Performance Monitoring with Web Vitals
We installed web-vitals.js on the website to monitor Core Web Vitals metrics of real users in real time. This allowed us to detect that the text in the cookie banner was now being detected as LCP. We solved this problem by reducing the amount of text in the cookie banner.
In addition, this advanced tool allows us to intercept future performance problems and intervene before they cause damage to ranking or user experience.
After these optimisations, Google Search Console showed that all URLs had very good Core Web Vitals metrics.
Although TBT remained high, mainly due to embedded YouTube videos, we realised that it did not affect ranking, being a lab metric.
What really matters is the CrUX data used by Google Search Console to generate the Core Web Vitals reports.
Core Web Vitals: the impact on business
The 44% increase in engagement and 28% decrease in bounce rate are direct results of the Core Web Vitals optimisations and site migration.
In addition, we recorded an impressive increase in lead conversions of 150%. Although other factors may have contributed to this result, the significantly improved user experience played a key role.
Conclusions
Through a series of targeted optimisations of Core Web Vitals, we were able to transform a website that took over 30 seconds to load into one that opens in less than 2 seconds. This had a significant impact on user engagement, bounce rate and conversions. Optimising Core Web Vitals is essential to improve the user experience and achieve real results for the business.
The site migration and optimisation of the Core Web Vitals led to remarkable success.
Resources:
Using 'fetchpriority' to optimise the loading of HTML images
Giovanni Coppola
