skills.rest
YeomanYe
YeomanYeCOMMUNITY
Explore all skills by this author →
GitHub

webperf

Run 47 Chrome DevTools snippets to measure core web vitals.

Updated May 12, 2026
Search Tags:#web-performance#core-web-vitals#lcp#cls#ttfb#devtools-snippets
One-click install
npx skills add https://github.com/YeomanYe/skills --skill webperf-yeomanye
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webperf
Source: https://github.com/YeomanYe/skills/tree/main/webperf
Command: npx skills add https://github.com/YeomanYe/skills --skill webperf-yeomanye

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web performance troubleshooting can be slow and error-prone; this toolkit consolidates 47 browser-based DevTools snippets to measure, diagnose, and compare performance metrics across pages.

Core Features & Use Cases

  • 47 JavaScript snippets for measuring web performance in Chrome DevTools, grouped into core areas such as webperf-core-web-vitals, webperf-loading, webperf-interaction, webperf-media, and webperf-resources.
  • Outputs structured, color-coded results that support quick interpretation, comparisons, and actionable recommendations for developers, QA, and performance engineers.
  • Use cases include auditing LCP/CLS/TTFB, analyzing render-blocking resources, optimizing image delivery, and investigating long tasks.

Quick Start

Load the WebPerf Skill, identify the relevant snippet for your scenario, and run it on the target page to view results.

Frequently Asked Questions about webperf

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

FAQPage Schema
How do I diagnose core web vitals like LCP and CLS directly in the browser?▼

You can diagnose core web vitals by running curated JavaScript snippets in a Chrome DevTools-compatible execution context to measure LCP, CLS, TTFB, and FID. The toolkit calculates these metrics in real browsers and outputs structured, color-coded results.

What is the best way to measure render-blocking resources and long tasks?▼

The best way to measure render-blocking resources and long tasks is using 47 browser-based DevTools snippets grouped into loading and interaction areas. They produce actionable recommendations by revealing performance bottlenecks with structured, color-coded output.

Does this web performance toolkit work without external dependencies?▼

Yes, this web performance toolkit works without external dependencies. It operates entirely within a Chrome DevTools-compatible execution context using JavaScript snippets to audit metrics like LCP, CLS, and TTFB.

Can I audit image delivery and media performance using browser snippets?▼

Yes, you can audit image delivery and media performance using the webperf-media and webperf-resources snippet groups. These JavaScript snippets run in Chrome DevTools to analyze media loading efficiency and output color-coded diagnostic results.

How do I interpret web performance audit results for optimization?▼

You interpret web performance audit results by reading the structured, color-coded output produced by the snippets. This output supports quick interpretation and provides actionable recommendations for developers to resolve identified loading and interaction bottlenecks.

Related Skills

Explore More Software Engineering Skills→
archview-aiarchview-ai

openwebf-app-debugging-devtools

Diagnose WebF runtime issues using Chrome DevTools console, network, and DOM inspection.

Official
Intermediate
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
agentset-aiagentset-ai
2.0k

fixing-accessibility

Fix accessibility issues in web and app user interfaces.

Official
Basic
Sake-TeamSake-Team

benchmark

Measure performance baselines and detect regressions for web applications and APIs.

Official
Advanced