DEV Community

alyson farias
alyson farias

Posted on

1

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/

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️