Improving the Largest Contentful Paint (LCP) score by serving images in webp format hosted on a Content Delivery Network.

Jacquelyn Tandang
Jacquelyn Tandang
May 24, 2023

Checking Google Search Console, we observed a sudden decrease in good URLs from 100% to 0% on April 27. We did not deploy any changes around this period that may have caused this.

Google search console data

 

Turns out, Google rolled out a core update on March 28[1]. It can take weeks to feel the effect of an update as it needs time to re-index all websites on the Web thus feeling the impact only after mid April.

Checking for more details, our pages were failing on Core Web Vitals.

Core web vitals failing

 

Core Web Vitals are metrics used by Google to measure user experience on a web page. There are six metrics currently under it. Core Web Vitals are part of Google’s Search Algorithm and can positively or negatively impact rankings.[2]

Importance of each core web vital metric according to diib.com

Importance of each core web vital metric according to diib.com

 

In our previous post, blog#2, we discussed speed index which is the time it takes for a webpage to load. In this blog post, we will discuss Largest Contentful Paint as this is the metric we are currently failing at.

Pages failing LCP

Largest Contentful Paint (LCP)

In blog#2, we observed a slow LCP of 6.6s. The Largest Contentful Paint represents how quickly the main content of a web page is loaded. It measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport. [3]

LCP Before changes

A webpage with good LCP should load within 2.5 seconds but our page was loading for 6.6 seconds.

LCP standard

 

Scrolling down on your lighthouse results, you will be able to determine which element causes poor LCP. On our webpage, the largest content we are loading is the image. It is already resized for mobile devices with 500px width and in webp format - a format that provides superior lossless and lossy compression for images[4]. However, it is still performing poorly.

Determining which element causes LCP

 

In blog#2, we discussed how to format your images to webp.

Content Delivery Network

To resolve the issue, we moved the images to DigitalOcean Spaces, a product similar to the Amazon S3 buckets, but with a built-in content delivery network.[5] A content delivery network (CDN) is a geographically distributed group of servers that caches content close to end users. By serving content closer to your end users, it helps reduce load times, improving performance.

Understanding how content delivery network (CDN) works. Grabbed from https://blog.hubspot.com/website/what-is-a-cdn-definition

If your web hosting is located in Singapore, visitors near Singapore will load your pages and images relatively faster than those users who are viewing from Canada.

If your content is distributed in multiple locations, visitors from Canada can fetch your content from a location closer than Singapore, making your content load faster.

Maximum Parallel HTTP Connections in Browsers

There is a limit to the number of active parallel HTTP transactions a browser can maintain for every web server.

If the max parallel HTTP connections for a browser is set to 4, it means that the browser can only maintain up to 4 active HTTP transactions with a server at the same time.

By using a CDN, we can download more external dependencies at the same time because a CDN is yet another web server that can have up to 4 active parallel connections.

How to migrate your images to Digital Ocean Spaces

1. To migrate your images to Digital Ocean spaces, create a Digital Ocean account from this link. Clicking on this link will give $200 60-day credit for new users.

2. In the main menu, select Spaces and create a bucket.

Creating Digital Ocean Space bucket

3. Upload your images to your bucket.

Upload images to digital ocean spaces

4. Update your webpages to use the url from your Digital Ocean Space. You can copy the new image link by hovering over the file name.

Getting your new image url

5. Under settings, enable CDN. You may also specify which domains can access your images by setting file listing as 'Restricted' and listing access rights per domain.

Getting your new image url

Does moving images to a CDN affect image ranking?

No. Upon checking image SERPs, the images are on base64 (not by url) and is tagged to your page containing the image. This means, moving your images to cdn should not affect image ranking.

Image ranking in the SERPs

But it is highly recommended to use a subdomain as CNAME to your CDN. This way your domain is still associated to your images hosted in the CDN. Will update this blog with instructions on how to do this.

Results

After moving our content to DigitalOcean Spaces with CDN enabled, our mobile web pages are now loading LCP within 2.5 seconds and dramatically improved our performance score from 78 to 100.

LCP after changes LCP after changes on a different page

Please take note that advertisements were disabled during this test. Enabling advertisements can negatively affect performance scores.

Validating fix can take up to 28 days

It can take up to 28 days for Google to validate changes.

Sources:
[1] https://status.search.google.com/products/rGHU1u87FJnkP6W2GwMi/history
[2] https://diib.com/app/dashboard
[3] https://web.dev/optimize-lcp/
[4] https://developers.google.com/speed/webp
[5] https://www.digitalocean.com/products/spaces