skills.rest
vanducng
vanducngCOMMUNITY
Explore all skills by this author →
Website𝕏@vanducngGitHub

web-perf

Collect Core Web Vitals and DevTools traces from a live Chrome profile via CDP.

5|Updated May 2, 2026
Search Tags:#performance#devtools#trace#cdp#web-vitals#browser-profile
One-click install
npx skills add https://github.com/vanducng/skills --skill web-perf-vanducng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/vanducng/skills/tree/main/skills/web-perf
Command: npx skills add https://github.com/vanducng/skills --skill web-perf-vanducng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Collect Core Web Vitals (LCP, CLS, INP, FCP, TTFB), JS heap usage, and DevTools performance traces by attaching to a running Chrome profile. This enables evidence-based debugging of why pages feel slow without launching a new browser instance.

Core Features & Use Cases

  • Active vitals measurement: surface LCP, FCP, TTFB, CLS, and INP while the page is loaded in an existing profile.
  • Heap and resource insights: report memory usage and network/resource counts to guide optimizations.
  • Trace generation: produce a DevTools trace (trace.json) for deep performance analysis in DevTools.

Quick Start

Navigate to a running Chrome profile port and run vitals.cjs to collect metrics, then run perf-trace.cjs to generate a trace for the same page.

Frequently Asked Questions about web-perf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I collect Core Web Vitals from an already running Chrome instance?▼

You can collect Core Web Vitals from a running Chrome instance by attaching to its live profile via the Chrome DevTools Protocol (CDP) endpoint, which captures LCP, CLS, INP, FCP, and TTFB metrics without launching a new browser.

Can I generate a DevTools performance trace for a page loaded in an existing browser profile?▼

Yes, you can generate a DevTools performance trace for an existing browser profile by attaching via CDP and executing a script to output a trace.json file for deep performance analysis.

What is needed to measure web vitals using a live Chrome attach?▼

To measure web vitals using a live Chrome attach, you need a running Chrome instance exposing a CDP endpoint, a browser-profile port, and Node 22+ with no npm dependencies required.

Does this approach require installing npm dependencies to measure JS heap usage?▼

No, this approach requires no npm dependencies to measure JS heap usage and resource counts, relying entirely on Node 22+ and a live CDP connection to the running Chrome profile.

Why use a live Chrome attach instead of launching a new browser for performance debugging?▼

Using a live Chrome attach for performance debugging allows you to measure real web vitals and capture evidence-based metrics in an existing profile, preserving session state without the overhead of launching a new browser instance.

When should I use CDP for web vitals measurement instead of other tools?▼

You should use CDP for web vitals measurement during page performance debugging or end-to-end tests when you need to analyze why a page is slow within an active, existing browser profile rather than an isolated environment.

Related Skills

Explore More Software Engineering Skills→
LoveIieiLoveIiei
1

browser-cdp

Automate Chrome navigation and extraction via the Chrome DevTools Protocol.

Community
Intermediate
519lab519lab
2

node-inspect-debugger

Automate Node.js debugging with node inspect and Chrome DevTools Protocol.

Official
Advanced
AshesOfTheUndeadAshesOfTheUndead

skill-creator

Develop, evaluate, and optimize AI skills with iterative testing and Python-based metrics.

Community
Advanced
burgebjburgebj

browse

Automate web interactions and capture screenshots in a headless browser.

Community
Advanced