Chrome team’s top tips for optimizing Core Web Vitals

Posted by Edith MacLeod on 23 Jan, 2023
View comments SEO
Here’s what the team considers the most effective ways to improve performance, which are applicable to most sites and most realistic to get done.

Core Web Vitals optimization.

Image: Chetan Kotadiya from Pixabay

Chrome’s web dev team has spent a year figuring out their top web optimization tips for the Google's Core Web Vitals. They wanted to identify a set of measures which would give the most bang for your buck, and which most developers were likely to adopt.

The team recognised that it’s unrealistic for most sites to implement the full set of recommendations which Google has given over the years. They considered not just the technical merits of recommendations, but whether these were measures sites would have the time or resources to implement.

Their aim was to chart a path through to a more realistic set of effective measures.

Here’s how they defined their focus:

  • Recommendations we believe will have the largest real-world impact
  • Recommendations that are relevant and applicable to most sites
  • Recommendations that are realistic for most developers to implement

They’ve now shared their findings. It’s a useful read for anyone unsure what to prioritize, or overwhelmed by the sheer volume of recommendations available. 

LCP (Largest Contentful Paint)

This is a measure of load performance and it’s the one Google says most sites struggle with, of the three Core Web Vitals metrics. It says only around 50% of websites meet the recommended threshold.

Here are the recommendations:

  • Make sure the LCP resource is findable from the HTML source
  • Make sure the LCP resource is prioritized
  • Use a content delivery network to deliver the best Time to First Byte (TTFB)

CLS (Cumulative Layout Shift)

This is a measure of on-page visual stability. Google says despite improvement, around 25% of sites fail to meet the recommended threshold.

Here are the recommendations:

  • Set explicit sizes on content loaded from the page
  • Make sure pages are eligible for bfcache (back/forward cache)
  • Avoid animations or transitions which can affect layout shift

FID (First Input Delay)

This is the measure of a page’s responsiveness to user interactions. Google says most websites currently score very well on this metric, but they still think there’s a lot of opportunity for improvement.

Here are the recommendations:

  • Avoid long tasks or break them up
  • Avoid unnecessary JavaScript
  • Avoid large rendering updates

The guide is available on Google’s web.dev blog, along with detailed instructions on how to implement each recommendation.

Recent articles

New AI video capabilities for Ads and YouTube
Posted by Edith MacLeod on 24 September 2024
Why web hosting matters - optimising UX and Core Web Vitals
Posted by Daniel Watkinson on 18 September 2024
Google introduces confidential matching
Posted by Edith MacLeod on 15 September 2024
August update: Google’s Danny Sullivan says recovery is not guaranteed
Posted by Edith MacLeod on 10 September 2024
Ecommerce strategies, trends and best practice for holiday shopping 2024
Posted by Edith MacLeod on 9 September 2024