Have you come across the phrase “Core Web Vitals” or “Page Experience Update” in relation to Google search? These terms sound very technical so you can be forgiven for not paying them much attention. But they ARE important because they are now a significant factor in how Google assesses how user-friendly your website is.

In this blog, we’re going to explain them in layman’s terms and give you a brief heads-up on how you can monitor your own website’s performance using these new measures.

In our earlier post, 3 Ways To Create A Good User Experience On Your Website we first reported that Google was preparing a significant algorithm update called the Page Experience Update.. For the first time Google is measuring your website visitors’ User Experience and is ranking each webpage according to its Core Web Vital metrics.

The Page Experience Update was fully rolled out over a 3-month period for mobile users back in June 2021 and, after a few tweaks, the desktop version rolled out within 9 days in February 2022. So it’s been in our lives for a few months now and at CBL we’ve been digging into every aspect and really getting to know how it works.

In this blog, we are going to take a quick look at all six of the Page Experience search signals and show you how to measure them. In later blogs we will go into each in more detail and suggest ways in which you can improve your overall Page Experience score.

What’s covered in this blog:

What are the Core Web Vitals and other Page Experience Ranking Factors?

Infographic of core web vitals and 3 other search signals

Core Web Vitals have been around in one form or another for some time. Web Vitals were designed by Google as guidance for website owners to help deliver quality User Experience on their websites.  In May 2021, Google announced that three new Core Web Vitals would now combine with three other already existing search signals to form the Page Experience update.

1. Mobile Friendly

According to Statista, last year (2021) between 52% and 56% of all website traffic was using mobile devices. Being “mobile-friendly” means having a website that is “responsive” – which means that it can not only adjust the display to suit the screen size it is viewed on (i.e. desktop, tablet or mobile phone), but also that the user experience doesn’t degrade as a result.

Google mobile friendly test page

You can easily test your web page using Google’s Mobile-Friendly Test tool which will provide you with a quick yes/no result and identify any mobile-friendly errors on a specific webpage.

If you have Search Console configured for your website you can identify any mobile usability errors across the entire site.

Google Search Console  screenshot showing Mobile Usability report

2. HTTPS

Another simple Yes/No answer is to check your website’s HTTPS status. Put simply, HTTPS (as opposed to HTTP) ensures you are connected to the correct website (and not an imposter’s), that the website is private and any data (email addresses, bank details etc) passing between you and the website’s server is encrypted and safe from being intercepted by malicious third parties.

You can quickly check any website’s URL in the browser address bar to see if it has a padlock symbol next to it. Clicking the padlock will reveal more details about the security of the website.

Padlock symbol on browser address bar

Secure

Browser address bar for an insecure http website

Not secure

Most browsers will alert you if you are on, or attempting to visit, a site that is secure. Chrome for instance, has three symbols to indicate the security status of a website:

secure webpage padlock symbol

Secure – the information you send or receive through this site is private

Information symbol indicating website may not be secure

Info or “Not secure” – means the site is not using a private connection and someone might be able to see or change the information you send or get through this site

webpage security warning symbol

Not secure or Dangerous – the most severe warning that this website has been flagged as unsafe.

More detailed analysis of the security of your web server can be found using this free SSL Server Testing tool.

3. Intrusive Interstitials

“Intrusive Interstitials” sound very technical but in essence it refers to those webpage pop ups you see that obscure the page’s content as soon as you land on or scroll through it.

They include:

  • Standalone interstitials that require a user action to remove them in order to access the intended content.
  • Layouts where the “above-the-fold” (i.e. the content you can see before you start scrolling) portions of the page appear similar to a standalone interstitial, but the original content has shifted below the fold.

Google first started treating Intrusive Interstitials as a ranking factor on 10 January 2017 specifically for mobile searches, where the impact on the user experience was more marked. This has now been rolled out across all devices.

 

Example of an intrusive interstitial on a mobile screen

“Starting today, pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as high”

Google tells us that it can differentiate between these types of interstitials and those where we have no choice but to use, which may include:

    • Cookie banners
    • Login dialogue boxes
    • Age verification
    • Banners that use a “reasonable” amount of screen space and are easily closed down

Our advice is to use pop-ups by all means, but don’t make them fall foul of what Google defines as “intrusive”. More on that in a later blog.

Core Web Vitals

As mentioned earlier, the Page Experience Update focuses on three main Core Web Vitals:

    • Largest Contentful Paint (LCP)
    • Cumulative Layout Shift (CLS)
    • Core Web Vital – First Input Delay (FID)

