DEV Community

Cover image for Frontend Performance Glossary: The 11 Most Common Metrics
Daniil Sitdikov
Daniil Sitdikov

Posted on • Edited on

Frontend Performance Glossary: The 11 Most Common Metrics

This glossary contains a list of the most common metrics which may appear in articles, DevTools, Lighthouse, and other various tools for working with web performance. Everything is sorted in the alphabetical order.

The factual data is primarily sourced from MDN, web.dev and w3c, however the short description has been rewritten and enhanced.


CLS

Cumulative Layout Shift

Measurement Unit: Score (lower is better)

Shows how often users experience unexpected changes in the layout. It measures the instability of elements and their overall impact. For example, the banner element changes its height during the loading process, which causes a shift in the elements below.

more details


DCL

DOMContentLoaded

Measurement Unit: Milliseconds (ms)

Refers to the moment in a webpage's loading process when the DOM is completely parsed. And all deferred scripts have downloaded and executed. It doesn't wait for resources.

more details


FCP

First Contentful Paint

Measurement Unit: Milliseconds (ms)

Measures the time it takes for first bit of any actual content on a page to become visible on the screen. This includes text, images, background images, SVG elements, and non-white canvas elements.

more details


FID

First Input Delay

Measurement Unit: Milliseconds (ms)

Measures the time it takes for the browser to respond to a user's first interaction. This interaction can include clicks, hovers, touches, and other user events.

more details


FP

First Paint

Measurement Unit: Milliseconds (ms)

Marks the first time the browser renders anything visually different from the default background color of the body.


INP

Interaction to Next Paint

Measurement Unit: Milliseconds (ms)

Measures the time it takes for the browser to paint the next frame after a user interaction.

more details


L

On Load

Measurement Unit: Milliseconds (ms)

Measures the time when the entire page and its resources are fully loaded. It includes all dependent resources: stylesheets, scripts, iframes, and images.

more details


LCP

Largest Contentful Paint

Measurement Unit: Milliseconds (ms)

Measures the time when the largest content block is rendered in the user viewport. The content may include images, background images, SVG, video, and text.

more details


SI

Speed Index

Measurement Unit: Score (lower is better)

Measures how swiftly the contents of a page are visually populated. Technically, in a graph, it is represented by the area above the curve, which will approach 0 as the page loads faster.

more details


TBT

Total Blocking Time

Measurement Unit: Milliseconds (ms)

Measures the time between FCP and TTI when the main thread was blocked for long enough to prevent input responsiveness. More specifically, it's the sum of the blocking time for each long task (>50 ms). For web frameworks, this time is usually consumed by virtual DOM renders and hydration.

more details


TTFB

Time To First Byte

Measurement Unit: Milliseconds (ms)

Measures when the first byte of data from the web server reaches the browser.

more details


TTI

Time to Interactive

Measurement Unit: Milliseconds (ms)

Measures the time when than at least for 5 seconds where weren't long tasks (>50ms) and no more than two in-flight network GET requests.

more details


Top comments (0)