Browser Web Vitals Documentation

Matching docs

Search across docs titles, summaries, groups, and section headings.

Use Up and Down Arrow to move through results, then press Enter to open the active page.

Use this page when

Visual guide

Sequence diagram showing how a LoadStrike workflow moves from setup to report output. — This page fits into the same setup, run, correlate, and report flow as the rest of the public LoadStrike runtime.

Guide

Metrics

The helper accepts Largest Contentful Paint (LCP), Interaction to Next Paint (INP), Cumulative Layout Shift (CLS), First Contentful Paint (FCP), and Time to First Byte (TTFB) values when your browser collector provides them.

Budgets

Configure only the maximum values that matter for the page or journey. Any returned metric that exceeds its configured maximum fails the scenario. Metrics without a configured maximum are recorded by your callback but do not fail the LoadStrike scenario.

Browser Collection

Use the browser tool that best matches your application. Playwright, Selenium, Lighthouse, browser performance APIs, and real-user-style collectors can all feed LoadStrikeBrowserWebVitalsResult as long as the callback returns the measured values.

When To Add Load

Run Web Vitals as a single standalone scenario when you want a page-quality gate. Add WithLoadSimulations only when you intentionally want repeated browser checks during a performance test.

Reports And Comparison

The scenario outcome is visible in the same reports and portal views as other LoadStrike runs, which lets teams keep page-quality gates beside load, stress, and transaction tests.

Feature usage samples

Use this helper when your browser tooling measures page quality and LoadStrike should enforce the budgets beside your load and transaction tests.

If you run these examples locally, add a valid runner key before execution starts. Set it with WithRunnerKey("...") or the config key LoadStrike:RunnerKey.

Browser Web Vitals

using LoadStrike;

var scenario = LoadStrikeBrowserWebVitals.CreateScenario(
    "homepage-web-vitals",
    new LoadStrikeBrowserWebVitalsOptions
    {
        Url = "https://example.com",
        MaxLargestContentfulPaintMs = 2500,
        MaxInteractionToNextPaintMs = 200,
        MaxCumulativeLayoutShift = 0.1,
        MaxFirstContentfulPaintMs = 1800,
        MaxTimeToFirstByteMs = 800
    },
    _ => new LoadStrikeBrowserWebVitalsResult
    {
        Url = "https://example.com",
        LargestContentfulPaintMs = 1800,
        InteractionToNextPaintMs = 120,
        CumulativeLayoutShift = 0.03,
        FirstContentfulPaintMs = 1100,
        TimeToFirstByteMs = 220
    });

_ = scenario;

package main

import loadstrike "loadstrike.com/sdk/go"

func floatPtr(value float64) *float64 {
    return &value
}

func main() {
    scenario := loadstrike.LoadStrikeBrowserWebVitals.CreateScenario(
        "homepage-web-vitals",
        loadstrike.LoadStrikeBrowserWebVitalsOptions{
            URL:                         "https://example.com",
            MaxLargestContentfulPaintMS: floatPtr(2500),
            MaxInteractionToNextPaintMS: floatPtr(200),
            MaxCumulativeLayoutShift:    floatPtr(0.1),
            MaxFirstContentfulPaintMS:   floatPtr(1800),
            MaxTimeToFirstByteMS:        floatPtr(800),
        },
        func(context loadstrike.LoadStrikeBrowserWebVitalsContext) (loadstrike.LoadStrikeBrowserWebVitalsResult, error) {
            return loadstrike.LoadStrikeBrowserWebVitalsResult{
                URL:                         context.Options.URL,
                LargestContentfulPaintMS:    floatPtr(1800),
                InteractionToNextPaintMS:    floatPtr(120),
                CumulativeLayoutShift:       floatPtr(0.03),
                FirstContentfulPaintMS:      floatPtr(1100),
                TimeToFirstByteMS:           floatPtr(220),
            }, nil
        },
    )
    _ = scenario
}

import com.loadstrike.runtime.LoadStrikeBrowserWebVitals;
import com.loadstrike.runtime.LoadStrikeBrowserWebVitals.Options;
import com.loadstrike.runtime.LoadStrikeBrowserWebVitals.Result;

