Analyze the speed of your website!

The overall performance of a website is calculated by many factors which differ across different search engines. In this article, I will discuss an overview of the performance metrics provided by Google.

The tool is named PAGE SPEED INSIGHTS and it measures the speed or you can say the performance of your webpage in majorly 6 different metrics. I will provide an overview of all six parameters in this article and you will be able to analyze your webpage based on these parameters. In some other articles, I will be discussing the ways to improve the page speed in these different domains. Let’s start.

First Contentful Paint (FCP)

FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. In other words, the time taken by the browser to render/display the first element may be Navbar, Header, Slider, etc.

Time to Interactive (TTI)

Time to be Interactive as the name suggests measures how long it takes a page to become fully interactive for the user. A page is considered fully interactive when all the three conditions are fulfilled:

• The page displays its useful content, which is measured by the First Contentful Paint (FCP).
• Event handlers for the page are registered for the most visible page elements.
• The page responds to user interactions within 50 milliseconds.

Speed Index (SI)

Speed Index measures how quickly content is visually displayed during page load. Lighthouse, a performance capture engine, first captures a video of the page loading in the browser and computes the visual progression between frames. This time is what we call the “speed” of the page, in which the page is loaded completely to the user. Naturally, this matrix is dependent on other mentioned factors.

Total Blocking Time (TBT)

TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses. This could be due to many reasons such as some API calls, or data fetched from the database. The sum is calculated by adding the blocking portion of all long tasks between First Contentful Paint and Time to Interactive. Any task that executes for more than 50 ms is a long task. The amount of time after 50 ms is the blocking portion. For example, if Lighthouse detects a 70 ms-long task, the blocking portion would be 20 ms.

Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) gives the measure of the time required to load the largest content of the given viewport. This metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

Cumulative Layout Shift (CLS)

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

Let’s understand this metric with an example. Let’s assume that you want to click a button, but suddenly some content like ads or an input pops up an instant before your finger lands—BOOM—the link moves, and you end up clicking something else!

I hope you understand the different performance metrics on which Google analyses your webpage. In this article, I have tried to explain the different metrics and the methods to improve them and more details about them is the task of some other article. For that stay tuned.