DEV Community

alyson farias
alyson farias

Posted on

key metrics to measure web perfomance; an short introduction

Monitoring web performance is crucial for ensuring optimal user experience and business success. Here some key metrics to consider:

1. Page Load Time

Page load time measures how long it takes for a web page to fully load in a user's browser. Faster load times improve user satisfaction and engagement.

Image description

2. Time to First Byte (TTFB)

TTFB measures the time taken by the browser to receive the first byte of response from the server after requesting a web page. It indicates server responsiveness.

Image description

Practical Example:

When a user visits a website, their browser sends a request to the server to fetch the web page. The server processes this request, retrieves the necessary data (HTML, CSS, JavaScript, images, etc.), and starts sending it back to the browser. TTFB specifically measures the time it takes from the moment the browser sends the request until it receives the first byte of data from the server.

For instance, if a user accesses a news website, the TTFB can vary depending on server load and network conditions. A fast TTFB (e.g., under 200 milliseconds) means the server responds quickly, delivering the initial content promptly. A slow TTFB (e.g., over 1 second) indicates potential issues with server performance or network latency, leading to longer wait times for users.

3. First Contentful Paint (FCP)

FCP measures the time when the browser first renders any content on the screen, such as text, images, or non-white canvas. It gives a sense of when the user perceives the page as loading.

4. Time to Interactive (TTI)

TTI measures when the page is fully interactive and responsive to user input. It's crucial for determining when users can start engaging with the content.

5. Total Blocking Time (TBT)

TBT measures the total amount of time between First Contentful Paint and Time to Interactive when the main thread is blocked and unable to respond to user input.

6. Load Distribution

Load distribution metrics assess how resources (like images, scripts, and stylesheets) are distributed across different servers or Content Delivery Networks (CDNs) to optimize load times.

7. Error Rate

Error rate tracks the percentage of requests that result in errors, such as 404 (not found) or 500 (server error). High error rates can indicate issues with server configurations or network problems.

All this metrics influence influence conversion rate as we are human

You can measure so many things using the performance API
const resources = performance.getEntriesByType("resource");
const paints = performance.getEntriesByType("paint");
const navigations=performance.getEntriesByType("navigation");

useful
https://developer.mozilla.org/en-US/docs/Web/API/Performance

https://pagespeed.web.dev/

Top comments (0)