Skip to content

Accessibility TestingCode 25 / 69

Browser Web Vitals

Capture browser Web Vitals through your chosen browser tool and let LoadStrike enforce the metric budgets as a normal run result.

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. Each configured maximum and its measurement must be finite and non-negative; a missing or invalid measurement fails that check instead of counting as zero. A valid measured zero can pass. Any metric above its configured maximum fails the scenario; metrics without a configured maximum remain optional.

Browser Collection

Use the built-in Playwright and Selenium collector helpers when the journey already has a browser page or driver. Navigation and paint entries provide FCP and TTFB when available. LCP, INP, and CLS require a measurement source that actually collects those values during the journey; configure those budgets only after supplying the measurements. Missing measurements stay unavailable. Teams can use Lighthouse, browser performance observers, or a custom collector with FromPerformanceSnapshot.

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;
using Microsoft.Playwright;

var scenario = LoadStrikeBrowserWebVitals.CreateScenario(
    "homepage-web-vitals",
    new LoadStrikeBrowserWebVitalsOptions
    {
        Url = "https://example.com",
        MaxLargestContentfulPaintMs = 2500,
        MaxInteractionToNextPaintMs = 200,
        MaxCumulativeLayoutShift = 0.1,
        MaxFirstContentfulPaintMs = 1800,
        MaxTimeToFirstByteMs = 800
    },
    async context =>
    {
        var playwright = await Playwright.CreateAsync();
        try
        {
            await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions
            {
                Headless = true
            });
            var page = await browser.NewPageAsync();
            await page.GotoAsync(context.Options.Url);
            return await LoadStrikeBrowserWebVitalsCollector.FromPlaywrightPageAsync(context.Options, page);
        }
        finally
        {
            playwright.Dispose();
        }
    });

_ = scenario;

package main

import loadstrike "loadstrike.com/sdk/go"

type playwrightPage interface {
    Evaluate(script string) (map[string]any, error)
}

type seleniumDriver interface {
    ExecuteScript(script string, args ...any) (map[string]any, error)
}

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

func buildScenario(page playwrightPage, driver seleniumDriver) loadstrike.LoadStrikeScenario {
    return 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) {
            if driver != nil {
                _, _ = loadstrike.LoadStrikeBrowserWebVitals.FromSeleniumDriver(context.Options, driver)
            }
            return loadstrike.LoadStrikeBrowserWebVitals.FromPlaywrightPageAsync(context.Options, page)
        },
    )
}

func main() {
    var page playwrightPage
    scenario := buildScenario(page, nil)
    _ = scenario
}

import com.loadstrike.runtime.LoadStrikeBrowserWebVitals;
import com.loadstrike.runtime.LoadStrikeBrowserWebVitals.Options;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Playwright;

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;

try (var playwright = Playwright.create()) {
  var browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(true));
  var page = browser.newPage();

  var scenario = LoadStrikeBrowserWebVitals.createScenario("homepage-web-vitals", options, context -> {
    page.navigate(context.options.url);
    return LoadStrikeBrowserWebVitals.Collector.FromPlaywrightPageAsync(context.options, page);
  });

  browser.close();
}

from loadstrike_sdk import (
    LoadStrikeBrowserWebVitals,
    LoadStrikeBrowserWebVitalsCollector,
    LoadStrikeBrowserWebVitalsOptions,
)

options = 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,
)

# page is your authenticated Playwright page from sync_playwright or async_playwright.
scenario = LoadStrikeBrowserWebVitals.create_scenario(
    "homepage-web-vitals",
    options,
    lambda context: LoadStrikeBrowserWebVitalsCollector.from_playwright_page_async(context.options, page),
)

import { chromium } from "playwright";
import { LoadStrikeBrowserWebVitals, LoadStrikeBrowserWebVitalsCollector } 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 }) => {
    const browser = await chromium.launch({ headless: true });
    try {
      const page = await browser.newPage();
      await page.goto(options.url);
      return await LoadStrikeBrowserWebVitalsCollector.fromPlaywrightPageAsync(options, page);
    } finally {
      await browser.close();
    }
  }
);

void scenario;

const { chromium } = require("playwright");
const { LoadStrikeBrowserWebVitals, LoadStrikeBrowserWebVitalsCollector } = require("@loadstrike/loadstrike-sdk");

(async () => {
  const scenario = LoadStrikeBrowserWebVitals.createScenario(
    "homepage-web-vitals",
    {
      url: "https://example.com",
      maxLargestContentfulPaintMs: 2500,
      maxInteractionToNextPaintMs: 200,
      maxCumulativeLayoutShift: 0.1,
      maxFirstContentfulPaintMs: 1800,
      maxTimeToFirstByteMs: 800
    },
    async ({ options }) => {
      const browser = await chromium.launch({ headless: true });
      try {
        const page = await browser.newPage();
        await page.goto(options.url);
        return await LoadStrikeBrowserWebVitalsCollector.fromPlaywrightPageAsync(options, page);
      } finally {
        await browser.close();
      }
    }
  );

  void scenario;
})();

Web Vitals budgets

Parameter	Description
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. Each needs a finite, non-negative measurement; missing or invalid measurements fail rather than becoming zero. Valid measured zeros can pass.

This example configures FCP and TTFB, which the browser can supply through paint and navigation entries. Add LCP, INP, or CLS budgets only when your journey collector supplies those measurements. Use FromPerformanceSnapshot when another browser tool already returns metric values.

LoadStrike documentation All guides

CODE WORKSPACE

Browser Web Vitals

package main

import loadstrike "loadstrike.com/sdk/go"

type playwrightPage interface {
    Evaluate(script string) (map[string]any, error)
}

type seleniumDriver interface {
    ExecuteScript(script string, args ...any) (map[string]any, error)
}

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

func buildScenario(page playwrightPage, driver seleniumDriver) loadstrike.LoadStrikeScenario {
    return 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) {
            if driver != nil {
                _, _ = loadstrike.LoadStrikeBrowserWebVitals.FromSeleniumDriver(context.Options, driver)
            }
            return loadstrike.LoadStrikeBrowserWebVitals.FromPlaywrightPageAsync(context.Options, page)
        },
    )
}

func main() {
    var page playwrightPage
    scenario := buildScenario(page, nil)
    _ = scenario
}

Use your own target, credentials, and a valid runner key. Follow the prerequisites in this guide before running the example.