Optimize your
web speed.
Improve your conversions.

First Contentful Paint (FCP)

Relevance in Google Lighthouse: 15%

First Contentful Paint is the first of six metrics used by Google Lighthouse to measure the optimization of any website.

FCP measures the speed at which the browser renders the first DOM signal, that is, the first code that is printed in the browser. The shorter the rendering time, the higher the FCP score in Google’s Lighthouse. For example, if the web renders in 1.5 seconds, it will have a score of 99 in First Contentful Paint.

This part is one of the most difficult to optimize and in which we have the most experience since it requires the speed of the server, CDN, cache, type of HTTP connection and connectivity with the database among others.

It is also essential for this point to optimize the load of any element before the part of our website since any previous load will increase the time in which the user starts to see our website and therefore reduce the load and interaction of the user.

Official source

Speed Index (SI)

Relevance in Google Lighthouse: 15%

Speed Index is the second point to consider to improve the quality of our website. This metric measures the speed of viewing content when the web is loading. To do this Google Lighthouse makes a video from the first rendering of the web and the full load thus managing to measure the speed of the visualization.

For this section, it is essential that we reduce and compress the JavaScript runtime, have the text visible even if our fonts have not yet been loaded, and minimize the DOM of the central content of our website, among others.

Official source

Largest Contentful Paint (LCP)

Relevance in Google Lighthouse: 25%

Largest Contentful Paint is an important user-centric metric for measuring the perceived upload rate at which it marks the point in the page load timeline when the main content of the page is likely loaded: a fast LCP helps assure the user that the page is useful. That is, this metric measures the load time of the page’s useful content by determining what content has been uploaded and whether it is relevant to the user.

This point is one of the most interesting in web optimization and that is why Google has given it so much importance since if the content that has been uploaded the fastest it turns out not to be the main content (navigation, logo, etc.) the display of the content that the user who is waiting for the end of the upload of our website will be of minor importance.

To do this, the LCP metric reports the rendering time of the largest image or block of text visible within the viewport.

To provide a good user experience, sites should strive to ensure that painting with larger content occurs within the first 2.5 seconds of the page starting to load.

Official source

Time to Interactive (TTI)

Relevance in Google Lighthouse: 15%

TTI measures the time it takes for a page to become fully interactive. A page is considered fully interactive when the web displays the entire content, event handlers have been registered for most visible items, and the page responds to user interactions within 50 milliseconds. It also determines when the user can make the first input.

Measuring TTI is important because some sites optimize content visibility regardless of interactivity. This can create a frustrating user experience because the site seems to be ready, but when the user tries to interact with it, nothing happens.

A page with an interaction time of 2.2 seconds will have a score of 99 in TTI Google Lighthouse.

Official source

Total Blocking Time (TBT)

Relevance in Google Lighthouse: 25%

Total Blocking Time measures the total amount of time a page is locked until it responds to user input, such as mouse clicks, screen taps, or keystrokes.

The score is calculated by adding up the locking part of all long tasks between First Contentful Paint and Time to Interactive. Any task that runs for more than 50 ms is a long task that determines poor page optimization. These task runtime lengths are typically due to inefficient loading, analyzing, or running unnecessary JavaScripts.

To do this, it is necessary to optimize the elements of the DOM that interact with Java Script and keep the most necessary for the operation of our website without reloading the page of unnecessary JS calls.

Official source

Cumulative Layout Shift (CLS)

Relevance in Google Lighthouse: 5%

Cumulative Layout Shift measures the total sum of all individual layout change scores for each unexpected layout change that occurs during page loading.

That is, it contemplates that when the web is loaded the design structure that is from the first visualization until it finishes loading is the same.

This for the user can be frustrating because if you try to interact with the web while it is loading and at the same time, the layout changes or the elements of the screen move, the user will end up interacting with other parts or buttons of the web that they do not want.

CLS helps quantify how often users experience unexpected design changes so a low CLS helps ensure that the page is enjoyable.

To provide a good user experience, websites must have a CLS score of less than 0.1.

Official source