Core web vitals will now form the most important metrics through which Google will assess how a publisher’s website is performing.

User experience is one of the key aspects for a website to dominate the search engine result pages. Gone are the days when publishers could rank their webpages based on keyword stuffing. With every passing Google broad core algorithm update, search results are more and more focused on satisfying user intent and experience. Therefore, publishers need to improve the overall performance of their website for ensuring a positive user experience. 

Google has a variety of tools for measuring the performance of a page. But some publishers may find it daunting to use these effectively due to their technical complexity.  In order to make things slightly easier for publishers, developers, and marketers, Google has recently launched a set of performance metrics called Web Vitals. 

Among different Web Vitals are Core Web Vitals, metrics that matter the most. In this comprehensive guide, we are going to talk about Core Web Vitals and their importance, how publishers can improve scores for these metrics, and their future in the ad tech industry. 

Core web vitals will now form the most important metrics through which Google will assess how a publisher’s website is performing.

User experience is one of the key aspects for a website to dominate the search engine result pages. Gone are the days when publishers could rank their webpages based on keyword stuffing. With every passing Google broad core algorithm update, search results are more and more focused on satisfying user intent and experience. Therefore, publishers need to improve the overall performance of their website for ensuring a positive user experience..

Google has a variety of tools for measuring the performance of a page. But some publishers may find it daunting to use these effectively due to their technical complexity.

In order to make things slightly easier for publishers, developers, and marketers, Google has recently launched a set of performance metrics called Web Vitals.

Among different Web Vitals are Core Web Vitals, metrics that matter the most. In this blog, we are going to talk about Core Web Vitals and their importance, how publishers can improve scores for these metrics, and their future in the ad tech industry.

After a lot of research, Google has come up with three metrics that are of high priority when it comes to measuring how users interact with a website: Loading, Interactivity, and Visual Stability.

The metrics that make up Core Web Vitals are:

1. Largest contentful paint (LCP)- loading

2. First input delay (FID)- interactivity

3. Cumulative layout shift (CLS)- visual stability

As has been already mentioned, these metrics are part of a larger concept named Web Vitals that also focus on measuring user experience. 

Core Web Vitals basically quantify the very first impression that the user gets after opening a website. By using these metrics, publishers can check how users are engaging with their sites. This benefits publishers because if the user engagement is high, publishers get more opportunities to optimize their ad revenue 

Let’s take a detailed look at the three Core Web Vitals.

Lighthouse introduced Largest Contentful Paint as one of the core performance metrics in 2020

Later on, Google announced LCP as an important ranking factor and made it a part of Core Web Vitals. As a Core Web Vital metric, LCP accounts for 25% of the Performance Score, which makes it one of the most important metrics to optimize.

In this section, we take a thorough look at Largest Contentful Paint and also learn ways to optimize the best LCP scores:

What is the Largest Contentful Paint?

LCP measures how long it takes for a web page to render the ‘largest content element’ available on the page. Here, the ‘largest’ content could be anything including:

A “content element” is any HTML element, such as: 

• An image element

• A video element

• An SVG elementAn element with the background image loaded via the URL function 

• <h1>, <h2>, <div>, <ul>, <table> or other block-level elements

According to Google:

“LCP is an important user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded – a fast LCP helps reassure the user that the page is useful.”

First Contentful Paint vs. Largest Contentful Paint

We recently published a post of ‘First Contentful Paint,’ and some of you may wonder how that is different from the ‘Largest Contentful Paint.’ So, here’s an easy explanation for the same:

First Contentful Paint: FCP measures how long a page takes from the initial load to the first rendered content displaying on the screen.

Largest Contentful Paint: LCP measures the render time of the largest image or text block visible in the viewport, compared to when the page first started loading.

What is a good LCP score?

According to Google’s guidelines, a good LCP score should be less than 2.5 seconds. This ensures good UX.

LCP thresholds are, as follows:

Good: LCP of 1200 milliseconds or less (nothing to do here)

Needs improvement: LCP between 1200 and 2400 milliseconds

Poor = LCP higher than 2400 milliseconds.

How to measure Largest Contentful Paint Score?

Webmasters or publishers can perform a Largest Contentful Paint test  by using the following tools:

