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.
