Case Study: Improving Core Web Vitals Score from 60 to 96 and Boosting Website Performance

The goal of this project was to improve the website’s Core Web Vitals score from 60 to 96, directly addressing slow load times, high bounce rates, and low click-through rates (CTR). After optimizing the content for search engines, we faced challenges with user engagement, which indicated that technical performance issues were holding back the site’s potential. This case study details the steps I took to optimize the website’s code, improve its Core Web Vitals score, and significantly enhance its overall performance.

Initial Problem

The website I was working on had several significant issues:

1. Low Core Web Vitals Score (60): The site struggled with low performance metrics for Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), which impacted both user experience and search engine rankings.
2. High Bounce Rate and Low CTR: Despite implementing keyword-optimized content, the website’s CTR was around 1.3%, and users were leaving the site quickly, resulting in a high bounce rate. A/B testing on meta titles and descriptions did not yield significant improvements.
3. Slow Load Time: The website’s load time was noticeably slow, as confirmed by Microsoft Clarity. The total webpage file size was around 6.8 MB, largely due to unoptimized images and unused code.
4. Poor User Experience: User feedback and analytics showed that visitors were frustrated with slow load times and inconsistent page loading, which led to poor engagement metrics.

Identifying the Root Causes

Through a comprehensive Core Web Vitals diagnosis and audit of the site’s performance, I identified several key issues that were contributing to the poor scores:

• Unused CSS and JavaScript: Many CSS files were being loaded, even though they were not necessary for the webpage. Similarly, JavaScript files were loaded before the content, increasing the load time.
• Large Image Sizes: Images were not optimized for different screen sizes or formats, contributing to the large file size and slower load times.
• No Caching Strategy: The website was not using caching, which meant returning users had to reload files unnecessarily.
• Code Structure Issues: The website’s code had excessive comments and unneeded lines, bloating the size of the files and increasing load times.

Step-by-Step Implementation

To resolve these issues and improve the Core Web Vitals score, I implemented the following steps:

1. CSS and JavaScript Optimization

One of the major culprits was the inefficient loading of CSS and JavaScript files. I began by:

• Bundling CSS Files: I grouped all the CSS files into a single bundle, ensuring that only the necessary CSS was loaded for each webpage. This reduced the amount of unused CSS and optimized the page load speed.
• Moving JavaScript: Instead of loading JavaScript files at the top of the page, I placed them before the closing </body> tag. This ensured that the content loaded first, allowing the page to become interactive more quickly.
• Minifying Code: I removed unnecessary comments and minified both the CSS and JavaScript code using a Visual Studio extension. This significantly reduced the overall file size.

2. Image Optimization

Next, I focused on optimizing images, which were contributing heavily to the large file size:

• Optimized Image Sizes: I created different image dimensions for desktop and mobile devices to ensure that users were served the appropriate image sizes based on their device.
• Image Format Conversion: All images were converted to AVIF, a format that provides high-quality images at significantly reduced file sizes compared to JPEG or PNG.
• Lazy Loading: I implemented lazy loading for images, ensuring that images would only load when they were in the user’s viewport. This reduced the initial load time and improved the Largest Contentful Paint (LCP) score.

3. Caching Implementation

To improve load times for returning users, I added caching rules to the .htaccess file:

• Caching for Images, CSS, and JavaScript: By enabling caching, browsers were able to store files locally, which meant that returning users didn’t need to download them again. This reduced server requests and sped up load times for repeat visitors.

4. File Size Reduction and Code Cleanup

The website’s total file size was around 6.8 MB, far exceeding what was acceptable for a fast-loading website. I addressed this by:

• Removing Unnecessary Code: I eliminated redundant lines of code and excessive comments that were bloating the file size.
• Minifying All Files: By minifying both the HTML and CSS code, I was able to drastically reduce the size of the webpage from 6.8 MB to 400 KB.

Second Audit and Additional Improvements

After implementing the initial changes, the website’s Core Web Vitals score improved from 60 to 80, but I wanted to push further to achieve near-perfect performance. During a second audit, I identified additional areas for improvement:

• Specifying Image Dimensions: I added explicit height and width attributes to all images. This helped browsers allocate space for the images before they fully loaded, reducing layout shifts and improving the Cumulative Layout Shift (CLS) score.
• Lazy Loading and Eager Loading: I added lazy loading for all non-essential images and eager loading for the hero image to improve the First Contentful Paint (FCP) score.
• Deferring JavaScript: I added the defer attribute to non-essential JavaScript, including Google Tag Manager (GTM). I moved the GTM code into a separate file and deferred its execution until after the main content had loaded, ensuring that it didn’t slow down the rendering process.
• Improving Cache Strategy: I refined the caching settings to ensure even better load times for returning users, further reducing server load.

Results

After the second round of optimizations, the website’s Core Web Vitals score reached 96, and the overall performance improved significantly across several key metrics:

1. Core Web Vitals Score: The score improved from 60 to 96, reflecting better performance in terms of LCP, FID, and CLS.
2. Page Load Time: The total file size was reduced from 6.8 MB to just 400 KB, resulting in much faster load times.
3. Click-Through Rate (CTR): The CTR jumped from 1.3% to between 9-10%. This was a dramatic improvement, reflecting the website’s enhanced performance and better user engagement.
4. Bounce Rate: The bounce rate decreased as users were now able to access content faster and navigate the site more easily. The improved user experience led to more time spent on the website.
5. Keyword Ranking Improvements: The website’s improved performance also led to better keyword rankings, with more pages showing higher on search engine results pages (SERPs). This increased organic traffic and visibility.

This case study highlights the critical role of technical SEO and web performance optimization in improving a website’s user experience and search engine rankings. By addressing issues such as unused CSS and JavaScript, large image sizes, and inefficient caching, I was able to drastically improve the Core Web Vitals score and, in turn, the overall performance of the website.

These changes had a direct impact on the website’s business performance, increasing the CTR, lowering the bounce rate, and boosting keyword rankings. This demonstrates the importance of optimizing both the content and the technical aspects of a website for better results.

If your website is suffering from performance issues, investing in technical SEO and Core Web Vitals optimization can lead to significant improvements in both user engagement and search engine visibility.