1. Chrome User Experience Report;

2. PageSpeed Insights;

3. Search Console (Core Web Vitals report).

4. Chrome DevTools.

5. Lighthouse.

Since LCP is a metric approved by Google, we can easily find LCP score in all these tools. 

How To Improve First Contentful Paint (FCP) time:

Now that we’ve understood what FCP is and why is it important, let’s take a look and how one can improve the FCP timing:

Eliminate Render Blocking Resources:

Render blocking resources are the files that on a website that must render. These may include fonts, CSS files, JavaScript, and HTML. These files are called ‘render blocking’ because they take priority over other elements of the page (for example, the images, text, or other user-facing content). 

This delay creates a sudden increase in LCP since render blocking files are usually large in size, and they don’t even contain site content. 

LCP time can be reduced if you remove render resources from the critical rendering path, defer non-critical resources, or remove unnecessary JS.

Remove Unnecessary CSS:

If you’ve files in your stylesheets that aren’t being used, but take significant speed, there’s no point keeping them. Hence, any unused or old code should be removed so that it doesn’t impact the loading time of your site. 

Minify HTML, JavaScript, and CSS:

Minification of HTML, JavaScript, and CSS can significantly reduce the LCP time of your website. Minification is removing all extra characters such as spaces from your site’s CSS, HTML, and JavaScript files. 

While spacing helps readability, browsers don’t need them. These spaces in fact take up bytes and minimizing them would decrease page size and improve First contentful paint timing.

Optimize image size:

Always use images of right sizing.You can use an image optimizer plugin like SSmush or Hummingbird to reduce image size. Reducing size avoids overloading, which can generate a high LCP. You can also use an image CDN to reduce LCP time. 

Choose a good hosting service:

Your hosting service also impacts pages’ loading time. Thus, try a good hosting provider that offers an adequate infrastructure for your site’s size and volume of access.

Bottomline:

Google considers Largest Contentful Paint to be a relevant part of Core Web Vitals. Hence it is a vital parameter to be evaluated and sites must achieve a good score in it.

Since LCP is related to page loading time, it directly influences how Google ranks a site on the results page. User experience is a fundamental parameter for sites to be found on the web. That’s why it’s not enough to have attractive products, good UX, or quality content. Good LCP score is not only favorable for the user but also ensures that Google will rank the content well.

In 2019, Google announced that they’ll rank websites on the basis of two more performance metrics: First Contentful Paint & First Input Delay. Later on, Google introduced three Core Web Vitals: First Input Delay, Cumulative Layout Shift.

In this section, we’ll talk about First Contentful Paint since it has continued to be an important user experience metric and accounts for the overall performance score of a website

What is the First Contentful Score?

A website’s First Contentful Paint is when the browser retrieves and renders the first DOM element of the page. Canvas elements, images, or tex, non-white elements, and SVGs are considered DOM content.

In simple words, FCP is the time it takes for a website user to see any content on their browser once they’ve clicked on the website link. Hence, a blazing fast FCP ensures that users find something useful as soon as they land on the page.

In this section, we’ll talk about First Contentful Paint since it has continued to be an important user experience metric and accounts for the overall performance score of a website

In the previous parts of this guide, you may have come across the term ‘First Input Delay’. If you’ve read it, you might wonder what is the difference between First Contentful Paint and First Input Delay?

Difference between First Contentful Paint & First Input Delay:

Have you ever come across a page where content on the page suddenly changes? Without warning, the text moves, there’s additional white space, and you’ve lost your place.

You probably had that annoying experience because of ‘Cumulative Layout Shift.’e Cumulative Layout Shift was introduced as a performance metric by Lighthouse in 2020.

Later on, CLS also became one of the metrics that make up Core Web Vitals.

In this blog post, we’ll learn what Cumulative Layout Shift (CLS) is, why it’s part of the Core Web Vitals metric, how it happens, how to measure it, and how webmasters can optimize it.

For the unversed, First paint is when a render is detected by the browser. This render could be as subtle as the background color:

Have you ever come across a page where content on the page suddenly changes? Without warning, the text moves, there’s additional white space, and you’ve lost your place.

You probably had that annoying experience because of ‘Cumulative Layout Shift.’e Cumulative Layout Shift was introduced as a performance metric by Lighthouse in 2020.

