It’s rare for a search engine like Google to release details on how it’s highly guarded ranking algorithm works, but they’ve done just that.
At the beginning of May 2020, the Chrome dev team announced Core Web Vitals. It’s a set of metrics and tools to help business owners, marketers and developers to measure user experience signals and identify opportunities to improve the user experience (UX) of their websites.
There was more to come. A few weeks later, Google released an article on its webmaster google blog, “providing an early look at an upcoming search ranking change that incorporates these page experience metrics.” And it announced plans to “introduce a new signal that 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.”
It’s long been rumoured that Google already used some UX metrics, like bounce rate and CTR, as ranking signals, but until now there was nothing definitive. We now know just how important it is to give the best UX to our site visitors and how we need to do it.
Is this a case of Google giving website owners a helping hand following the world wide disruption caused by COVID-19? Or is it simply making sure it’s providing the best possible experience for its users?
Whatever the motive, Google is giving us a head start on optimising our sites ready for the update. Sites which don’t meet high experience standards will undoubtedly be hit with a penalty or ranking drop in the future. So take note – it’s coming sometime in 2021.
Want to know more? Read on or get in touchContact us
What is UX anyway?
In Google’s eyes, ‘user experience’ differs slightly from the term as it is understood by UX professionals. In this case it’s less about visual design and layout and more about what a page does to give users its experience (e.g. speed and security).
The page experience ranking algorithm consists of several pre-existing Google search ranking factors dating back to 2014 and includes refined metrics around speed and usability (i.e Core Web Vitals). More about that later.
- Mobile-friendly update (April 2015),
- Page Speed Update (July 2018),
- HTTPS ranking boost (August 2014),
- Intrusive interstitials penalty (January 2017),
- Safe browsing penalty (November 2016)
The new metrics and pre-existing factors, allow Google to better understand how a user will perceive the experience of a specific web page. It considers things so as how quickly a page loads, whether it’s mobile-friendly, if it runs on HTTPS, the presence of intrusive ads and if content jumps around as the page loads.
Miss any of these goals and a web page may be deemed to have a ‘bad’ page experience and will be ranked accordingly. Fortunately, there is help at hand, as Google has already gone to the trouble to detail calls Core Web Vitals.
Taking care of your ‘Core Web Vitals’
Core Web Vitals are real-world, user-centred metrics gathered from your webpages. They give scores on aspects of your pages including load time, interactivity and the stability of content as it loads.
The page scores fall under these metrics:
Largest Contentful Paint (LCP): measures loading performance.
An important user-centric metric used to measure the perceived load speed. LCP marks the point in the page load timeline, when the page’s main content is likely to have been loaded. A fast LCP helps reassure the user that the page is useful. To provide good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (FID): measures interactivity.
Measures how long it takes a page to become interactive and/or responsive. To provide good user experience, pages should have an FID of less than 100 milliseconds.
Cumulative Layout Shift (CLS): measures visual stability.
Focuses on how much your page moves around when it’s loading. Ideally, there shouldn’t be any movement and to provide good user experience, pages should maintain a CLS of less than 0.1.
Here’s an example of CLS:
How to optimise for user experience
The ‘user experience’ update is an overarching theme that sits at the top of many past updates such as the HTTPS ranking boost in 2014, as well as 2017’s mobile-friendly update and the Page Speed Update in 2018. They must be covered off as a prerequisite.
Not sure what they are or if your site is covered?We Can Help
How to optimise your Core Web Vitals
Once you’ve taken care of past updates, you should move on to Google’s new Core Web Vitals.
To help you, Google has recently updated its search console with the Core Web Vitals report. This allows webmasters and owners to see which pages within your site are missing their targets and will help you to validate any fixes.
The LCP metric reports the render time of the largest content element that is visible within the viewport window. Google feels that once the biggest part of the page has loaded, the page is at its most useful to the user.
Here are some of the most common causes of poor LCP times:
Slow server response times
The longer it takes a browser to receive content from the server, the longer it takes to render anything on the screen. A faster server response time directly improves every single page-load metric, including LCP. Before anything else, improve how and where your server handles your content. Use Time to First Byte (TTFB) to measure your server response times.
You can improve your TTFB in a number of different ways:
- Optimise your server
- Route users to a nearby CDN
- Cache assets
- Serve HTML pages cache-first
- Establish third-party connections early
This happens because web browsers will load scripts and CSS before the remaining HTML on the page. This means that users on a slower connection or mobile network will have to wait a few milliseconds more to see the page. It all adds up to bad user experience.
Slow resource load times
- <img> elements
- <image> elements inside an <svg> element
- <video> elements (if specified, the poster image is used to measure LCP)
- An element with a background image loaded via the url() function (as opposed to a CSS gradient)
- Block-level elements containing text nodes or other inline-level text elements
If rendered above-the-fold, the additional time it takes to load these elements will have a direct effect on LCP, adding precious milliseconds.
There are a few ways to ensure these files are loaded as fast as possible:
- Optimise and compress images
- Preload important resources
- Compress text files
- Deliver different assets based on the network connection (adaptive serving)
- Cache assets using a service worker
Consider the following optimisations when building a client-side rendered site:
- Use server-side rendering
- Use pre-rendering
To learn more about optimising for LCP, take a look at: https://web.dev/optimize-lcp/
Remember, the browser cannot respond to most user input while it’s executing JavaScrip, which means that it also can’t respond to user interactions while the main thread is busy.
To try and improve this you could:
- Break up Long Tasks
- Optimize your page for interaction readiness
- Use a web worker
Cumulative Layout Shift (CLS)
As we know, CLS measures the instability and movement of content by measuring and scoring how a page layout shifts while it’s rendering. It looks at how much visible content shifted in the viewport window as well as the distance the elements impacted were shifted:
The most common causes of poor CLS are:
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Web Fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM
The final countdown
The new ranking signal won’t be going live till sometime in 2021 and Google promises to give six months notice before it does so. This allows you time to check your Core Web Vitals reports to determine what needs addressing, page by page. Fail to do so and your Google rankings could suffer.
Keen to find out more? Drop us a line & ask us a question.Contact us
Further reading …
Here’s some Core Web Vitals tools which might help you:
- Lighthouse in DevTools is now at version 6.0
- PageSpeed Insights incorporates the new metrics
- New Chrome User Experience Report API lets you access up to 28 days of historical data for your URLs
- Experience section in DevTools Performance panel
- Search Console’s new Core Web Vitals report for a summary of how your site performs
- Web Vitals Chrome Extension for quick access to metrics from the browser