Table of Contents
A Primer on Core SEO Web Vitals
The first website published in 1991 was exclusively text-based, and though simple, it marked the beginning of what would soon become the largest network in the world: a knowledge repository of exceptional scope.
Today, over three decades later, websites have evolved to encompass a variety of content, including multimedia, interactive services, real-time communication—just to name a few.
Web design serves as the cornerstone of this evolution, shaping how we engage, perceive, and interact with the digital world.
But just as an architect relies on established guidelines to ensure the integrity and functionality of the buildings they design, Google has published core web vitals to help marketers and web developers create websites that not only provide a smooth, efficient and enjoyable experience but also improve search performance.
In this article, we’ll share a brief guide on improving core SEO web vitals.
What are Core Web Vitals
In 2020, Google introduced Web Vitals as means to provide unified guidance on quality signals that are essential to deliver a great user experience. Since then, new updates have emerged to better address evolving user needs and technological advancements.
Fundamentally, they are, as Google puts it, a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page. The better a website performs on these metrics or aligns with recommended thresholds, the better the user experience it provides.
There are three main Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS). Let’s dive into each.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) essentially measures the time it takes for a browser to load the largest content element on a webpage, whether it’s the hero image, a video or a block of content.
Why is a Good LCP Performance Important?
2 seconds. That is the longest an average internet user expects to wait for a page to load. While it may not seem that long, often, while in a productive browsing flow (even a leisurely one), an extra second can feel inconvenient—even annoying. While that may not have been an issue a decade ago, today’s internet users have come to expect fast internet speeds.
A good LCP score facilitates faster website loading, which in turn leads to better user engagement, lower bounce rates, and potentially, higher conversion rates. Furthermore, given the LCP is a key part of Google’s Core Web Vitals, better performance increases the likelihood of achieving higher rankings.
Recommended Thresholds for LCP
LCP is a time metric and therefore measured in seconds. Google recommends a score of 2.5 seconds or less to pass its Core Web Vitals check.
A score between 2.5 and 4 seconds is acceptable, though some adjustments might be necessary to improve, which is why Google terms it as “Needs improvement”.
Anything more than 4 seconds is poor and needs significant improvements at the risk of negatively affecting search rankings.
What Causes a Low LCP Score
There are several factors that contribute to low LCP scores, including slow server response times, render-blocking elements, load times, and client-side rendering.
Slow server response times can delay the rendering of large content elements on a webpage, particularly if the server takes a significant amount of time to respond to a browser’s request.
While render-blocking elements such as scripts (lines of code embedded in your website), stylesheets (a standard/tool for determining style and layout of webpages) may block or delay the loading of a website’s content.
On some occasions, low LCP scores may come as a result of delays in load time; for example, high definition images, particularly those that aren’t optimised, can take more time to load.
At other times, low LCP scores stem from slow client-side rendering, a process where the user’s browser handles most of the loading. This is particularly common with extensive Javascript (Javascript is a programming language used for web development) or when content is loaded for the first time.
How to Improve LCP Score
There are a few ways to improve your LCP score, including but not limited to optimising images, fonts and code, and removing render-blocking Javascript.
Image Optimisation
As mentioned above, images, especially high-definition images may increase the time it takes for a website to load. Consider resizing them or compressing them. Alternatively, you can opt for a more efficient image format such as WebP.
Font Optimisation
Occasionally fonts can have a detrimental effect on your LCP score, especially given that before any text on a page is displayed, the font used needs to load. If the font is causing your LCP score to drop, consider using system fonts, which are essentially the default fonts on a user’s device.
If variety is important to your website, consider instead hosting the fonts yourself, as opposed to relying on a third-party website to download the fonts.
Code Optimisation
Consider optimising your code to make it more compact. Remove elements such as unnecessary white space and developer comments to boost loading times. If you lack the requisite skills to implement these changes, we recommend hiring an SEO specialist or engaging an agency to help you optimise your site for better performance.
Eliminate Render-Blocking Code
If JavaScript code and CSS stylesheets are negatively affecting your LCP score, we recommend, first, identifying if those resources are necessary; sometimes websites load swathes of unnecessary code. If a function or stylesheet is unnecessary, consider removing it or deferring to a time when it becomes necessary.
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) measures the time it takes for a website to respond to a user’s interaction, from the first click or tap to the next visual update.
Why is a Good INP Score Important?
Trendyol, an eCommerce platform with 30 million customers and over 240,000 sellers, sought to improve their user experience. They focused on INP as the metric to improve, resulting in a 50% reduction in INP and 1% increase on click-through rates from the listings page to the product detail page per user session.
While 1% might seem small, for a business with 30 million customers, it translates to potentially 300,000 more customers engaging more deeply with the website by moving from the listings page to product detail pages per user session.
A good INP score, like the LCP score, can help reduce bounce rates, better performance in search rankings, as well as increased conversion rates.
Recommended Thresholds for INP
For optimal performance, Google recommends an INP score of 200ms or less. A score between 200ms and 500ms is deemed as requiring improvement, while anything more than 500, considered poor and slow to respond to user requests.
We recommend aiming for less than 200ms, slow responses might frustrate visitors, causing them to believe that something is wrong with your website or their device.
What Causes a Low INP Score?
Browsers work by fetching resources from the internet and displaying them in a user-friendly format. This process involves several key steps handled by the browser’s main thread (a unit capable of executing code). Other background threads, meanwhile, are relegated to less critical tasks such as loading images. Low INP scores are often caused by long tasks that block the main thread, resulting in delayed responses to user interactions.
Synchronous event listeners, which are basically tools that execute code in response to specific actions or occurrences within a browser—sort of like clicks or scrolls, can also delay interactivity.
Document Object Models is a framework that organises elements on a page, whether text, images or buttons. Large DOMs may also lower responsiveness by causing more frequent reflows and repaints.
How to Improve INP Score
There are a couple of ways that you can improve your INP score. This includes, reducing page size, reducing the DOM size, and limiting third party scripts.
Reducing Page Size
Google recommends keeping your webpage and all its resources to less than 500KB. This reduces that amount of resources that a browser needs to load, which, in turn, improves your website’s response time. Consult an SEO agency for help streamlining the elements on your site for efficiency and an improved user experience.
Reducing DOM Size
The size of DOM can be reduced by simplifying your page’s structure making it easier for a browser to manage and process. Consider removing or substituting unnecessary HTML elements, such as widgets that don’t add value, duplicate buttons that perform the same function.
Reduce Third Party Scripts
Limiting elements from your website that come from outside sources, such as embedded video players, ads or social media buttons can help improve your INP score. While some do indeed provide value, they can also slow down your pages by consuming additional processing power.
Cumulative Layout Shift (CLS)
Have you ever visited a website, and upon interacting with an element, such as clicking the buy button, an ad appears pushing the button below, and you end up clicking on the ad. That is a layout shift, and is precisely what the Cumulative Layout Shift Core Web Vital was designed to measure.
Why is a Good CLS Score Important?
Given that CLS is a measure of visual stability, the better the score, the better the visitor experience and, in turn, search performance. Studies and anecdotal evidence suggests that people will leave a website because it didn’t load properly.
Accidental clicks, navigation errors, missing elements, will frustrate your visitors causing them to find other websites to browse.
Mobile users, representing a significant percentage of internet users (97 percent in Singapore) are particularly more affected, because layout shifts can be more disrupting on smaller screens.
Recommended Thresholds for CLS
CLS is calculated by multiplying impact fraction and distant fraction. Impact fraction is a measure of the size of the unstable element in relation to the visible area of the web page that the user can see on their screen. Distant fraction, on the other hand, relates to the degree of shift that an unstable element moves. Layout shift score = impact fraction x distance fraction.
Anything less than 0.1 is good; it indicates visual stability during loading. Anything more than that necessitates adjustments at the risk of alienating visitors.
What Causes a Low CLS Score
There are a number of factors that contribute to a low CLS score such as using images without specifying dimensions. Browsers won’t know how much space to allocate, causing other elements to shift unexpectedly when the images finally load. This also applies to ads, embeds and iframes without set dimensions.
Layout shifts can also be caused by dynamic content such as images or videos that load in response to user actions, social media feeds that load posts automatically, or advertisements that appear as users scroll.
How to Improve Your CLS Score
There are a number of strategies that you can employ to improve your CLS scores, including establishing image dimensions, using CSS aspect ratio boxes, as well as allocating space for dynamic content.
Implement CSS Aspect Ratio Boxes
CSS aspect ratios can help your website maintain a consistent width-to-height ratio that prevents media from increasing or decreasing in size, leading to layout shifts.
Allocate Space for Dynamic Content
In addition to implementing CSS aspect ratios, consider reserving space for dynamic content. In doing so, you prevent them from affecting other page elements when they load.
Establishing Image Dimensions
We recommend establishing image dimensions—height and width—for all your media, whether it’s images or video embeds. Doing so allows your browser to reserve the right amount of space before the media fully loads.
Final Thoughts
We hope the tips and insights shared above have been helpful in allowing you to optimise your website in a way that elevates the user experience but also meets Google’s recommended thresholds and improves search ranks.
Rogue Digital is a full-service digital marketing agency. We provide a wide range of services including SEO, SEM, Social Media Marketing, Content Writing, Creative Design, Website Design & Hosting as well as Display & Video Advertising. Reach out to us for a consultation to discover how we can help optimise your website for improved search engine performance.
