Core Web Vitals – Everything You Need To Know Before June 2021

Video Recap

What’s this Google update all about, then?

This summer Google is releasing the “Page Experience” update. It’s a big one.

Some existing search signals are being included, such as how mobile-friendly the site is, how safe it is, and how considerately it handles intrusive interstitials (basically, how annoying the pop-ups are!)

Oh, and these small things you might have heard of called Core Web Vitals.

Google currently holds 92.4% of search engine market share worldwide so, like it or not, businesses have no choice but to try and keep one step ahead or risk their visibility in search and organic search traffic suffering. 

We’ve seen it happen with past major updates, but this time we’ve got some forewarning.

The good news is that optimising your site for Page Experience should have a knock-on benefit of improving accessibility and conversion rates too. Hello, increased revenue and lead generation!

What are the Core Web Vitals?

They’re an attempt to create a unified standard for how websites are created and maintained and there are three of them you need to be aware of.

Largest contentful paint (Loading)

Measures when the largest content element in the viewport becomes visible. This is typically a hero image or a video.

Google wants this to be below 2.5s

Detailed overview from Google.

First Input Delay (Interactivity)

Measures the time from when a user first interacts with a page (i.e. when they click a link) to the time when the browser is actually able to begin processing responses to that interaction.

Google wants this to be below 100 milliseconds

This one’s not actually testable in tools like Page Speed Insights. It can only be tested with live data, so instead we use Total Blocking Time, a very similar metric.

Detailed overview from Google.

Cumulative Layout Shift (Visual Stability)

Measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

Google wants this to be below 0.1.

Detailed overview and examples from Google.

How does my site score?

There are three ways to check how your site scores for the Core Web Vitals.

• If you’ve already got Google Search Console set up, you may be able to view the Core Web Vitals reports directly. Note, though, that Google will only show you this report if your website generates enough traffic to provide the data. Many sites won’t – don’t panic!
• Google Page Speed Insights will give you the data for the three Core Web Vitals (remember Total Blocking Time is an equivalent metric that can be measured for First Input Delay). If you get enough traffic to your site to provide meaningful data, PageSpeed Insights will also tell you directly whether you pass or fail the Core Web Vitals test.
• GTMetrix is a great resource for website performance testing, and will also give you your breakdown scores for each Core Web Vital.

Be aware that all of these tools will, by default, run the tests from the US. You scores may be higher than they would be for visitors coming to your website from the same country in which your server is based.

Signing up for a free GTmetrix account will allow you to choose where the report runs from to give you a more accurate indication.

Are there any quick wins to improve my website?

Winning at Largest Contentful Paint

Slow Server Response Times

Impacted by how and where we host our websites, including whether you’re sharing resources with other sites.

Quick wins:

• Install caching – this holds a preloaded version of your site ready to display rather than rebuilding it every time a browser clicks onto it
• Set up a CDN Bunny CDN– a “content delivery network” will keep versions of your content on multiple servers around the world and load them from the closest server geographically to your website visitor when they land on your site. is a great, easy to use and affordable option that we use on a few of our client sites.

Ask your web team to install server-side caching applications.

Render blocking JavaScript and CSS

Impacted by multiple scripts loading on your page that require the browser to go back and forth between code and external files.

Quick wins:

• Combine scripts into fewer files – if you’re using WordPress there are caching plugins that enable this with a click of a few buttons, we’d particularly recommend WPRocket
• Move the scripts to the bottom of the page – as the browser loads each line of code sequentially, this will improve the speed but be aware that it might impact cumulative layout shift.

Ask your web team to remove unused scripts and minify the remaining scripts.

Slow resource load times

Impacted by large files loading on the page, such as large images.

Quick wins:

• Properly size your images by defining heights and widths – 1920×1080 pixels is HD and usually more than adequate for most situations
• Use appropriate file types – .PNGs aren’t compressed at all, so unless you need the clarity (if your image has text on it, for example) use .JPEG instead
• Again, use a CDN 
• Remove redundant images – consider whether that picture is actually adding any value, or whether it’s there just because it always has been. Regularly pruning your content is a great exercise to keep your site loading smoothly.

Ask your web team to implement source sets on images.

Client-side rendering

Impacted by scripts that create or alter content in the browser (e.g. carousels)

Quick wins:

• Defer loading scripts to the end – but, again, be wary of the impact on Cumulative Layout Shift
• Use these interactive elements sparingly – again, go over your content with a critical eye and consider whether you’re adding bells and whistles just for the sake of it. In most cases, stripping a site back to the core elements will result in a crisper, smoother user experience and web visitors won’t miss the fancy animations.

Ask your web team to set up effective script management.

Winning at First Input Delay

Impacted by everything client-side rendering. Take a look above for some ideas!

Winning at Cumulative Layout Shift

Images

Impacted by images with a large file size not having explicit heights and widths.

Quick wins:

• Add widths and heights to images so the browser knows how big to expect them while it’s rendering

Ask your web team to replace big images with <picture> tags and use aspect ratios.

Embedded Content

Impacted by large videos or a lot of video content, including when pulled from third party platforms like Youtube.

Quick wins:

• Make sure videos have placeholder thumbnails as these are quicker to load and will “reserve” the space needed in the layout while the video itself is rendering

Ask your web team to create fallbacks/placeholders for embedded content and load them when they’re needed. 

Fancy Fonts

Impacted by loading multiple font styles or very large fonts.

Quick wins:

• Remove unused font styles and weights 

Ask your web team to preload fonts or use appropriate fallback fonts that look similar

Dynamically Added Content

Impacted by adding in or modifying content as the page loads, rather than as users interact

Quick wins:

• Allocate that space and use placeholders 
• Don’t load content without user interactions – wait for them to scroll or click

Ask your web team to create critical path inline styles.