diff --git a/detect/synthetic-monitoring/playwright-checks/performance-metrics.mdx b/detect/synthetic-monitoring/playwright-checks/performance-metrics.mdx index a51234d0..8ef4c4dd 100644 --- a/detect/synthetic-monitoring/playwright-checks/performance-metrics.mdx +++ b/detect/synthetic-monitoring/playwright-checks/performance-metrics.mdx @@ -8,13 +8,13 @@ canonical: 'https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwrigh Checkly automatically collects Web Vitals for the pages your Playwright Check Suites visit. Every page is measured and scored, and the results appear in the check result. No changes to your tests are needed. - + Collection is on by default on all browsers. TBT and INP are available on **Chromium** and shown as a dash where unsupported. - + - + Web Vitals for Playwright Check Suites are in beta and under active development. The metrics and how they are presented may change. - + ## Where Web Vitals appear @@ -23,6 +23,10 @@ A single run can visit many pages across its tests, so Web Vitals are reported p - The check result's **Performance** tab, which lists every page visited across the run. - Each test result's **Web Vitals** section. + + ![The Web Vitals section of a test result, listing each visited page with its LCP, CLS, FCP, TTFB, TBT, and INP scores](/images/pwn-web-vitals.png) + + Each row is one page visit. Expand a row to see what drove its largest paint and its slowest interaction. ## Web Vitals @@ -85,6 +89,10 @@ Expand a page visit to see what produced its Largest Contentful Paint and where This turns "LCP was 3.2 s" into "the hero image took 3.2 s, and most of that was the resource loading". + + ![The Largest Contentful Paint breakdown of a page visit, showing the painted element, the loaded resource, and how the time split across TTFB, load delay, and render delay](/images/pwn-web-vitals-lcp.png) + + ## What caused the INP The same panel breaks down the page's INP, its slowest interaction: @@ -95,6 +103,10 @@ The same panel breaks down the page's INP, its slowest interaction: When an interaction started before a single-page route change, Checkly notes it. That interaction's latency then reflects the cost of arriving at the new route rather than a slow interaction on it. + + ![The Interaction to Next Paint breakdown of a page visit, showing the interacted element, the event type, and how the time split across input delay, processing, and presentation delay](/images/pwn-web-vitals-inp.png) + + ## Single-page apps and soft navigations Core Web Vitals are measured per page load. A single-page app changes routes with `history.pushState` and no full reload, so to the browser it is still the same document, and the load metrics do not fire again for the new route. diff --git a/images/pwn-web-vitals-inp.png b/images/pwn-web-vitals-inp.png new file mode 100644 index 00000000..441e4871 Binary files /dev/null and b/images/pwn-web-vitals-inp.png differ diff --git a/images/pwn-web-vitals-lcp.png b/images/pwn-web-vitals-lcp.png new file mode 100644 index 00000000..1b0b6d67 Binary files /dev/null and b/images/pwn-web-vitals-lcp.png differ diff --git a/images/pwn-web-vitals.png b/images/pwn-web-vitals.png new file mode 100644 index 00000000..6069ad23 Binary files /dev/null and b/images/pwn-web-vitals.png differ