Core Web Vitals – What You Need to Know Before Summer 2021
Since we ran our webinar Google has announced a gradual rollout for this update, and won’t begin until mid-June.
This gives us more time to help you prepare!
We ran a follow up to this webinar where Jon delved deeper into the other elements of Page Experience. Check out the recap here: Three things about your website that Google REALLY cares about – and why you should too
Core Web Vitals – Everything You Need To Know Before June 2021
- What’s this Google update all about, then?
- What are the Core Web Vitals?
- Why are they important?
- How does my site score?
- Are there any quick wins to improve my website?
- More Technical Considerations
- Any questions?
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
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.
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.
Why are they important?
Page speed is really important if you want to keep people on your site long enough to se what you’ve got to offer. Google’s studies have shown that pages that take over 10 seconds to load will likely have 123% more bounces than a site that loads in 1 second.
Cumulative Layout Shift presents many user experience issues that can also impact accessibility. Not resolving these issues could mean you’re losing 1 in 5 of your potential customer base. (Check out Jon’s additional tips for improving website accessibility, too!)
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.
Did you know?
For eCommerce businesses – Walmart found that for every second above three seconds load time represented a 2% decrease in conversion.
How important does it seem now?
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.
- 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.
Impacted by multiple scripts loading on your page that require the browser to go back and forth between code and external files.
- 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.
- 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.
Impacted by scripts that create or alter content in the browser (e.g. carousels)
- 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
Impacted by images with a large file size not having explicit heights and widths.
- 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.
Impacted by large videos or a lot of video content, including when pulled from third party platforms like Youtube.
- 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.
Impacted by loading multiple font styles or very large fonts.
- 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
- 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.
More Technical Considerations
Be aware that these options require a little more technical knowledge to implement. If you’re unsure, consult your web team (or give Jon a shout) to make sure you avoid making changes that could break your site.
- Combine and minify scripts
- Implement OPCache and other server side caching
- Consider hosting with more robust caching
- Consider converting a dynamic site into static
We hope this has given a good overview, but if there’s anything that’s still unclear or you have any questions at all, book a call with Jon to discuss!
Enjoyed this resource?
Don’t miss out on future tips! Subscribe to our newsletter and we’ll send you monthly actions you can take to optimise your website.
We respect your inbox and aim to add only value, not noise.