UX and SEO: Understanding and Optimising For Core Web Vitals

Understanding and Optimising for Core Web Vitals

The Delayed Gratification of Good SEO

SEO is a delayed gratification game. Google tells us X is important for your chances of attracting organic search traffic, you improve X on your website, you wait a few months, Google tweaks and tests some changes to it’s algorithm, your traffic might increase or dip slightly, you wait a few more months, Google rolls out a broad core update that focuses on X and you see your average position and traffic increase.

Delayed Gratification SEO

This example is a very straightforward one – very often there may be a lot more ups and downs along the way. The reason is that Google may decide that X is good for users and thus should be rewarded by their search engine, but then they have to go and ensure that their algorithm accurately rewards X – this is the tricky part. X is often pretty obvious to a user, but difficult to measure and reward for a search engine algorithm.

SEO and User Experience (UX)

UX and SEO Handshake

Let’s go with a real life example and replace “X” for “User Experience”. Google have been banging the “great UX feeds great SEO” drum for a long time now. RankBrain is a core part of Google’s search algorithm which leverages machine learning – and it’s long since been assumed that it takes a variety of post click UX data into account (along with tonnes of other data around user intent) before feeding into Google’s decision on what content to rank for a particular query.

But in saying that, I’m sure you’ve clicked on a Google search result lately that brought you to a website on which you may have had a pretty terrible User Experience. That’s the thing about User Experience – it’s multifacted, somewhat subjective and there is no one easy objective way to measure it from the perspective of a search engine algorithm.

But God knows…Google are trying their best…

Timeline of Some of Google’s UX Focused Algorithm Updates

January 19, 2012: Page Layout Update

Google’s page layout algorithm update (or Above the Fold) targeted websites with too many ads above the fold.

April 21, 2015: “Mobilegeddon” Mobile-Friendly Update

“Mobilegeddon” was an update meant to reward mobile-friendly websites with better search rankings and provide better results to searchers on mobile devices.

May 3, 2015: Quality Update

The Quality Update (or the Phantom Update) was a tweak to Google’s core ranking algorithm – specifically, how Google assesses quality signals. Websites with content quality issuesand too many ads, were negatively impacted.

October 26, 2015: RankBrain

RankBrain is a machine learning algorithm that filters search results to help give users a best answer to their query. RankBrain has been called the third most important ranking signal.

May 12, 2016: “Mobilegeddon 2” Mobile-Friendly Update

Mobilegeddon 2 was an update to Google’s first mobile-friendly update, meant to “increase the effect of the ranking signal.”

January 10, 2017: Intrusive Interstitials Update

An update to target intrusive interstitials and pop-ups that hurt the search experience on mobile devices.

May 17, 2017: Quality Update

An update that impacted sites with aggressive/deceptive advertising, UX issues, and thin/low-quality content.

January 17, 2018: Speed Update

Page Speed was officially announced as a ranking factor for mobile searches. This update applied the same standard to all pages, regardless of the technology used to build the page.

5th May 2020: Introduction of Core Web Vitals into Google Search Console

This is Timeline description, you can change me anytime click here

28th May 2020: Announcement of upcoming Search ranking change that incorporates Core Web Vitals metrics

This is an “advance warning” and Google promise us 6 months notice before the actual rollout of this update.

This of course is just a sample of some of the bigger algorithm updates that relate to UX – there have been many other tweaks and algorithm updates which are likely to have related to UX in one way or another.

What I want to focus on are the two most recent announcements on that timeline relating to Core Web Vitals.

What are Core Web Vitals?

The release of Core Web Vitals and the announcement that these metrics will be the focus of a ranking change in 2021 is one of the most significant attempts thus far by Google in terms of aligning the actual search algorithm with their message that good UX is core to good SEO.

It is a milestone in that it promises to offer a somewhat objective measurement of User Experience that we can optimise for in the expectation that if we meet our Core Web Vitals targets, we will be rewarded on the SERP.

 According to Google, they are :

“a set of metrics related to speed, responsiveness and visual stability, to help site owners measure user experience on the web.”

There are three main Core Web Vitals metrics:

Largest Contentful Paint (LCP) – Is Your Page Useful?