Later on, CLS also became one of the metrics that make up Core Web Vitals.

In this blog post, we’ll learn what Cumulative Layout Shift (CLS) is, why it’s part of the Core Web Vitals metric, how it happens, how to measure it, and how webmasters can optimize it.

How to Measure First Contentful Paint?

Webmasters or publishers can measure the First Contentful Paint of their website through multiple tools including: 

1. Lighthouse

2. WebPageTest

3. Chrome DevTools

4. PageSpeed Insights

5. Chrome User Experience Report

How to Measure First Contentful Paint?

According to Google’s guidelines, the first contentful paint of a webpage should occur within 1.8 seconds. When a web page loads within 2 seconds, it ensures a good user experience to the visitors since they can access the information faster. If a website’s first contentful painting takes longer than 3 seconds to load, it is considered slow.

Google rate FCP timing in three different categories:

1. Good – between 0 seconds and 1.8 seconds

2. Needs Improvement – between 1.8 seconds and 3 seconds

3. Poor – over 3 seconds

How To Improve First Contentful Paint (FCP) time:

Now that we’ve understood what FCP is and why is it important, let’s take a look and how one can improve the FCP timing:

Eliminate Render Blocking Resources:

Render blocking resources are the files that on a website that must render. These may include fonts, CSS files, JavaScript, and HTML. These files are called ‘render blocking’ because they take priority over other elements of the page (for example, the images, text, or other user-facing content). 

This delay creates a sudden increase in FCP since render blocking files are usually large in size, and they don’t even contain site content. FCP time can be reduced if you remove render resources from the critical rendering path, defer non-critical resources, or remove unnecessary JS. 

Reduce Server Response Time:

TTFB or Time to first byte is the total time it takes for a browser to receive the first byte of a page content. If TTFB is less, the FCP timing will be less too. 

FCP = TTFB + Render Time + Content Load Time 

As you can see, FCP is dependent on the TTFB. Hence optimizing TTFB would automatically improve the FCP score. You can reduce the TTFB by using a quality CDN, enabling caching for your website, and choosing a fast hosting provider. 

Remove Unnecessary CSS

If you’ve files in your stylesheets that aren’t being used, but take significant speed, there’s no point keeping them. Hence, any unused or old code should be removed so that it doesn’t impact the loading time of your site.

Minify HTML, JavaScript, and CSS

Minification of HTML, JavaScript, and CSS can significantly reduce the FCP time of your website. Minification is removing all extra characters such as spaces from your site’s CSS, HTML, and JavaScript files. While spacing helps readability, browsers don’t need them. These spaces in fact take up bytes and minimizing them would decrease page size and improve First contentful paint timing. 

Since Google values page speed as an important performance metric, First Contentful Paint will continue to be an important metric for websites. Having a low FCP timeline not only keeps users on your site but also enhances overall user experience. We agree, FCP can be a tough metric to nail down but a little optimization on reducing FCP will certainly increase UX and your site’s overall loading times. 

Have you ever come across a page where content on the page suddenly changes? Without warning, the text moves, there’s additional white space, and you’ve lost your place.

You probably had that annoying experience because of ‘Cumulative Layout Shift.’e Cumulative Layout Shift was introduced as a performance metric by Lighthouse in 2020.

Later on, CLS also became one of the metrics that make up Core Web Vitals.

In this blog post, we’ll learn what Cumulative Layout Shift (CLS) is, why it’s part of the Core Web Vitals metric, how it happens, how to measure it, and how webmasters can optimize it.

Let’s understand this performance metric by breaking it down:

Cumulative: It means an increase in quantity

In Closing

At the present time, we advise publishers to get as familiar as they can with Core Web Vitals and Web Vitals. The sooner they learn how to optimize their websites for providing the best possible user experience, the better it will be for them when the move by Google actually takes place.

The good news is that publishers can now have quantified knowledge about the performance of their pages. In addition to this, they are provided with guidance on how to fix issues that are hampering with the user experience of their pages. All this will help publishers to enhance user engagement for their website, increase traffic, and earn more revenue.

Once publishers get through the task of understanding important details about Core Web Vitals, they will see that these metrics will prove to be of great use.