This article was first published in May 2020, and was updated in April 2021.
Google's studies and industry research has shown that users prefer websites with a great page experience. Google is always looking at what factors to consider in ranking results, such as page load speed and mobile-friendliness. The upcoming page experience update takes into account a number of factors that put the user front and centre. These ‘core web vitals’ will help Google serve searchers with the best content.
Page Experience and Core Web Vitals
Core Web Vitals are a set of metrics to help website owners measure user experience dimensions such as load time, interactivity, and the stability of content as it loads. Google has now provided details of an upcoming search ranking change that will incorporate these page experience metrics.
A new signal is being introduced that Google says 'combines Core Web Vitals with our existing signals for page experience to provide a holistic picture of the quality of a user's experience on a web page'.
These changes are being rolled out in June 2021.
In addition, further page experience signals will be incorporated on a yearly basis as user expectations evolve and the ability for Google to measure more aspects increases.
Page Experience Ranking
So what's the idea behind this? Essentially, having a good experience enables people to achieve what they want to, and a bad experience could stop someone finding the information they are seeking. Google wants to remain the go-to place for people searching for information and therefore it needs to provide the best search experience.
By adding page experience into the mix with all the other signals, the aim is to make it easier for people using websites to find what they're looking for.
Top Level Page Metrics
The three main components of page experience are:
- How fast does the page load?
- How fast does the page react to users?
- How stable is the page (do elements jump around as it loads)?
Now we can run through some of the top level metrics to decode what they mean. (The first 3 are what is referred to as the ‘core web vitals’.)
Core Web Vitals
-
Largest contentful paint (LCP) - this metric seeks out the largest image or block of text. It measures how long it takes to load that item into the viewport. This could be a hero image or a large section of text. (Ideally this should be less than or equal to 2.5 seconds.)
-
Cumulative layout shift (CLS) - this metric measures visual stability. In other words, it measures how much the content shifts as the page loads making it hard to read or view the content. (You want this to be less than or equal to 0.1.)
-
First input delay (FID) - this refers to how quickly the page responds to a user (after the click of a button, for example). Less than or equal to 100ms is ideal for this one.
The following metrics are also worth bearing in mind as useful measurements of a page’s effectiveness:
-
First contentful paint (FCP) - this metric measures how long it takes for the text above-the-fold to load. This is the content you see without needing to scroll. Too many fonts and large font files will affect this score. As will slow loading fonts from external resources.
-
Speed index (SI) - this metric records when visual changes above-the-fold stop. That means videos and hero images all affect the speed index score.
-
Time to interactive (TTI) - this metric measures how long it takes for the page to be ready for user input. Late-loading apps and tracking or analytics scripts will affect this metric.
-
Total blocking time (TBT) - this metric is like TTI, but it measures the total amount of blocking time on page. This refers to the user not being able to click elements or to scroll the page.
It’s important to remember that these core web vitals are by no means the only way that your site will be judged. There are many, many factors taken into account by Google when evaluating your pages. While the emphasis here is certainly user experience, Google has said that having great content will still be the more important consideration: it will seek to rank pages with the best overall information, even if the page experience isn’t the best of the best.
Google has not said how much each factor is weighted, but they have confirmed 'a good page experience doesn't override having great, relevant content.' However, if all other factors are equal, page experience could be the deciding factor for your visibility.
Search Console Update
Google has added a new section to Search Console called 'Core Web Vitals' which reports on how your site performs against these new 'Page Experience' metrics. This report will tell you where you need to improve and how to implement those improvements.
Google has updated its tools such as Lighthouse and PageSpeed Insights to enable website owners to better measure their own performance and improve page experience for their visitors. Our piece on website speed audits gives a good overview of the different tools you can use, plus their benefits and limitations in terms of assessing your site.
How To Prepare For Core Web Vitals (not all applicable for Shopify stores)
1 Largest contentful paint (LCP)
Potential Issue: Slow server response times
Solutions
a) Cache assets - if your HTML is static, caching it can prevent it being recreated when it doesn’t need to be, reducing resource usage.
b) Route users to a CDN - a content delivery network uses servers in many locations around the world, which removes the problem of users experiencing a slower site due to being far away from a single server.
Potential Issue: Slow resource load times
Solutions
a) Optimise and compress your images using tinypng - it reduces the size of the files without sacrificing quality, so they load more quickly but still look good.
b) Use an image CDN - this will decrease image payload, deliver images tailored to each device requesting it, and send images from the edge of the network.
Potential Issue: Client-side rendering
Solutions
a) Minify your JavaScript and defer unused JavaScript
b) Utilise server-side rendering if this is possible
Potential Issue: JavaScript and CSS
Solutions
a) Minify your CSS - CSS files often contain characters to make it easier to read but which aren’t needed for the browser. Minifying them removes them and clears it up so it will improve the time needed to render the page.
b) Download and serve the minimal amount of necessary JavaScript to users. Reducing the amount of blocking JavaScript means a faster render and therefore a better LCP.
2 Cumulative layout shift (CLS)
Potential Issue: Unexpected layout shifts
Solutions
a) Include size attributes on assets like video and images, so the browser allocated the appropriate amount of space for the object before it loads.
b) Ensure dynamically injected content is only inserted below existing content so it doesn’t trigger unexpected layout shifts.
3 First input delay (FID)
Potential Issue: Browser not responding quickly to user (probably as it is still executing JavaScript)
Solutions
a) Break up long-running code into smaller tasks. Long tasks leave the page unresponsive while it deals with the tasks. Splitting these up into more manageable chunks can help reduce input delay.
b) Reduce JavaScript execution time further by deferring unused JS. If the browser doesn’t need the code to render the page, defer it - this will mean the page is ready for user interaction more quickly.
If you need support making sure your SEO, content or website is adhering to the latest guidelines, get in touch and our Shopify design, development and SEO experts will be happy to talk through how we can help.