Skip to content

Document Web Vitals for Playwright Check Suites#447

Open
kiroushi wants to merge 1 commit into
mainfrom
document-playwright-checks-web-vitals
Open

Document Web Vitals for Playwright Check Suites#447
kiroushi wants to merge 1 commit into
mainfrom
document-playwright-checks-web-vitals

Conversation

@kiroushi

Copy link
Copy Markdown
Member

What

Adds a Web Vitals for Playwright Check Suites page under the Playwright Check Suites section, and cross-links it with the existing Browser Checks performance page (both ways).

Why

Web Vitals collection for Playwright Check Suites has grown since the Browser Checks page was written. This documents the current behaviour:

  • All six metrics, collected and scored on the web.dev thresholds: LCP, CLS, FCP, TTFB, TBT, and INP.
  • Reported per page visit (the Performance tab, and each test result's Web Vitals section).
  • LCP attribution: the causing element (CSS selector), the correlated network resource, and the phase breakdown.
  • INP attribution: the interacted element, the event type, the phase breakdown, and a note when an interaction started before a soft navigation.
  • Single-page apps: soft-navigation pages are badged and intentionally omit load metrics and CLS/TBT, while still reporting INP.

Notes

  • Follows the voice and components of the existing Browser Checks performance page (<Accordion> metrics with web.dev links, <Callout> asides, second-person).
  • No screenshot yet; a Performance-tab screenshot would strengthen the page and can be added.

@pirilkavlak

Copy link
Copy Markdown
Contributor

Thank you Javier! reads great overall. Below some minor nits

  1. The opening line says Checkly collects "Core Web Vitals," but Core Web Vitals are only LCP/CLS/INP. So tightening the intro to "Web Vitals" would be more precise.

  2. Chromium-only vs. the WebKit/Firefox aside. The warning callout says collection happens on Chromium projects, but the INP callout then explains INP is "weaker on WebKit and Firefox." If collection is Chromium-only, that browser-support aside could read as contradictory, I think worth trimming or clarifying.

  3. Callout type on the first block — "collected on Chromium projects, on by default" is neutral info but uses type="warning" ⚠️. type="info" would fit better. Well this one is just cosmetic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants