What Are Core Web Vitals?
The Core Web Vitals are three very important measurements of your website’s user experience and are crucial for SEO. They look at how long your webpage takes to load, how long it takes to become interactive, and whether it’s visually stable.
The three Core Web Vital metrics are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Each are measured on a scale of Good to Poor.
Largest Contentful Paint (LCP)
Largest Contentful Paint is a measure of load speed.
This metric measures how long it takes for the webpage’s main content to appear for users. Beware: it’s different to First Contentful Paint (FCP), which tests how long it takes for the very first thing to render on the page.
LCP is measured in seconds. A good LCP score should be less or equal to 2.5 seconds, and a bad score is more or equal to 4 seconds.
First Input Delay (FID)
First Input Delay is a measure of interactivity.
This metric measures how fast the page loads when a user interacts with it for the first time. ‘Interacting’ with the page includes link and button clicks, form fills, interactive maps or plug-ins, and so on.
FID is measured in milliseconds. A good FID score should be less or equal to 100 milliseconds, and a bad score is more or equal to 300 milliseconds.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift is a measure of visual stability.
This metric measures how often unexpected layout shifts of the page’s main content occur. Unexpected layout shifts usually happen when the page’s content loads at different speeds so photos, videos, advertisements or text suddenly appear and cause the page to rearrange. Note that unexpected layout shifts are different to expected layout shifts, which is when the content shifts in response to user interaction.
CLS is measured by adding together unexpected layout shifts. A good CLS score should be less or equal to 0.1, and a bad score is more or equal to 0.25.
Why Do Core Web Vitals Matter?
Core Web Vitals are one of Google’s Page Experience ranking algorithms, which means they’re important for ranking your website highly in Google search results.
Google’s Page Experience Criteria perceive how users interact with webpages beyond its pure content value to help judge their quality and, therefore, ranking in Google’s organic search results. Core Web Vitals were added to the criteria in 2021 to place a greater emphasis on user experience. Google announced that pages which were found to have a poor user experience may not be ranked as highly as they had previously been.
At Springboard, we consider Core Web Vitals one important ingredient in the larger SEO cake. Yes, by improving your Core Web Vitals you will consequently improve your SEO and your cake may taste better, but if other ingredients are missing your SEO strategy won’t be as effective and your cake won’t taste as good.
In fact, the Product Lead on the Google Search Ecosystem Team, Rudy Galfi, stated great content is a much more important factor and great content with poor Core Web Vitals can still rank highly in Google Search. Although Google doesn’t reveal all of their search ranking criteria, we do know factors such as mobile-friendliness, safe-browsing and HTTPS certification are also important to optimise alongside content for a strong and wholesome SEO strategy.
Google rewards websites that are overall pleasurable in regards to valuable content and user experience, of which Core Web Vitals are a crucial component.
How To Test Your Core Web Vitals
Google has incorporated ways of measuring your Core Web Vitals into their Chrome User Experience Report, which collects real data from users as they browse the web. These insights are available through Google Search Console, PageSpeed Insights, and Web Vitals Chrome Extension.
Google Search Console
Google Search Console helps you measure your website’s traffic and performance to help identify and fix issues that will improve your search ranking. Once you’ve verified your domain and indexed any other URLs, you can access its Core Web Vitals Report.
The Core Web Vitals Report specifically measures your URLs’ LCP, CLS and FID for mobile and desktop users. Only your indexed URLs can appear in your report, and each requires a minimum amount of real reporting data (users who have opted-in for tracking) to be included.
PageSpeed Insights
Google’s PageSpeed Insights tool is a super easy way to analyse the performance of your webpage on both mobile and desktop. Simply enter any URL into the search bar to receive a detailed report on all three of its Core Web Vitals.
The report breaks its analysis of LCP, CLS and FID down into easy-to-understand metrics, opportunities and diagnostics that help you pinpoint specific areas for improvement.
Web Vitals Extension
Google Chrome’s Web Vitals Extension is a tool you can download to your Chrome browser that provides instant feedback on a webpage’s page speed, interactivity and visual consistency. This means you can analyse your competitors’ Core Web Vitals as well as your own.
Download the Google Chrome Web Vitals Extension here.
How To Improve Your Core Web Vitals
Now that we understand what the three Core Web Vitals are and why they’re important for SEO, let’s discuss how to improve them.
How To Improve Largest Contentful Paint (LCP)
Because LCP measures how fast your webpage loads, the first step to improving it is simply identifying what’s slowing it down. We highly recommend any of the three tools above, as they will point you in the right direction immediately.
Factors that cause a low Largest Contentful Paint score include:
- Slow server response time
- Render-blocking Javascript and CSS files
- Large resource files, including images, videos and HTML files
You can improve your Largest Contentful Paint score by:
- Enabling page caching. Simply put, page caching stores your site’s pages as HTML files on its server after it has loaded the page for the first time, meaning the content will be displayed faster next time. Learn more about HTTP Caching on Google here.
- Compressing HTML, CSS or JavaScript text files. This means to ‘zip’ your text files into a smaller format that will reduce the transfer between browser and server, helping the browser load them faster. We recommend GZIP, a free data compression software that’s supported by most website hosts and can be used as a plugin on WordPress.
- Compressing and resizing your image and video file sizes with an online file compression tool. The smaller the file dimension is, the faster their loading time will be. We recommend TinyPNG and ILoveIMG as excellent free options, and Imagify if you want to compress images directly from WordPress. All options will retain your file’s quality.
- Telling the browser to preload important resources above the fold (the area of your page visible without scrolling). You can prioritise particular resources by adding this script to your webpage’s code.
Learn more ways to improve your LCP score here.
How To Improve First Input Delay (FID)
Your First Input Delay score may be low because the browser is busy processing other requests and can’t immediately respond to the user’s actions. It is nearly always tied to large JavaScript files, which have long execution times that cause poor interactivity.
Factors that cause a low First Input Delay score include:
- Heavy JavaScript files
- Having too many plug ins, especially JavaScript based ones
- Heavy WordPress themes with JavaScript files
You can improve your First Input Delay score by:
- Remove all unused JavaScript files and plugins. If the JS is not essential for your page, they are only slowing down your download time and impacting interactivity. PageSpeed insights will identify which unused JS files you can remove or delay in the Opportunities section.
- Delay loading non-essential JavaScript files. You can choose to delay loading files until user interaction, such as scrolling or clicking, or to only load them when needed. By prioritising necessary JS and delaying the rest, you can improve your FID score. Free plugins, such as Flying Scripts, help achieve this.
- Compress text files. Your browser will be able to load smaller text files faster, therefore improving interactivity time. The easiest way to do so is with Gzip or Brotli plugins – learn how to enable automatic Gzip compression on WordPress here.
- Split long JavaScript scripts into smaller chunks. The main browser takes longer to load long JS scripts because the task cannot be interrupted, therefore, breaking any long files into smaller ones will allow the browser to respond to use inputs faster.
Learn more ways to improve your FID score here.
How To Improve Cumulative Layout Shift (CLS)
Your Cumulative Layout Shift score has the most significant impact on mobile because it’s tougher for browsers to optimise performance on smaller viewports and weaker networks and Central Processing Units (CPU). Because the majority of brand discovery and shopping now occurs via mobile, it’s important to prioritise.
Factors that cause a low Cumulative Layout Shift score include:
- Images, videos, ads and embeds without dimensions
- Dynamically injected content (content that changes based on the user)
You can improve your Cumulative Layout Shift score by:
- Specify your image and video size. When browsers don’t know how much space to leave for media it causes layout shifts, so by dictating your media’s size attributes, the browser knows how much space to leave for the media in advance.
- Load ad content below what the user is viewing, instead of above. Google Publisher Tag has more information about reserving space for ads to minimise layout shifts, but the basic idea is to assign fixed ad dimensions.
Learn more ways to improve your CLS score here.
Ready To Kick Your Goals?
At Springboard, we believe the Core Web Vitals are important as part of a strong, wholesome SEO strategy. SEO can be really overwhelming, so we work with our clients to explain and optimise on-page and off-page factors that have a significant impact on their Google search ranking.
Let us help you appear higher on Google. Reach out to our team today to get your digital marketing strategy looking slick.
