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 built-in Playwright and Selenium collector helpers when the journey already has a browser page or driver. The helpers read browser performance entries and normalize LCP, INP, CLS, FCP, and TTFB into LoadStrikeBrowserWebVitalsResult. Teams can still use Lighthouse, browser performance APIs, or an internal collector when they need a custom measurement source.

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

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.

Use FromPlaywrightPageAsync or FromSeleniumDriver when the browser page or driver is available. Use FromPerformanceSnapshot when another browser tool already returns metric values.