Core Web Vitals and how Hypernode helps improving them

Anyone who’s spent some time diving into SEO can confirm that Google regularly changes up their algorithm, forcing you to overhaul your website. But no need to despair: the changes in their algorithm also often benefit you as a user, and don’t always have to mean a decline in your rating. This year, the Core Web Vitals are slated to be a major addition to the ranking system. In this article, we discuss what it is, how it works and how you can use it to your advantage.

The health of your website as a SEO bonus

Core Web Vitals are indicators of your website that earn you bonus points in your ranking as of May of this year. The load time of your pages, responsiveness of your website and visual stability of the page content will count more heavily towards your website’s ranking. In other words: the quality and usability of your website will become important ranking factors.

The search giant already took into account user friendliness for mobile browsers, Google Safe Browsing, HTTPS usage and not using ‘intrusive interstitials’, in other words pop-ups. But the Core Web Vitals will now definitely be more deserving of your attention, because as of May 2021 they will count towards Google’s ranking algorithm. These Core Web Vitals each get a score from ‘poor’ to ‘needs improvement’ to ‘good’ and are dependent on a number of criteria, but don’t worry: because they are mostly UX related, it is easy to improve your score.

The metrics are already available for you to check out in Google’s Search Console. They have also been added to Lighthouse as part of the Chrome DevTools. That tool allows you to see the score of any website for First Contentful Paint, Largest Contentful Paint, Time to Interactive, Total Blocking Time, Speed Index and Cumulative Layout Shift. In this article, we will be diving into the new Core Web Vitals and seeing what they are exactly.

Largest Contentful Paint (LCP)

LCP or Largest Contentful Paint measures how long it takes for the largest element on a page to load. This could be an image or a video, but also a text block or, in the case of a web shop, the image accompanying a product on a product page. A visitor of your website should be seeing the most notable piece of content on their screen within a certain amount of time. The LCP score is good when it takes less than 2,5 seconds to load the largest element. If it takes longer than 2,5 seconds, it falls under the category ‘needs improvement’. A bad score would be a load time longer than 4 seconds. LCP is often closely linked to First Contentful Paint, which basically measures how long it takes for the first text or image is shown on an empty screen.

Which element on your page is the largest is influenced by, for example, how scalable your pages are. Elements that do not scale as good and are cut off on smaller screens, or don’t shrink along very well when you watch a page on a mobile browser, only count for whatever portion is actually shown on screen. That’s why it is important to make your website as scalable as you can.

Your Largest Contentful Paint score can influence the usability of your page, especially if your largest element is something your visitors need to interact with, such as a banner they can click or images that they want to scroll through.

First Input Delay (FID)

The time between the first action from a user on your website and the first possibility your website has to respond to that action is called First Input Delay, or FID. This is a metric that is most important for getting and keeping users, because a slow or non-responding website can be very frustrating. If a page loads within 100 milliseconds, it is considered ‘good’. However, longer than 300 milliseconds is considered a ‘bad’ score.

First Input Delay can be caused by scripts or code that are running in the background, meaning your browser might be caught up in finishing these actions and not in a situation where it can respond to user input. Under this input, we count actions such as clicking or tapping, or pressing a key on your keyboard. The FID can be very short the one time and very long the other; if the user manages to click a button or select something in between two actions, the response time of the page can be very fast. But if the page is just finishing up an action, the click of the user is placed in the back of the queue and it needs to wait its turn.

You may have noticed that there is no FID score in the Lighthouse tool. It does, however, look at the Time to Interactive, or TTI score. This is because First Input Delay can really only be measured when there is an actual interaction being done with your page. For that reason, Lighthouse does check the Total Blocking Time on your page. This metric counts the time between First Contentful Paint and Time to Interactive scores.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift happens when the content on a page suddenly shifts after loading by an element that had a delayed load, such as an advertisement, a popup, or a button. This can directly influence the user friendliness of your website: it can cause irritation with your users, or in extreme cases even cause unintended actions on your page by clicking on elements unintentionally.

The CLS is calculated based on a Layout Shift Score, which takes into account the total screen surface that the shifting element takes up, as well as how big the distance is that the element moved. A higher number means a bad score. Not all layout shifts are seen as bad: user input that has direct influence on the interface (such as a window that unfolds after a click, or a search bar that enlarges when it is in use) don’t count towards the score.

Do it yourself

The Core Web Vitals reinforce the call for more user-friendly websites, which is kind of convenient. There is a growing use of CMSes, plugins and other ready-to-use solutions to quickly get a website up and running. And while it’s very nice for business owners to set up such a ready-to-use solution in no time at all, it also means we have to accept certain trends that are not as ideal from a visitor’s perspective. For example, popups or big banners that come built into a plugin or CMS, that make your page slower or less user-friendly. These solutions also often come with a lot of bloat, such as scripts that need to be loaded before the page is actually usable.

The Core Web Vitals give you insight in which elements are worth keeping, and which should maybe be adjusted. Google has added the Core Web Vitals to a number of tools already. For a quick insight in your scores, the Lighthouse app in the Chrome DevTools is probably your best bet. This tool scans any page you want and gives a score with an elaboration. For a more thorough check you could use PageSpeed Insights, which comes with useful recommendations for improvements. Other tools that could help you are the Chrome UX Report API, Chrome DevTools and the Web Vitals Chrome extension. Google even came up with a workflow that uses a number of these tools to get the best result.

How Hypernode helps with improving these Core Web Vitals

At Hypernode, the performance of your website is already one of the focus points. Customers have access to several caching methods to help with the wait time on loading pages for your visitors. Large elements, mostly images, can also benefit from our Image Optimizer, a free tool that automatically optimizes the images in your shop every night.

Our hypernodes are also set up in such a way that Time To First Byte or TTFB is as low as possible. The TTFB is the reaction time between sending a HTTP request from your browser and receiving the first byte from the server. While this is not a metric that Google uses for your Core Web Vitals score, is does mean that all the other requests will be picked up quicker, giving you a shorter TTI score.

Your choice

Google has good intentions with tackling long load times and moving elements to make website owners more aware of how they can improve their websites. However, it is also good to remember that the score that you are given is given by Google. Their monopoly position in the search engine market gives them the opportunity to decide what websites should or should not be doing. It is up to you to decide whether you want to let this guide you in how you plan out and create your website.