Follow along to learn about:
- Google's Core Web Vitals and why they are important
- How to analyze the browser metrics output
- How to set thresholds for your browser metrics
The k6 browser module emits metrics based on the Core Web Vitals. This section provides some conceptual background about the core vitals. To review the complete list of browser metrics, refer to the section in the Metrics reference.
Google introduced these metrics to provided unified signals to assess user experience on the web. The vitals are composed of three important metrics to help user experience when using your web application.
- Loading performance
- And visual stability
The Core Web Vitals are one of Google's Page Experience Signals. A positive page experience naturally leads to better quality and better search engine rankings. These golden metrics help you understand which areas of your frontend application need optimization so your pages can rank higher than similar content.
Existing browser measures, such as Load and DOMContentLoaded times, no longer accurately reflect user experience very well. Relying on these load events does not give the correct metric to analyze critical performance bottlenecks that your page might have. Google's Web Vitals is a better measure of your page performance and its user experience.
When a browser test finishes, k6 reports a top-level overview of the aggregated browser metrics output. The following snippet is an example:
As Google also recommends measuring the 75th percentile for each web vital metric, there will still be future tweaks to improve the summary output.
You can also visualize these results in different ways depending on your team's needs. For more information, check out our blog post on visualizing k6 results.
The browser module can use all key k6 functionalities, such as Thresholds.
To set thresholds for your browser metrics:
- Add the metric you want to check.
- Specify its threshold value.
As the following example shows, you can also pass in different URLs if you're going to set a threshold for other pages, especially when your script contains page navigations.
When the test is run, you should see a similar output as the one below.