Metrics to help understand page speed and user experience.
If you’re just getting started check out web.dev/metrics first.
Make a request to your page with a tool and evaluate performance. Be sure to make it realistic (e.g. by throttling network and CPU) and reduce noise (e.g. by running multiple times).
Collect performance data from real users visiting your page. Be mindful of the actual overhead, as it runs in your user’s browser and watch out for browser support of more recent metrics (e.g. compared to your user-base).
visibilitychange to account for survivorship bias.
The critical rendering path is everything that happens between receiving network bytes and rendering something on the screen. To optimize any rendering metrics like First Contentful Paint (FCP) or Speed Index you have to understand how the critical rendering path works.
The browser Main Thread that handles user input is also the one executing JavaScript (among many other things). Blocking the Main Thread for too long can make your page unresponsive.
A user perceives any visual change within 100ms as instant. Any task blocking the Main Thread by taking longer than 50ms is considered a long task (as it might make the browser unresponsive to user input).
To optimize interactivity metrics like Total Blocking Time (TBT) and First Input Delay (FID) you have to understand long tasks and how to avoid them as much as possible.
It’s important to track metrics relevant to users and their experience. To measure the perceived performance we can choose metrics by framing them around a few key questions.
The First Contentful Paint (FCP) metric measures the time from when the
page starts loading to when any part of the page’s content is rendered on
the screen. For this metric, “content” refers to text, images (including
background images), <svg> elements, or non-white
<canvas> elements.
The Largest Contentful Paint (LCP) metric reports the render time of the largest content element visible within the viewport.
A layout shift occurs any time a visible element changes its position from one frame to the next. CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
The Visually Complete is the time from the start of the initial navigation until the visible (above the fold) part of your page is no longer changing. (e.g. WPT measures this using a color histogram of the page based on video/screenshots recording).
Speed Index shows how quickly the contents of a page are visibly populated (lower numbers are better). This is done by frequently measuring visual completeness during loading. The quicker the page is more visually complete the lower the value.
Element Timing captures when specific elements are painted by the browser. Hero elements can be defined as the largest h1, img or background image (or custom ones using the Element Timing API)
Time to interactive is the time it takes for the page to become fully interactive (as in Main Thread quiet for 5s). Sometimes called Consistently Interactice and not to be confused with First Interactive or First CPU Idle. (Warning: one of the most confusing and misunderstood metrics).
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.
First Input Delay (FID) measures the time from when a user first interacts with your site to the time when the browser is actually able to respond to that interaction. An interaction can be when users click a link, tap on a button, or use a custom, JavaScript-powered control.
The maximum potential First Input Delay that your users could experience. Basically equals to the duration of the longest long task on the browser Main Thread.
Network timing field data can uncover a non-optimized TLS setup, slow DNS lookups or server side processing and issues with CDN configuration. See also a separate section about measuring transferred bytes.
// Measuring DNS lookup time
var pageNav = performance.getEntriesByType("navigation")[0];
var dnsTime = pageNav.domainLookupEnd - pageNav.domainLookupStart;// Quantifying total connection time
var pageNav = performance.getEntriesByType("navigation")[0];
var connectionTime = pageNav.connectEnd - pageNav.connectStart;
var tlsTime = 0; // <-- Assume 0 by default
// Did any TLS stuff happen?
if (pageNav.secureConnectionStart > 0) {
// Awesome! Calculate it!
tlsTime = pageNav.connectEnd - pageNav.secureConnectionStart;
}You can measure the byte weight of your assets with a number of tools. You would normally track these Lab only as the numbers are usually the same in the Field (but be mindful of device type or geographical location specific pages).
Measuring own (and third-party) JavaScript bytes is crucial as JavaScript is the main cause of high TTI or FID values.
The User Timing API allows the developer to create application specific timestamps that are part of the browser’s performance timeline. e.g. you can create a user timing mark to measure when your JS has loaded for a specific component on the page.
Surface any backend server timing metrics (e.g. database latency, etc.) in the developer tools in the user’s browser or in the PerformanceServerTiming interface.
The frame rate is the frequency at which the browser can display frames. A frame represents the amount of work a browser does in one event loop iteration such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc. A frame rate of 60 fps (frames per second) is a common target for a good responsive user experience. This means the browser should process a frame in about 16.7 ms.
requestAnimationFrame
To the extent possible under law, Csaba Palfi has waived all copyright and related or neighboring rights to this work.