UPDATE: Google have announced that Core Web Vitals will be included in the ranking algorithm from May 2021. Now’s the time to start working on the user experience of your website.
Website performance has always been important. User experience advocates and SEO’s have been banging on about page load times and the impact on bounce rate, engagement and rankings for ages. Other user experience measures such as mobile friendliness, security (the use of https) and judicious use of ad space on a page are also known factors that Google have long considered when ranking pages.
It shouldn’t be surprising then that Google is continuously trying to improve the measures by which they judge pages for user experience. To this end they are now preparing to rollout an update (in May 2021) that will incorporate three new UX measures into the ranking algorithm, collectively know as Core Web Vitals.
What are Core Web Vitals?
If you’ve been paying attention you will have already noticed the Core Web Vitals report in Google Search console. It looks like this, reporting CWV performance for both Mobile and Desktop.
There are three specific measures incorporated into Core Web Vitals, covering loading performance, interactivity of the page and visual stability. The approach to reporting on these metrics is also important to understand…
Chrome User Experience Report (CrUX)
Many of the page speed tools that you will be familiar with, such as Pingdom and GTMetrix, use synthetic measurements in their reporting. That means they run their own tools over the page being tested and report their findings. Their tools seek to emulate real users, but this ‘lab based’ approach does have its limitations as user experience in the real world will always be way more diverse than any lab could emulate.
The Core Web Vitals reporting provided in Google Search Console and the PageSpeed Insights tool is different. It is based on Google’s Chrome User Experience Report (CrUX), which reflects the aggregate user experience of Chrome users around the world who have opted-in to share their browsing data anonymously. In other words, it is data based on real users. This approach to reporting is commonly referred to as RUM, Real User Monitoring.
Let’s look at each of the Core Web Vital metrics individually…
Loading: Largest Contentful Paint (LCP)
The Largest Contentful Paint (LCP) metric reports the render time of the largest content element (image, video or text block) visible within the users view port, i.e. the visible part of the users screen (‘above the fold’). Taking this example, we can see the page load for this article from CNN.com – the largest content element on the page is the hero image for the article which is also the last thing to load on the timeline. LCP measures the render time for this element.
LCP is reported in seconds. A “Good” score means 75% of all users recorded an LCP in <2.5seconds.
Interactivity: First Input Delay (FID)
The First Input Delay (FID) metric helps measure your user’s first impression of your site’s interactivity and responsiveness. FID measures the time from when a user first interacts with a page such as when they click a link or tap on a button to the time when the browser is actually able to begin processing event handlers in response to that interaction.
FID is reported in milliseconds. A “Good” score means that 75% or more of your users experienced a FID of <100ms.
Visual Stability: Cumulative Layout Shift (CLS)
A layout shift is that annoying experience when you try to interact with a page but suddenly the layout shifts as more resources load and you tap on the wrong link or lose your place. Sometimes this can be a very big UX problem.
A layout shift occurs any time a visible element changes its position from one rendered frame to the next. CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
When will this change happen?
Google originally announced that Core Web Vitals would become an official ranking signal sometime in 2020, but they delayed this due to the COVID-19 pandemic. It has now been officially announced that Core Web Vitals will be included as a ranking signal from May 2021.
Given the amount of notice and how much Google have invested in ensuring everyone knows about this change it is fair to assume that they expect the impact to be significant.
What impact will Core Web Vitals have?
When considering what practical impact Core Web Vitals will have on the ranking algorithm it is important to keep in mind that there are literally hundreds of signals that Google considers already:
- Crawlability and accessibility factors
- On page factors (HTML)
- Content factors (keywords and context)
- Link factors
- Page performance and UX factors
Core Web Vitals will be added to hundreds of existing signals. It is impossible to say exactly how much it will impact, but we expect it to be at least as important as page speed or mobile friendliness, which is to say “quite a lot”. It is certainly among the most important things we expect to be working on in SEO over the next 12 months.
Aside from rankings Core Web Vitals also impact real life user experience. Google’s studies show that pages that meet minimum CWV standards are 24% less likely to be abandoned.
Google
As a new signal, Core Web Vitals will impact all pages and all search results, but if you get a lot of traffic to AMP pages today it may have a more obvious impact.
AMP will no longer be a requirement to appear in “Top Stories”, instead pages will need to meet minimum CWV standards to appear in a “Top Stories”. It will be especially important for news publications that want to appear in the “Top Stories”.
So, let’s talk about how to optimize for Core Web Vitals…
How to Optimize for Core Web Vitals
The short version is to simply use the Core Web Vitals reporting in Google Search Console to inform improvements to your website. But if you want to be thorough we suggest a more considered approach…
1. use GSC to identify issues
Visit the Core Web Vitals report in GSC. See the specific issues impacting your site. Click on a specific issue to see example pages that demonstrate this issue. GSC will list multiple examples to represent different types of page that that have this issue, e.g. a category page, a product page and a blog page.
Click on a specific example to see other similar pages and a link to the PageSpeed Insights report for the individual page
2. Drill Into PageSpeed Insights for Specifics
PageSpeed Insights shows real user data for the page in question. In this case the page passes the FID assessment, but ‘Needs improvement’ on the LCP assessment and has a ‘Poor’ CLS score. Scrolling down the page provides details of what Google determines are the causes for poor performance.
Look at the ‘Opportunities’ and ‘Diagnostics’ for specific guidance on how to improve the performance of your page. Typically on a modern CMS powered website the same issues will show up across many pages so fixing an issue for a particular page will improve many of the same type of page (same templates etc).
3. Prioritise Those THINGS WITH THE BIGGEST IMPACT
PageSpeed Insights does provide guidance on the expected improvement from particular fixes, but this doesn’t take into account the number of pages that may be impacted by a particular issue.
You can also get a prioritised list of issues using Google’s Web Dev resource https://web.dev/measure
4. VALIDATE FIXES IN GOOGLE SEARCH CONSOLE
After implementing a change to the site you can test the impact of that change from GSC. For each issue reported, GSC offers a VALIDATE FIX button. Click this and Google will re-crawl all the pages impacted by this change and assess the CWV performance again. This can take up to 28 days (depending on the number of pages affected).
Common Mistakes that hurt your Core Web Vitals
In our experience there are a handful of very common issues that impact your Core Web Vitals performance…
Poorly Optimized IMages
This is usually the lowest hanging fruit and the very first thing you should do. Just taking the time to compress large images can improve performance a lot, but also making use of modern image formats that offer better compression is also a great idea.
Our quick image optimization tips:
- Compress your images. Use a tool like Imagify.io to compress images.
- Size your images appropriately. Don’t load a bigger image than is necessary.
- Create different versions of the images for desktop and mobile so you are only loading what you really need to.
- Use modern image formats such as WebP or JPEG2000.
- Lazy load images.
- Use a CDN to load images from a server closer to the visitor.
- Set the size of key images (including banner ads) in the HTML to reduce layout shift. If you set the image dimensions in the HTML then the page will load with space allowed for those images and so you reduce undesirable layout shift as the image loads.
Poorly Optimized CSS and JavaScript
Many sites are bloated with unused or just partially used JavaScript and CSS.
The Coverage report in Chrome Developer Tools (which is part of the Chrome browser) will show you exactly which files are actually necessary on a particular page, and will even show you what part of the code is used or unnecessary.
This Coverage report will also tell you which resources are needed to render the page immediately and which can be deferred with the async or defer attribute.
Too Many External Scripts
These days many sites run multiple third party scripts for analytics, remarketing, banner ads etc. These can have a major impact on page speed. We recommend only adding new scripts to your site if absolutely necessary.
Unless required for critical functionality, these scripts should always be loaded with async or defer attributes so they do not impact the speedy loading of the main page content. This graphic demonstrates the benefit for visitors of deferring or loading scripts asynchronously.
Little or No Caching
Any modern CMS will dynamically serve pages to combine layouts, styles and content based on pre-defined templates. This requires calls to the database and various resources to build the page.
Without any caching this can lead to very slow load times. Caching the complete page means that users (and Google) are served a static version of the page that has already been created and cached on the server. This reduces database calls and speeds up the page load.
Summary
We know that Google is very focused on ensuring a good user experience for everyone who uses their service. It is a bad look for them, and frustrating for users, if a page that ranks well doesn’t load quickly or offers a poor user experience.
This is why they are getting ever more sophisticated in the way they assess pages for user experience. The good news is that they are making this information very accessible for everyone in Google Search Console and the PageSpeed Insights tool.
Google wants you to take action on this information to ensure your website provides the best possible user experience for visitors, and they are going to start incorporating these signals into the ranking algorithm in 2021. Now is the time to start working on your own website.
