Back in mid 2020, Google announced essential metrics for a healthy website. These metrics are in turn to help site owners in achieving an overall great user experience. 

Within this article, we will look into these metrics and how to test them within a website using Googles’ own tools.

Table Of Contents


What Is Google Lighthouse

Core Web Vitals

  1. Largest Contentful Paint (LCP)
  2. First Input Delay
  3. Cumulative Layout Shift

Tips to Improve Your Core Web Vitals Scores

Conclusion

What Is Google Lighthouse

Google Lighthouse is a tool that helps you improve the performance and quality of your website.


Using the tool, users are in a position to carry out an audit of a website, mainly focussing on core web vitals.

Lighthouse generates a report on the following key areas:

1. Performance
2. Accessibility
3. Best Practices
4. SEO
5. Progressive Web App

Core Web Vitals


These are standardized factors that Google uses to understand users’ experience of a web page.


User experience is one of the main factors that Google uses in page ranking within search results.

The main core vitals include:

1. Largest Contentful Paint (LCP)

This metric checks when the most important part of a page loads, where this part forms most of the content within the page and is readable to the user. The content can be in the form of images, text,videos e.t.c.

This is quite an integral part of the user experience as web users do not want to have a long waiting time for any particular content within a page to load. If for example you have a page with minimal text and the rest of the content is mainly videos, the videos will be the LCP and hence it would be vital to have them optimized.

When it comes to page speed, LCP mainly focuses on what really matters within a page.

How to check your sites’ LCP score

In order to determine your sites’ LCP score, you can then use Lighthouse for this.

In order to run Lighthouse, you can use the chrome browser dev tools. To do so, carry out the following:

i) Visit the site you wish to audit, in incognito mode

ii) Access the Chrome dev tools

iii) Enable the Lighthouse if not enabled and on the lighthouse tab

iv) Select all the categories and Device you wish to carry out the audit

v) Generate the report

vi) With this done, you should have a report on the page:

Another alternative that can also be used is PageSpeed Insights.

Below is a sample test:

For a good LCP, the load time should be at least within 2.5 seconds. If the content takes more than this to load, then this would lead to a poor user experience.

2. First Input Delay (FID)

This measures the amount of time it takes (delay) for a web browser to respond to users’ first interactions. Examples of such interactions include; clicking navigation links, button clicks, field inputs, e.t.c.

Similar to LCP, this can be measured via PageSpeed Insights or Lighthouse.

An FID of 100 ms is considered quite good and there will be no noticeable delays by users. If however it exceeds 300ms, then it is considered poor and delays are noticeable by Google algorithms.

3. Cumulative Layout Shift (CLS)

This metric helps in determining the website visual stability by determining how many times components within the website jump when loading.


The more the jumps, the poor the user experience. Take for example a loading CTA button and in the background there is a slowly loading video. Initially the button may be loaded towards the top, but as the video loads, the positioning of the CTA moves towards the bottom and a user is not in a position to click on it, till the video is fully loaded.

Similar to LCP,  this can be measured via PageSpeed Insights or Lighthouse as can be seen from the example below:

Tips to Improve Your Core Web Vitals Scores

1. Increase the server response time


Having a fast server response time greatly contributes to high speed metrics, which include LCP. The faster the server response time, the lesser the page load time.

One of the ways to ensure a fast server response time is using a good hosting provider with good performance.

2. Optimize and compress images

Images are likely to form the LCP of a website. It is hence recommended to have the images optimized in order to ensure that the webpage is quickly loaded and thereby having a lower LCP.

A tool such as Tinyjpg can be used to compress the images that you upload to your website.

Here is also a guide on image optimizations in WordPress.

3. Optimize Scripts and remove any unnecessarily third-party scripts

You need to check if there are third-party scripts that are slowing down your site, and if you trace them, have them removed as these are likely to have a negative impact on the FID.
Ad scripts for example may not be necessarily within multiple sections on a website, and hence it would be important to determine whether they are really necessary within particular sections on the website.

In addition, you should consider optimizing your Javascript. Some of the ways this can be carried out include: Minifying Javascript files, Inline external scripts, Eliminate render blocking resources amongst others.

4. Implementing Lazy Loading

Lazy loading will help in achieving a good LCP in that, images will only be loaded once a user scrolls to a particular section within the site, thereby reducing the load time of a web page as well.

Here is a guide on more details relating to Lazy Loading.


5. Specifying Content dimensions

Specifying dimensions to content such as images, videos and ads is quite vital as it helps in reducing the Cumulative Layout shift.

If there are no dimensions assigned to such content, more specifically within the CSS, the elements are likely to jump during page load.

Conclusion

Google mainly uses three main metrics (LCP, FID, CLS) to determine the performance, responsiveness and Visual stability of a particular website. 

It is hence important for website owners to carry out improvements to their sites based on these metrics as they will influence the site ranking.

No Comments
Comments to: Google Lighthouse Vs the 3 Core Web Vitals

    Your email address will not be published.

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Privacy Preference Center

    Functionality

    We use third-party analytics services to help understand your usage of our services. In particular, we provide a limited amount of your information (such as sign-up date and some personal information like your email address) to 3rd party service and utilize it to collect data for analytics purposes when you visit our website or use our product.

    __cfduid,intercom-id-*, intercom-lou-*, intercom-lou-*, intercom-session-*, intercom-session-*, intercom-visitor-session-*

    Performance

    These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site.

    All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.

    _ga, _gat_gtag_UA_106868094_1, _gid
    IDE
    AID
    NID,1P_JAR

    Advertising

    Necessary

    These cookies are necessary for the website to function and cannot be turned off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.

    You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.

    PHPSESSID, wordpress_logged_in_*, wordpress_sec_*, wp-settings-time-1, gdpr[privacy_bar], gdpr[allowed_cookies], gdpr[consent_types]