The Largest Contentful Paint (LCP) metric reports the render time of the largest content element visible within the viewport. (The viewport is the user’s visible area of a web page – it varies with the device, and will be smaller on a mobile phone than on a computer screen.

So in other words, more or less once the largest content element at the top of your page loads, the LCP has been met.

According to Google:

“Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded—a fast LCP helps reassure the user that the page is useful.”

LCP is primarily affected by three factors:

  • Slow server response times
  • Render-blocking JavaScript and CSS
  • Resource load times
  • Client-side rendering

What is a good LCP score?

Google classifies anything under 2.5 seconds as a “Good” LCP score, anything above 4 seconds as “Poor” and anything in between “Needs Improvement”.

largest contentful paint

For Your Developer

For a more detailed, technical understanding of LCP, read Google’s web developer guide to LCP.

First Input Delay (FID) – Is Your Page Usable?

FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.

In other words, FID measures the responsiveness or interactivity of your web page.

According to Google

“First Input Delay (FID) is an important, user-centric metric for measuring load responsiveness because it quantifies the experience users feel when trying to interact with unresponsive pages—a low FID helps ensure that the page is usable.”

The main cause of a poor FID is heavy JavaScript execution. Optimizing how JavaScript parses, compiles, and executes on your web page will directly reduce FID. Some ways to do this include:

  • Reduce JavaScript execution time
    • Minify and compress JavaScript files
    • Defer unused JavaScript
    • Minimize unused polyfills
  • Break up Long Tasks
  • Optimize your page for interaction readiness
  • Use a web worker

What is a good FID score?

To achieve a “Good” rating, your web pages should have a FID of less than 100 milliseconds.

Further, as per Google’s web development advice “To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.”

first input delay

For Your Developer

For a more detailed, technical understanding of FID, read Google’s Web Developer Guide to FID.

Cumulative Layout Shift (CLS) – Is your page Delightful?

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.

A layout shift occurs any time a visible element changes its position from one frame to the next. For example you are about to click on a “Cancel My Order” button towards the bottom of the page and suddenly an image or video loads above it and shifts that button down below the “Complete My Order” button but you don’t have time to re-adjust and you click the “Complete My Order” instead.

cumulative layout shift gif

According to Google:

“Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.”

For most websites, you can avoid all unexpected layout shifts by sticking to a few guiding principles:

  • Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes.
  • Never insert content above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected.
  • Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.

What is a Good CLS Score?

To achieve a “Good” CLS Score, your web pages should strive to have a CLS score of less than 0.1.

cumulative layout shift

For Your Developer

For a more detailed, technical understanding of CLS, read Google’s Web Developer Guide to CLS.

How To Measure Core Web Vital Metrics?

Google collects anonymized, real user measurement data for LCP, FID and CLS. This data enables site owners to quickly assess their performanceand is available to view in the following Google tools:

  • Chrome User Experience Report
  • PageSpeed Insights
  • Search Console’s Core Web Vitals report
  • Web Vitals Chrome Extension

Chrome Dev Tools and Lighthouse can be used to measure the Core Web Vitals in a lab environment (e.g. pre-release of your site). However, since there is no user input, these tools cannot accurately track FID – instead Total Blocking Time (TBT) is lab-measurable and is generally an excellent proxy for FID.

measuring core web vitals

So Where Do We Go From Here?

In short, you should do your best to ensure that your website is optimised for Core Web Vitals.

Start by checking your Core Web Vitals report in Google Search Console and identifying pages with “Poor” rating as a priority (and then those that “Need Improvement”).

In the example for my website above we have 0 “Poor” URLs which is great but we do have 47 URLs that “Need Improvement”. Let’s click on “Open Report” and look at these in more detail.

So as we can see I have 47 pages (that’s all my pages) that have a CLS of more than the ideal 0.1 and a LCP longer than the ideal 2.5 seconds. Let’s focus on LCP and click into the LCP issues.

Once I’ve clicked into the LCP report and clicked on the Example URL, I’m shown details like the Average LCP (3.8 seconds) and Similar URLs (i.e. pages with more or less the same issue). I can also click on the “PageSpeed Insights” link in the right hand sidebar for more information.

The two key recommendations here are to Remove unused JavaScript and Eliminate Render Blocking Resources that are slowing down the First Contentful Paint. You can click on either of the Opportunities for some more details on exactly what scripts are causing issues for example.

So now you have identified issues with Core Web Vitals and specific issues on your site that are affecting LCP, FID and CLS – the next steps are to actually go about fixing them. Very often these issues will be overly technical for a business owner / webmaster, unless you get lucky and your issues are caused by unoptimised / uncompressed images. For anything related to JavaScript, CSS or your Content Management System (e.g. WordPress) you will, more than likely, need to involve a front-end developer or technical CMS expert to assist you.

Be Realistic – SEO is Multifaceted

It is important to have realistic expectations around the impact of optimising for Core Web Vitals. We assume most sites will see a positive impact by optimising for these metrics once Google incorporates them into their algoithm sometime in 2021. However, we cannot predict the weight that will be given to them vs other factors.

And we certainly should not expect drastic increases in organic traffic by optimising for these metrics if we have not focused on SEO more wholistically – through ensuring our site is indexable and crawlable, creating quality E-A-T content that provides information that our target audience wants and ensuring that Google trusts our website by building high authority links and citations.

I would predict that where Core Web Vitals will come into play is for queries where one or more results are more or less equal in terms of content quality and link profile.

As per Google Search Documentation:

“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.”

Google Search Documentation

If you have any questions or feedback, feel free to contact me at webanalyticsireland@gmail.com.