What are core web vitals and why is it important for SEO?

Google’s new Pagespeed Insights (PSI) report comes with a redesigned UI and a clear focus on Core Web Vitals.

Tools that you will need:

• Google Search Console
• Google Pagespeed Insights Tool

What are Core Web Vitals?

Core web vitals are the criteria that Google checks when evaluating the user experience of a web page. The factors that Google evaluates are related to page speed, interactivity, and visual stability.

The three core web vitals include:

• Largest contentful paint (LCP)
• First input delay (FID)
• Cumulative layout shift (CLS)

Core web vitals are a major component of the page experience score that Google assigns to each page. These factors help Google assess the quality of a web page from the perspective of a user.

If a page performs poorly for its core web vitals, it would affect search rankings, as this experience factor is now part of Google’s ranking algorithm.

Essentially, websites that provide a poor user experience for users will be negatively impacted in terms of SEO.

Google Search Console: Core Web Vitals report

You can view the latest report on the core web vitals for your pages by visiting Google Search Console.

The Core Web Vitals report is found under the “Page Experience” section. You can check your website’s core web vitals for both mobile and desktop.

Google only generates core web vitals reports for indexed URLs. If your website is new, it may take several days for Google to analyze the pages and post a report.

Google groups URLs together based on their performance:

• Poor
• Needs improvement
• Good

You can drill down into various sub-menus to explore a top-level report for mobile or desktop usage for all indexed URLs.

Why are Core Web Vitals important for SEO?

Imagine a page that takes too long to load and keeps users from quickly navigating to the information that they seek. Or a page that is not visually stable and provides a bad experience.

Google wants to ensure that its search results provide the best answer to users and that includes user experience. It is no longer just about keywords and backlinks, Google is placing more importance on the quality of a page based on the experience it provides users.

User experience is becoming increasingly important for Google and how it ranks pages. In other words, what hurts user experience will hurt SEO.

In the past few years, Google has been emphasizing the importance of page experience. Serious webmasters have been working on fixing their site speed and user experience to prepare for this update.

Source: Google search central

But page experience is not new to Google.

It has been part of the many existing search engine signals used by Google to rank websites, including mobile-friendliness, HTTPS, safe-browsing, and interstitial pop-ups.

Core web vitals is simply another update, that will also be a part of the page experience ranking factor.

If a page takes longer to load, it will likely have a higher bounce rate.

Google states that increasing the loading time from one second to three seconds increases bounce rates by an average of 32%. Increasing the loading time to six seconds could increase bounce rates by 106%.

Luckily, Google announced the changes to its algorithm months ahead of the updates.

Webmasters have time to check and improve the vitals on the pages that they manage before page experience starts impacting search rankings.

What Is the Largest Contentful Paint (LCP)?

The largest contentful paint (LCP) refers to the amount of time needed to render the largest content element visible in a viewport.

The largest element is often a video, an image, or a large block of text.

Source: web.dev

Unlike other page loading speed metrics, LCP does not track the entire time needed for all elements to load.

Tracking the time needed for the largest element to load provides a better indication of the typical user’s experience. So that is what LCP measures – largest contentful paint.

When the largest element appears on the screen, users (and so, search engines) assume that the page is ready to navigate.

The LCP score for your web pages indicates how the pages perform in the real world. Google uses data from Chrome browsers to analyze loading times.

The LCP is measured in seconds and ranked as good, needs improvement, or poor.

Here are the boundaries that Google uses to measure Largest Contentful Paint:

• Good – less than 2.5 seconds
• Needs improvement – up to 4 seconds
• Poor – longer than 4 seconds

Ideally, all your URLs should achieve an LCP score of 2.5 seconds or less. Google groups the URLs into those three categories, allowing you to quickly see which pages need improvement.

Google Search Console > Core Web Vitals

PageSpeed Insights

Using Google PageSpeed Insights tool, you can also find the LCP score of your page.

How to Improve LCP

If any of your URLs appear in the “needs improvement” or “poor” categories, find ways to speed up the loading times.

Google makes this process easy, as potential problems that impact loading times are found under the “Diagnostics” section of the pagespeed insights report.

Use Google PageSpeed Insights Report to find the largest contentful element on your page

The diagnostics section identifies the largest contentful paint (LCP) element, which is used to determine the LCP score.

In this example, we can see that the largest contentful element for this page is a slider image.

Reduce image file size

Shrinking the file size of the largest element should positively impact the LCP time.

Images are often the largest files.

• Resize images to fit the page instead of forcing the browser to downsize images.
• The resolution should also be set to 72 dots per inch (dpi), which is the highest resolution that most browsers support.

Along with optimizing the largest elements on the page, the following steps may improve the LCP score:

• Use a better web host
• Eliminate unnecessary scripts
• Avoid inline CSS and JavaScript code
• Minify JavaScript and CSS files
• Avoid using render-blocking scripts

Shared web hosting may cause your web pages to load slower during peak usage of other sites hosted on the same shared server.

Upgrading to dedicated hosting or a cloud hosting solution may provide faster load times.

For those on a budget, switching to a more reliable web host for shared hosting may also boost page speed.

Siteground Web Hosting

I’m using Siteground’s web hosting and they come with pretty awesome site speed optimization features, including fast server response time.

Server response time is correlated to Time to First Byte (TTFB) and this is a huge part of long LCP load times. Siteground’s TTFB is 290ms which is one of the fastest in the industry.

Remove unnecessary scripts

Remove any unnecessary scripts from the page. This may include scripts for various widgets or plugins that the page does not necessarily need, such as a social media feed or dynamic ads that appear in the top third of the page.

