Use PageSpeed to improve your website performance and UX

PageSpeed is a tool for diagnosing a website's performance issues. It calculates scores by following metrics:

First Contentful Paint
Time to Interactive
Speed Index
Total Blocking Time
Largest Contentful Paint
Cumulative Layout Shift

Here I will break down what these 6 metrics mean:

First Contentful Paint

_The First Contentful Paint_timestamp is when the browser first rendered any text, image (including background images), non-white canvas, or SVG. This excludes any content of iframes but includes text with pending web fonts. This is the first time users could start consuming page content.

Time to Interactive

Time to Interactive (TTI) is a non-standardized web performance 'progress' metric defined as the point in time when the last Long Task finished and was followed by 5 seconds of network and main thread inactivity.

TTI, proposed by the Web Incubator Community Group in 2018, is intended to provide a metric that describes when a page or application contains useful content and the main thread is idle and free to respond to user interactions, including having event handlers registered.

Speed index

Speed Index(SI) is a page load performance metric that shows you how quickly the contents of a page are visibly populated. It is the average time at which visible parts of the page are displayed. Expressed in milliseconds, and dependent on the size of the viewport, the lower the score, the better.

The calculation calculates what percent of the page is visually complete at every 100ms interval until the page is visually complete. The overall score, the above the fold metric, is a sum of the individual 10 times per second intervals of the percent of the screen that is not-visually complete

Total Blocking Time

The Total Blocking Time (TBT) metric measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness.

The main thread is considered "blocked" any time there's a Long Task—a task that runs on the main thread for more than 50 milliseconds (ms). We say the main thread is "blocked" because the browser cannot interrupt a task that's in progress. So in the event that a user does interact with the page in the middle of a long task, the browser must wait for the task to finish before it can respond.

Largest Contentful Paint

Developers today don’t have a reliable metric that correlates with their user’s visual rendering experience. Existing metrics such as First Paint and First Contentful Paint focus on initial rendering, but don’t take into account the importance of the painted content, and therefore may indicate times in which the user still does not consider the page useful.

Largest Contentful Paint (LCP) aims to be a new page-load metric that:

- better correlates with user experience than the existing page-load metrics

is easy to understand and reason about
reduces the chance of gaming

Sub part for LCP⁠:

⁠Time to first byte (TTFB):

The time from when the user initiates loading the page until when the browser receives the first byte of the HTML document response. (See the TTFB metric doc for more details.)

Resource load delay:

The delta between TTFB and when the browser starts loading the LCP resource

Resource load time:

The time it takes to load the LCP resource itself

⁠Element render delay:

The delta between when the LCP resource finishes loading until the LCP element is fully rendered.

To identify the LCP resource, you can use developer tools (such as Chrome DevTools or WebPageTest) to determine the LCP element, and from there you can match the URL (again, if applicable) loaded by the element on a network waterfall of all resources loaded by the page.

A detailed breakdown on how to optimize LCP (Largest Contentful Paint)

Cumulative Layout Shift

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. (See below for details on how individual layout shift scores are calculated.)

A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than a 1-second in between each shift and a maximum of 5 seconds for the total window duration.

---

To sum up, these metrics are all surrounded by the same core value - provide a smooth user experience. The 6 metrics above relate to different aspects from the codebase, and data loading mechanism to static files or remote resources. You will need to try different factors one by one, but the outcome will definitely be worth it.