var options = new Options();
options.url = "https://example.com";
options.maxLargestContentfulPaintMs = 2500d;
options.maxInteractionToNextPaintMs = 200d;
options.maxCumulativeLayoutShift = 0.1d;
options.maxFirstContentfulPaintMs = 1800d;
options.maxTimeToFirstByteMs = 800d;

var scenario = LoadStrikeBrowserWebVitals.createScenario("homepage-web-vitals", options, context -> {
  var result = new Result();
  result.url = options.url;
  result.largestContentfulPaintMs = 1800d;
  result.interactionToNextPaintMs = 120d;
  result.cumulativeLayoutShift = 0.03d;
  result.firstContentfulPaintMs = 1100d;
  result.timeToFirstByteMs = 220d;
  return result;
});

from loadstrike_sdk import (
    LoadStrikeBrowserWebVitals,
    LoadStrikeBrowserWebVitalsOptions,
    LoadStrikeBrowserWebVitalsResult,
)

scenario = LoadStrikeBrowserWebVitals.create_scenario(
    "homepage-web-vitals",
    LoadStrikeBrowserWebVitalsOptions(
        url="https://example.com",
        max_largest_contentful_paint_ms=2500,
        max_interaction_to_next_paint_ms=200,
        max_cumulative_layout_shift=0.1,
        max_first_contentful_paint_ms=1800,
        max_time_to_first_byte_ms=800,
    ),
    lambda context: LoadStrikeBrowserWebVitalsResult(
        url=context.options.url,
        largest_contentful_paint_ms=1800,
        interaction_to_next_paint_ms=120,
        cumulative_layout_shift=0.03,
        first_contentful_paint_ms=1100,
        time_to_first_byte_ms=220,
    ),
)

import { LoadStrikeBrowserWebVitals } from "@loadstrike/loadstrike-sdk";

const scenario = LoadStrikeBrowserWebVitals.createScenario(
  "homepage-web-vitals",
  {
    url: "https://example.com",
    maxLargestContentfulPaintMs: 2500,
    maxInteractionToNextPaintMs: 200,
    maxCumulativeLayoutShift: 0.1,
    maxFirstContentfulPaintMs: 1800,
    maxTimeToFirstByteMs: 800
  },
  async ({ options }) => ({
    url: options.url,
    largestContentfulPaintMs: 1800,
    interactionToNextPaintMs: 120,
    cumulativeLayoutShift: 0.03,
    firstContentfulPaintMs: 1100,
    timeToFirstByteMs: 220
  })
);

void scenario;

const { LoadStrikeBrowserWebVitals } = require("@loadstrike/loadstrike-sdk");

const scenario = LoadStrikeBrowserWebVitals.createScenario(
  "homepage-web-vitals",
  {
    url: "https://example.com",
    maxLargestContentfulPaintMs: 2500,
    maxInteractionToNextPaintMs: 200,
    maxCumulativeLayoutShift: 0.1,
    maxFirstContentfulPaintMs: 1800,
    maxTimeToFirstByteMs: 800
  },
  async ({ options }) => ({
    url: options.url,
    largestContentfulPaintMs: 1800,
    interactionToNextPaintMs: 120,
    cumulativeLayoutShift: 0.03,
    firstContentfulPaintMs: 1100,
    timeToFirstByteMs: 220
  })
);

void scenario;

Web Vitals budgets

Url

The page or browser journey target. It must be an absolute URL.

LargestContentfulPaintMs

Largest Contentful Paint budget. Use it to catch slow rendering of the main content.

InteractionToNextPaintMs

Interaction to Next Paint budget. Use it to catch slow interaction response on the tested journey.

CumulativeLayoutShift

Cumulative Layout Shift budget. Use it to catch visual instability.

FirstContentfulPaintMs

First Contentful Paint budget. Use it to catch slow initial rendering.

TimeToFirstByteMs

Time to First Byte budget. Use it to catch slow server or edge response before rendering begins.

Metric limits

Only configured maximums are enforced. A returned metric fails the scenario when it is higher than its configured maximum.

The browser collector is intentionally yours. Use Playwright, Selenium, Lighthouse, browser performance entries, or an internal collector, then return the measured values in LoadStrikeBrowserWebVitalsResult.