Core Web Vitals and Why They Are Important
Core Web Vitals and Why They Are Important
Chances are you’ve never heard of Core Web Vitals, or why it’s important to pay attention to them. If your website was built by a professional agency, you likely don’t need to be concerned, but as a website owner, you should have at least a basic understanding of them.
In a nutshell, Google has a set of Web Vitals that they believe are necessary to deliver a great user experience for website visitors. things like fast load times, mobile-friendliness, readability, ease of use, content structure, etc.
Core Web Vitals are a subset of these and are considered key factors for all websites. As such, they are used by Google’s algorithm when ranking your website.
“Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience. They measure dimensions of web usability such as load time, interactivity, and the stability of content as it loads.”
“Great page experiences enable people to get more done and engage more deeply; in contrast, a bad page experience could stand in the way of a person being able to find the valuable information on a page. By adding page experience to the hundreds of signals that Google considers when ranking search results, we aim to help people more easily access the information and web pages they’re looking for, and support site owners in providing an experience users enjoy.”
(Source https://developers.google.com/search/blog/2020/05/evaluating-page-experience)
These Core Web Vitals are:
LCP (Largest Contentful Paint)
FID (First Input Delay)
CLS (Cumulative Layout Shift)
Whaatttt???
Yeah I know, a bunch of Gobbledegook.
So, let’s break this down.
LCP (Largest Contentful Paint)
LCP measures the loading performance of your website. It looks at the time it takes to render the largest image or block of content in the visible area of the webpage.
Ideally, this should be no more than 2.5 seconds. If your score is larger than this, you will want to look at the most common culprits, namely:
- Budget website hosting (slow server response times)
- Non-critical JavaScript and CSS scripts that are loading before your content (render-blocking JavaScript and CSS)
- Large, non-optimized images or videos (slow resource load times)
- Using technologies that rely on the browser doing the bulk of the work instead of the server (client-side rendering)
Your website agency or developer should be able to help you with these (or we can look at it for you).
FID (First Input Delay)
FID measures the time it takes a web browser to start processing a user interaction, for instance, clicking a link, tapping a button, etc. We’ve all been frustrated from trying to do something on a website (like tapping a button) and having nothing happen. It’s like the website is broken.
What is actually happening is that the webpage is still loading things in the background (for instance dealing with a large JavaScript file) and because it’s busy doing that, that it can’t respond to your request. This is frustrating for users and they may simply abandon the website.
Your FID score should be no more than 100 milliseconds (0.1 seconds).
NOTE: Since this is a real-world metric that cannot be measured in a lab test, developers often use TBT (Total Blocking Time) which essentially measures the time when a webpage is blocked from accepting user interaction. Generally speaking, if you have a good TBT score, your FID will also score well.
The main culprit here is almost always heavy JavaScript execution. Fixing this issue is outside the scope of this article, but you are seeing poor scores, you can talk to your developer (or us) about resolving this.
CLS (Cumulative Layout Shift)
CLS measures the visual stability of your webpage. When a webpage loads, it needs to render images and content. It may also load videos, advertisements, third-party applications, etc. All these things can cause the layout of your webpage to “shift” and affect how long it takes your webpage to become “stable”.
You may have seen websites where the content seems to jump around while the webpage is loading. Maybe you tried to click a button and it moved on you. This is what is meant by “layout shift” and is considered a poor user experience by Google.
You will want a CLS score of 0.1 or less.
If your score is higher than this, it is most likely caused by loading images without dimensions, loading ads or embedded content without dimensions, dynamic content, elements that need to wait for a network response or web fonts that are slow loading.
Again, your developer should be able to tackle these issues.
For Example …
This is an example of a website we recently designed and developed for Bourque Construction, and represents the kind of scores you should be aiming for.
As you can see, the LCP (load time) is less than a second, the TBT is 0 ms, and the CLS is 0.
The performance and structure scores are also very strong.
While scores like these won’t automatically catapult your website to the top of Google (you also need to look at content, search engine optimization, responsiveness, etc), but they will go a long way in getting Google to like your website, and are another step towards a better ranking.
If you would like a free assessment of your website’s Core Web Vitals, feel free to fill out a request form. It generally takes 3-5 business days to complete the assessment and to provide you with a PDF report of our findings and suggestions for improvement.