There are other Web Vitals that Google considers, the so-called non-Core Web Vitals. They are:

    • Speed Index (SI)
    • Time to Interactive (TTI)
    • Total Blocking Time (TBT)
    • First Contentful Paint (FCP)

As we said earlier, these all sound very technical so we’re going to define each one in simple terms and explain what they mean.

4. Largest Contentful Paint (LCP)

“Largest Contentful Paint” is defined by Google  as “the render time of the largest image or text block visible within the viewport, relative to when the page first started loading”. In other words, how long it takes for your largest image, video, text block or webpage background to become fully visible. Google uses a number of metrics for measuring perceived load speed and sees LCP as one of the most important ones. For them, anything less than 2.5 seconds is considered good.

core web vital largest Contentful paint scoring criteria graphic

It’s possible to dig deeper into what is measured and things rapidly becomes very technical as are the fixes you can implement to improve LCP. But there are a few quick wins most website owners can implement themselves, such as checking with your website host provider to improve loading speeds as well as optimising your images and web fonts. More information on this will appear in our future blog, but if you want to know more about this now, arrange a free consult with us here.

5. Cumulative Layout Shift (CLS)

Isn’t it annoying when a web page that has buttons you want to click that suddenly move out the way, or text you are reading which suddenly drops below an image that has taken its time to load? Google thinks so too and is now taking a dim view of websites that do this. It can happen for a variety of reasons and sometimes this is done deliberately (unscrupulously even) by the website owner.

The effect is nicely demonstrated in the clip below:

This is called “Cumulative Layout Shift” and it’s another Core Web Vital that measures the visual stability of the webpage and is targeted at those site that provide such a poor user experience. Again, how this is measured and reported can become quite complicated.

core web vital Cumulative Layout Shift rating criteria graphic

A CLS score of 0.1 or lower is considered Good and can be improved by setting media files size attributes (for images and videos) and by only adding new content “below the fold” i.e. so that it only becomes visible on scrolling down. For more information on CLS, look out for our future blog but if you want to know more about this now, arrange a free consult with us here.

6.  First Input Delay (FID)

“First Input Delay” is a measure of how long it takes for a user to be able to interact with the webpage, for example, to click on links, access drop-down menus, enter data into forms etc. It’s measured from the moment the user first interacts (i.e. clicks a link) to the moment when the browser is able to start processing that interaction.

For text-only webpages especially blog posts, this is generally not a concern, as the interactions are mostly scroll and zoom and no processing is required. However for login or sign-up webpages, for example, where interaction is essential, this can become more critical.

A good FID score is considered to be 100 ms or lower.

core web vital First input delay score criteria

Once more, solutions for reducing FID can become very technical and in some case opportunities to improve may be limited by your website template or stylesheet. Look out for our future “blog” on First Input Delay for more guidance or arrange a free consult with us here.

7. Measuring Your Core Web Vitals

If your website has sufficient traffic, you can see how your website is performing directly from your Search Console Core Web Vitals Report which will be based on real world usage data (or field data), however, this is often not the case.

For websites with insufficient field data, there are a number of tools that can provide analysis based on so-called lab data. One such tool is PageSpeed Insights and another is the Lighthouse Chrome Extension from the Chrome Webstore.

The overall Lighthouse Performance score is a weighted average of all the Web Vitals metrics scores as shown in the table below.

Table showing weighting of the 6 web vitals

The overall score ranges from 0 to 100 and are colour coded as follows:

 

0 to 49  Red – Poor
50 to 89 Orange – Needs Improvement
90 to 100 Green – Good

Interestingly Google’s own corporate home page about.google has a deceptively simple design and yet performs poorly on its own Lighthouse Report – it gets a score of a red 47!

screenshot of Google's About webpage
screenshot of lighthouse performance report for one of Google key landing pages

The Lighthouse Scoring Calculator is a useful tool which can help you decide where best to focus your efforts. But it’s a judgement call as to how much time and effort you should spend trying to improve your Lighthouse Performance score.

We’ve been working with this app for a while and have discovered that, say for example, increasing your “First Contentful Paint” (the lowest weighted metric) score from 10 to 30 (a 200% improvement) may only increase your overall score from 32 to 34.

Suffice to say the Page Experience Update is here to stay and Google’s drive to improve the overall search user experience in Google Search can only mean that it will become increasingly more important in time. Taking just a few basic measures such as optimising your images and webpage layout will not only improve your score but will also improve your user engagement – which is what it’s all about really.

About the author:

Alan Say is an accredited SEO Marketer and incurable tinkerer who loves the challenge of getting websites easily found on Google as well as delivering a great User Experience. In his spare time, he does the washing up.