Avoid using CSS and JavaScript in the HTML of the web page. Placing large sections of CSS and JavaScript code in separate files can reduce load times for repeat visits, as browsers cache the files.

Minification

Using separate CSS and JavaScript files also makes it easier to minify the code using an online minification tool. Minification is the process of shortening the names of variables and eliminating unnecessary blank space to reduce file sizes.

Defer Javascript

Placing links to JavaScript files at the end of the body of the HTML or using the “async” attribute can also reduce the initial load time by letting the LCP element load first.

What Is First Input Delay (FID)?

First input delay (FID) is the time needed for the browser to respond to a user’s first input.

After a user visits a web page, they may select an option from a menu, begin filling fields in a form or click on an interactive element. The browser then responds to the user’s request.

A long delay reduces the quality of the user experience for the page. Users may become frustrated or leave the page if the browser takes too long to respond.

Good FID scores are 100 milliseconds, poor values are greater than 300 milliseconds and anything in between needs improvement.

Source: Web.dev

Google uses the following metrics to rate the FID:

• Good – 100 milliseconds or less
• Needs improvement – up to 300 milliseconds
• Poor – more than 300 milliseconds

The FID determines when the page first becomes interactive. However, not all pages require the user to interact immediately. For example, a user may only scroll down the page when reading a blog post.

The FID becomes more important when dealing with pages that require user interaction, such as a login page or an online form.

Google analyzes the response time for interacting with the following elements:

• Text fields
• Checkboxes
• Radio buttons
• Select dropdowns
• Links

The FID is the user’s first impression of the responsiveness of the site. Long delays also indicate interactivity issues, which hurt user experience.

How to Improve FID

Many of the steps used for improving the LCP may also improve the FID of a web page. Long delays often occur when the browser is busy making server requests and rendering content.

Google recommends the following steps for improving FID:

• Reduce JavaScript execution time
• Reduce the impact of third-party code
• Minimize main thread work
• Reduce request counts and transfer sizes

Reducing file sizes, minifying code, and eliminating unnecessary scripts can shorten the wait time for a page to become interactive.

Code splitting

Experienced webmasters may also use code splitting to reduce JavaScript execution time.

Code splitting involves separating JavaScript into separate bundles and only loading what is necessary when the page initially loads. The remaining code is sent when requested by an event listener.

Removing third-party code

Removing third-party code also improves FID but is not always an option. If you must keep a third-party script, load the script using the “async” attribute to prevent blocking document parsing, which can reduce the load time for other elements on the page.

If the third-party server hosting the script is slow, consider self-hosting the script.

Minimizing main thread work

Minimizing main thread work reduces FID by allowing the browser to render content more efficiently.

The main thread processes the HTML, builds the DOM objects, parses CSS, and executes scripts. It is also responsible for processing user events.

Along with the previous page speed improvements, simplifying the layout of your page may reduce main thread work.

Review the HTML and condense elements to create a streamlined layout.

Reduce request counts

Reducing request counts also improves FID. Loading a page may require the browser to make hundreds of requests.

Browsers make requests to receive documents, media, scripts, images, stylesheets, and other files needed to render the web page.

Minimize requests by combining resources whenever possible.

For example, you may not need three different CSS files for a single page. You can also utilize browser caching to limit requests.

What Is Cumulative Layout Shift (CLS)?

Cumulative layout shift (CLS) is the third component of the core web vitals.

It measures the total layout shift scores for each unexpected layout shift that occurs when loading a web page. The CLS essentially measures the stability of the page.

A layout shift occurs when elements on the page move around the viewport of the browser as the page loads.

For example, a block of text may appear across the entire width of the viewport until a sidebar loads and pushes it to the left or right.

Google totals the score of layout shifts that occur, resulting in the following rankings:

• Good – 0.1 or less
• Needs improvement – up to 0.25
• Poor – greater than 0.25

Source: web.dev

The scores are based on two factors related to each layout shift – the impact fraction multiplied by the distance fraction. The impact fraction is the fraction of the viewport that the shifted element takes up.

For example, if a block of text takes up 75% of the page, it has an impact fraction of 0.75. The distance fraction is the distance that the element moves.

A low CLS indicates that the page produces no or limited shifting of elements as the page renders.

A high score indicates that the page experiences frequent shifting, which can confuse users or force them to click on a link by mistake.

You want a low CLS.

How to Improve CLS

Layout shifts typically occur when the browser loads elements above existing content.

Common causes include images or videos with unknown dimensions or fonts that render in a smaller or larger size.

Define height and width attributes for images and videos

To avoid layout shifts and improve CLS, always include the size attributes when adding images or video to the page. If the size is unknown, content that appears after the element may shift as the image or video loads.

CSS aspect ratio boxes

An alternative option is to reserve space using CSS aspect ratio boxes. A ratio box ensures that the browser reserves space while the larger element loads.

Remove ads

Advertisements are also a common source of layout shifts. Removing ads may improve CLS. If you must include ads on the page, use CSS to reserve space or avoid placing them above the main content.

iframes and embedded widgets

iframes and embedded widgets may cause layout shifts if the size is not defined. As with ads, you may also include a CSS placeholder to reserve space.

Dynamic content

Dynamic content, such as sign-up forms, pop-ups, sidebars, and notices may create layout shifts when placed above existing content.

Dynamic content takes longer to load, allowing text and other content to load first. Either use a placeholder or avoid placing dynamic content above existing content.

In the end, reviewing and optimizing core web vitals are essential parts of an effective SEO strategy.

The LCP, FID, and CLS scores are based on how long it takes for elements to load or for the browser to respond to user input.

Streamline your pages to deliver a better user experience and increase your search rankings.