Lab: Browser test and Core Web Vitals

What you will learn in this TP

• Write a browser script
• Read the Web Vitals
• Combine HTTP load and browser

Introduction #

What you will learn in this section

• Write a browser script
• Read the Web Vitals
• Combine HTTP load and browser

Context. Users complain about a slow page even though the API responds quickly. You measure what the browser actually sees.

Prerequisites: Docker  ·  Estimated time: 35 min

Measure the user experience the way a browser does.

Hands-on #

Guided steps, with their solutions.

1. 1. Write the script

   Why? The browser module drives a real Chromium: JavaScript, CSS and images are loaded just as they are for the user.

   Create ui.js that opens http://httpbin/, checks the title and sets a threshold on the LCP.

2. 2. Run with the browser image

   Why? The -with-browser image includes Chromium.

   Run the test and look for the browser_web_vital_* metrics.

3. 3. Combine with an HTTP load

   Why? The perceived experience degrades when the backend is under load: that is what we want to measure.

   Add a constant-arrival-rate scenario at 300 requests/s on /get and compare the LCP with and without load.

4. 4. Interpret

   Why? To link a perceived indicator to a server-side cause.

   Do the LCP and TTFB increase under load? How much of it comes from the server?

Difficulty level : ●●●○○ (3/5)