User experience has been increasing in importance over the years in relation to better search engine rankings. With the release of Core Web Vitals, it is more important than ever that you pay attention to, and optimise, the user experience of your website.
Core Web Vitals were announced by Google in 2020 as part of their Page Experience Update. They are a set of metrics that will be used as part of Google’s ranking system to decide where your website shows up in search results.
Website users show they prefer sites with a great on-page experience; websites that load quickly, look good and are easy to navigate. From your own experience, you’ll know if a website takes too long to load or you can’t find what you need quickly, you’ll often close the tab, return to search and look for another. Page load speed affects everyone, Amazon estimates that a one-second delay in webpage loading would cost them over $1.6 billion in lost revenue every year.
In recent years, Google has added a range of user experience criteria including how quickly pages load and how mobile-friendly a site is to their ranking criteria. The introduction of Core Web Vitals builds on these criteria. Core Web Vitals are metrics related to speed, responsiveness and visual stability. These metrics have been designed to help website owners measure user experience on their website.
As a website owner, you need to pay attention to the Core Web Vitals update. Read this article, review the basic steps needed and then take action to improve your site performance according to the Core Web Vitals update. This will help to maintain your SEO rankings, keep your organic traffic and improve your customers’ online experience.
Core Web Vitals explained – what are they?
As stated above, core web vitals are a set of metrics related to site speed, interactivity and visual stability. Core Web Vitals are made up of three specific page speed and user interaction measurements: largest contentful paint, first input delay, and cumulative layout shift. If field data shows pages score “good” for all three Core Web Vitals they pass the Core Web Vitals assessment.
Simply put, Core Web Vitals are a subset of factors that will be part of Google’s “page experience” score (essentially, Google’s way of assessing how easy your website is to use for your potential customers).
Core Web Vitals – why you need to know about them
The Core Web Vitals report generated by Google will show how your pages perform, based on real-world usage data. The report has been introduced to help website owners improve user experience and the quality of their websites. In turn, the quality and user experience of a website will be assessed by Google’s algorithm to determine where a site will rank and show up in search results. Google will start using Core Web Vitals in this way, as a ranking signal, starting mid-June 2021. This is only the beginning; Core Web Vitals will become more important over the next few years as Google builds on the update. So, it is key to pay attention and do what you can now.
The three Core Web Vitals explained and tips to improve them
Largest contentful paint, first input delay, and cumulative layout shift might sound like terms you have never heard of and can never get your head around, but don’t worry. Most simply, they are three ways that Google has decided are most important to measure user experience. You don’t have to be a developer to ensure your website provides a great website experience for your ideal customer. Google themselves have said:
“Site owners should not have to be performance gurus in order to understand the quality of experience they are delivering to their users. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.”
I’ll break down these three Core Web Vitals for you, and what they actually mean.
Largest Contentful Paint (LCP)
“Customer: I can’t see any useful content! Why does it take so long to load? 😖”
Largest Contentful Paint (LCP) is a measurement that Google has introduced to measure perceived page load speed. It spots the point in the page load timeline when the page’s main content has likely loaded. In simple terms: it’s the time from clicking on a link to seeing the majority of the content on-screen. A fast LCP reassures the user that the page is useful – as they are not waiting for ages for content to load.
The LCP metric used by Google reports the render time of the largest image or text block visible within the user’s visible area of a web page, in relation to when the page first started loading. The LCP only considers content that is relevant to the user experience: images, image tags, video thumbnails, background images with CSS and text elements, including paragraphs and headings. If you want to find out more about LCP, Google has specific LCP guidelines you can review.
The target time to pass the LCP test is load in under 2.5 seconds.
LCP is different from other page speed measurements you might have used before, other page speed metrics don’t always represent what it’s like for a user to open a webpage. So LCP focuses on what actually matters when it comes to page speed: your customer being able to see and interact with your page.
You can check your LCP score using Google PageSpeed Insights.
I understand that this all sounds complicated, but your LCP can be improved relatively easily (if it needs to be) by implementing the below tips:
- Make sure you have a fast server. This means you need to review your hosting options to ensure your server is quick (cheap hosting isn’t always best).
- Ensure images are properly sized. Do this before adding them to your website and add lazy loading
- Remove render blocking files. Whilst this can be done manually you can also use a render blocking plugin on WordPress to do it for you
- Remove large page elements. Google’s PageSpeed Insights will tell you if your page has an element that’s slowing down your page’s LCP
When you check your speed score using Google PageSpeed insights, you will also be provided with recommendations to further improve your LCP.
First Input Delay (FID)
“I clicked but nothing happened! Why can’t I interact with this page? 😢”
First Input Delay (FID) measures interactivity, and it is all about first impressions. It is the Core Web Vital metric that measures a user’s first impression of a website’s interactivity and responsiveness. Google considers FID to be important because it considers how real-life users interact with websites.
FID analyses the time taken from when a user first interacts with a page to the time when the browser responds to the interaction. In simpler terms, FID is the delay between when a visitor on your site clicks or taps on a link or a button, and the time it takes for the browser to respond to that action and starts processing it. The longer it takes for an action to happen, the higher the FID score. In practice, you want your page to be as usable as possible as early as possible.
As for LCP, you can check your FID score using Google PageSpeed Insights.
First Input Delay is measured in milliseconds (ms). The target time to pass the FID test is under 100ms.
FID and LCP are closely linked, if your pages load quickly then they can also interact quickly. Improving your LCP should also aid your FID score. However, the primary culprit for poor or slow FID is JavaScript.
If you need to improve your FID score further, you can:
- Upgrade your website hosting. Also, the case for LCP, optimising your web hosting will help to improve your FID score. Web hosts are able to optimise their servers to give your website a solid foundation to operate from.
- Use a caching plugin like WP Rocket. This plugin with a built-in feature that allows you to optimize file delivery, without going through any technical details.
- Review Google’s Optimize First Input Delay guidance.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures visual stability. It has been implemented to quantify how users experience unexpected layout shifts—a low CLS helps to ensure that the webpage is easy and enjoyable to use.
To give a real-life example, have you ever experienced reading an article on your mobile or laptop when something suddenly shifts on a page? The text may move or an advert may appear unexpectedly and you lose your place, having to scroll up or down again. It is frustrating right?
This unexpected movement of page content typically happens because resources are loaded out of sync, or other elements get added on top of existing content. Google states “the culprit might be an image or video with unknown dimensions, a font that renders larger or smaller than its fallback, or a third-party ad or widget that dynamically resizes itself.” These elements cause the page to shift or move whilst the user is on it. In simpler terms: if elements on your page move around as the page loads, then you’ve got a high CLS score which is not good.
The target CLS is less than .01.
As with the other Core Web Vitals, you can check the CLS score of a page using Google PageSpeed Insights.
Ideally, you want your page elements to be stable as the page loads. This way, users of your website don’t have to re-look at where links, images and text are located once the page is loaded and they won’t click on anything by mistake.
There are some relatively simple things you can do to improve your CLS score:
· Make sure you use set size attribute dimensions for media (video, images etc.): When you set image size in advance, the user’s browser will know exactly how much space that element is going to take up on that page and it won’t resize as the page loads.
· Ensure any advertising elements have a reserved space on the page. If they don’t have reserved space they can appear on the page at any time and shift content in other directions.
· Keep new user-experience elements below the user’s viewport. If new elements need to load, keep them below the area that the user can see so they don’t distort the displayed content.
Analysing your site’s Core Web Vitals
You can only know how to improve your website’s performance once you have assessed how it is currently performing. I’ve already included the PageSpeed Insights test that will give you your web vital metrics, but there are many more ways you can find out how you are doing with your Core Web Vitals.
The simplest and most user friendly is to use Google’s own measurement system, Search Console. When you log in to Google Search Console, you will see Core Web Vitals in the enhancements section.
The chart will show you how your page URLs are performing on both mobile and desktop.
Once you have generated the report, clicking on the Open Report link will then take you to a page that will show you what the issues are that are causing your poor or need improvement scores. At this point, you can fix the issues and refer to the PageSpeed Insights tool to find more in-depth fixes for each page.
Core Web Vitals explained – final thoughts
The gradual rollout of Core Web Vitals as a ranking factor will begin in mid-June, but nobody expects performance to drastically shift or fall over a cliff-edge overnight. It’s important to mention that a great page experience score won’t miraculously push you to the number 1 ranking in search results. Google has been quick to point out that page experience is one of several (approximately 200) factors that they use to rank sites in search, stating “a good page experience doesn’t override having great, relevant content”.
Google has been talking about page speed for the last decade, and with Core Web Vitals they have introduced a new measure to consider the importance of user experience. I have produced this article to provide you with the basics of Core Web Vitals explained, and why we need to take notice of them – but you do not need to panic. Carve out some time to focus on your website’s performance and metrics, run the Core Vital report in Search Console and begin to implement some of the fixes included in this article and those Google suggests over the next few months.
Just like designing your own website, your website performance is a process not a one-off event. It is not finished when you hit publish on your website. It evolves and needs constant monitoring, care and attention.
0 Comments