POV

/

30.07.20

ix POV: Google page experience update - Core Web Vitals

Cameron Lyall

Senior SEO Manager

Overview

In May 2020, Google announced through their blog, that they will be incorporating Core Web Vitals into their search ranking algorithms. This part of their algorithm will be judging the experience a site provides a user, using real-world data. This will combine with existing page experience factors such as mobile friendliness and use of HTTPS.

UPDATE: In November 2020, Google announced this update will happen in May 2021.

Google have announced they will add further page experience factors to their algorithm on a yearly basis. Google have however said that page experience will still be a secondary factor to great content.

The Core Web Vitals are three page experience measurements that Google have highlighted as important metrics:

  • Largest Contentful Paint (LCP)

  • First Input Delay (FID)

  • Cumulative Layout Shift (CLS).

This will be incorporated into the current algorithm analysing the page experience for a user:

The aim of announcing these updates now is to drive site owners to work on improving their sites with a user focus. Google have already been updating tools like lighthouse and page speed insights to support webmasters to be prepared for this update and start making improvements now.

 

What is ‘Core Web Vitals’?

Core Web Vitals is a subset of measurements within the Web Vitals initiative announced by the Google Chrome team on the 5 May. These are pulled using real-world data from opted in Chrome users so reflect what users actually experience.

This is Google’s definition of their Web Vitals:

“Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.” (Source, https://web.dev/vitals/)

However, within the Web Vitals measurement, they have pulled out three ‘core’ metrics that they say website owners should use as the main measurements of their site’s performance:

  • Largest Contentful Paint (LCP)

  • First Input Delay (FID)

  • Cumulative Layout Shift (CLS)

These measurements may evolve over time, but they have been designed to focus on three key aspects of a user’s experience on a site:

  • Loading time

  • Interactivity

  • Visual stability.

What do these metrics mean?

Loading: Largest Contentful Paint
Target: <2.5 Seconds

Overview: Largest Contentful Paint is the load speed measurement and tests the time it takes for the largest content element to render and be visible to users. This is different to the commonly used First Contentful Paint (FCP) metric, which measures when the first visual content appears for users. LCP is however more significant for true user experience and perception of speed.

Technical Detail: Here is an example of LCP and FCP:

In the above example, new content is added to the Document Object Model (DOM) and that changes what element is the largest. This will result in a longer LCP time.

Whereas in this second example, the largest content (the paragraph) loads earlier resulting in a lower LCP time, but the page does continue to load smaller elements. This shows one opportunity to optimise pages without a full redesign.

Major factors that will impact this metrics include:

  • Slow server response times

  • Render blocking JavaScript/CSS

  • Resource Load Times

  • Client-side Rendering.

Interactivity: First Input Delay
Target: <100 milliseconds

Overview: First Input Delay is the measurement of the time it takes before a browser responds to a user’s first interaction with a page. FID measures the responsiveness from the time when a user interacts with an element (i.e. when they click a button, select a input box or use another control) and the time when the page responds to the user’s interaction. Most often where there is a high latency it is because the browser is busy with something else such as loading other elements on the page or executing JavaScript files.

Technical detail: As an example, here is an image showing what could be happening when a user is trying to interact with a page that is still loading. You can see that there is a long time between the first content showing (FCP) and when the page is fully interactive (TTI).

There is a section of time between FCP and TTI when a user could try and interact with a site as they can see the element on their browser. The FID is measuring the time between an element being loaded on a browser and when it can respond to a user action.

While the browser is loading the task, it won’t be able to respond to the user’s action. FID is measuring this time between the action being present and the response time. While there may be later inputs (interactions) with a page the Core Web Vital that will be part of Google’s algorithm only considers the first interaction: reflecting the point when a user is most likely to be frustrated by a slow response.

Visual Stability: Cumulative Layout Shift
Target: <0.1 (Score)

Overview: Cumulative Layout Shift is the measurement of the amount of layout shift during the entire lifespan of the page. This unexpected layout shift normally occurs when some resources load asynchronously or DOM elements are dynamically added to the page. For a user this will look like the whole page has finished loading, but when they go to interact with the page the layout moves/shifts, making a frustrating experience for a user.

Technical detail: The score is based on the sum of two factors:

Layout Shift Score = Impact fraction * Distance fraction

The impact fraction is the measurement of how unstable elements impact the viewport between two frames.


In this example above with two screenshots, on the first left the content is at the top of the page, but when the next frame loads the content moved down 25% of the screen. The red dotted box indicates the amount of space the elements take up in the screenshot on the right, this is 75% of the total viewport, so the impact fraction is 0.75.

The distance fraction is the measurement of distance the unstable element has moved. This can be moved either horizontally or vertically. In the example above, the blue arrow indicates the % of movements, which is 25% in this example. The distance fraction is 0.25

Using this example, the layout shift score equation is: 0.75 * 0.25 = 0.1875

What are the existing page experience factors?

This announcement is a clear statement that Google is taking page experience more seriously and it is likely that as well as adding the Core Web Vitals elements, existing page experience factors will have even more weight than they do now.

Mobile Friendly – This includes a number of factors reported on by the Google Mobile friendly tool and reported in the Search Console Mobile Usability report.

Best practice: Set a viewport to ensure browsers know now to adjust to different screen sizes. Make sure all content fits on any screen. Text must be visible on a mobile device, which will be different text size to a desktop. Lastly, space out clickable elements.

 

Safe Browsing (security issues in Google Search Console) – While most websites don’t have these issues, and certainly not without knowing, safe browsing is something Google takes very seriously.

Best practice: Use search console to find the list of security issues on your site including malware infections, cross-site malware, hacking types and social engineering.

 

HTTPS – Security is a top priority for Google to ensure that all websites are providing the best and most secure experience.

Best Practice - Simply, all web pages and all resources should be available over HTTPS rather than the non-secure HTTP protocol.

 

Intrusive Interstitials – Interstitials include pop ups, pop unders, slide in banners, lightboxes and similar and can be used to improve functionality, deliver legal and compliance information and to advertise a site or a third-party's goods and services and try and influence how a user uses a site.

Generally, any interstitial that is difficult to dismiss or stops a user interacting with a page is intrusive unless it is for legal or compliance reasons, such as a cookies declaration.

Best practice ; With interstitials, where they are needed, is to have them slide in at the top or bottom of a window, allow users to interact with the page without having to dismiss it (where possible) and to be optimised for mobile so they don’t take up too much of the screen.

What tools can we use to check Core Web Vitals?

Google Search Console – This is now a core web vitals report as well as the mobile usability report. The core web vitals report show numbers of pages with poor URLs, URLs that need improvement and good URLs, broken down my mobile and desktop and then by LCP, CLS and FID. This will be the main source of data to understand how badly impacted a site may be by this update without improvements by the time the algorithm update rolls out next year.

Lighthouse - Lighthouse now includes data in LCP, FID and CLS for any page that is checked.

Google Page Speed Insights - As above, now includes field data for LCP, FID and CLS

Web Vitals Chrome Add On - This is yet another way to check LCP, FID and CLS and the quickest way to check individual pages as you browse in Chrome.

Timings and Looking ahead

The roll out won’t come until next year (2021) and we will get 6 months notice. There has been no word yet on whether it will be a staggered roll out my market or language or a worldwide roll-out.

This update will introduce the LCP, FID and CLS elements into the algorithm but may also see adjustments to the relative importance of existing page experience elements, though these will still be secondary to great content. As Google said in their announcement:

“A good page experience doesn’t override having great, relevant content. However, in cases where there are multiple pages that have similar content, page experience becomes much more important for visibility in Search.”

The future certainly seems to point towards page experience becoming more and more important, and it can no longer be an after-thought for brands, especially in the most competitive verticals. Google have said that more page experience factors will be added in future and said these updates will be on a yearly basis. Anything that brands can do now therefore to improve their site's usability they should be doing. We already know what a big impact page speed and other usability issues can have on bounce rate, with the chance of a user bouncing increasing 90% when a page load goes from 1 second to 5*, so regardless of whether Google is directly rewarding us yet there is an immediate benefit to improving page experience to increase engagement and conversions.

Continue reading
ix-chevron-bg

Contact

Are you ready to make a digital step-change?

We believe that moving too slowly in digital is the biggest risk your business faces. If you are ready to move faster in digital, we are here to help.

Get In touch