webperf
Web performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar.
About this skill
The WebPerf Snippets Toolkit is an AI agent skill designed to help diagnose and improve website performance. It comprises 47 JavaScript snippets that an AI agent can execute in the browser console via Chrome DevTools. These snippets cover a wide range of web performance aspects, including Core Web Vitals (LCP, CLS, INP), page loading metrics (TTFB, FCP), interaction responsiveness, media optimization (images, video), and network resource analysis. The skill outputs structured, color-coded results, enabling the agent to interpret findings and provide actionable recommendations. This skill is invaluable for web developers, performance engineers, and SEO specialists who need detailed, on-demand performance audits. By automating the execution of common DevTools tasks, it allows AI agents to quickly identify performance bottlenecks, debug specific issues like slow Largest Contentful Paint or excessive layout shifts, and suggest concrete improvements. It transforms complex manual testing into a streamlined, automated process for performance optimization.
Best use case
The primary use case is to conduct in-depth web performance audits and debugging for any given URL. It helps identify specific issues hindering page speed, responsiveness, and user experience, such as slow server responses, render-blocking resources, or unoptimized images. Developers and performance experts benefit most by leveraging an AI agent to quickly pinpoint areas for improvement without manually navigating DevTools.
Web performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar.
A detailed, structured web performance audit report with actionable insights and specific recommendations for improvement on the specified URL.
Practical example
Example input
Analyze the web performance of `https://www.anthropic.com` and provide recommendations to improve its Core Web Vitals.
Example output
Performance audit for `https://www.anthropic.com` completed. LCP: 2.1s (Good), CLS: 0.03 (Good), INP: 90ms (Good). TTFB: 150ms. No critical performance issues detected. All Core Web Vitals are within recommended thresholds. Further micro-optimizations could target unused CSS removal if desired.
When to use this skill
- When a user asks to audit or analyze the web performance of a specific page.
- To debug slow Core Web Vitals like LCP, CLS, or INP.
- When investigating page loading issues, such as slow TTFB or FCP.
- For auditing image optimization, video performance, or resource loading efficiency.
When not to use this skill
- For server-side performance monitoring or backend code profiling.
- When needing automated, continuous performance tracking over time.
- If the target environment isn't a web browser or lacks Chrome DevTools access.
- For general system diagnostics unrelated to web page performance.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/webperf/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How webperf Compares
| Feature / Agent | webperf | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
Web performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
AI Agent for YouTube Script Writing
Find AI agent skills for YouTube script writing, video research, content outlining, and repeatable channel production workflows.
Cursor vs Codex for AI Workflows
Compare Cursor and Codex for AI coding workflows, repository assistance, debugging, refactoring, and reusable developer skills.
SKILL.md Source
# WebPerf Snippets Toolkit A collection of 47 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the browser console and outputs structured, color-coded results. ## Quick Reference | Skill | Snippets | Trigger phrases | |-------|----------|-----------------| | webperf-core-web-vitals | 7 | "debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness" | | webperf-loading | 28 | "TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker" | | webperf-interaction | 8 | "jank", "scroll performance", "long tasks", "animation frames", "INP debug" | | webperf-media | 3 | "image audit", "lazy loading", "image optimization", "video audit" | | webperf-resources | 1 | "network quality", "bandwidth", "connection type", "save-data" | ## Workflow 1. Identify the relevant skill based on the user's question (see Quick Reference above) 2. Load the skill's skill.md to see available snippets and thresholds 3. Execute with Chrome DevTools MCP: - `mcp__chrome-devtools__navigate_page` → navigate to target URL - `mcp__chrome-devtools__evaluate_script` → run the snippet - `mcp__chrome-devtools__get_console_message` → read results 4. Interpret results using the thresholds defined in the skill 5. Provide actionable recommendations based on findings
Related Skills
webperf-resources
Intelligent network quality analysis with adaptive loading strategies. Detects connection type (2g/3g/4g), bandwidth, RTT, and save-data mode, then automatically triggers appropriate optimization workflows. Includes decision trees that recommend image compression for slow connections, critical CSS inlining for high RTT, and save-data optimizations (disable autoplay, reduce quality). Features connection-aware performance budgets (500KB for 2g, 1.5MB for 3g, 3MB for 4g+) and adaptive loading implementation guides. Cross-skill integration with Loading (TTFB impact), Media (responsive images), and Core Web Vitals (connection impact on LCP/INP). Use when the user asks about slow connections, mobile optimization, save-data support, or adaptive loading strategies. Compatible with Chrome DevTools MCP.
webperf-media
Intelligent media optimization with automated workflows for images, videos, and SVGs. Includes decision trees that detect LCP images (triggers format/lazy-loading/priority analysis), identify layout shift risks (missing dimensions), and flag lazy loading issues (above-fold lazy or below-fold eager). Features workflows for complete media audit, LCP image investigation, video performance (poster optimization), and SVG embedded bitmap detection. Cross-skill integration with Core Web Vitals (LCP/CLS impact) and Loading (priority hints, resource preloading). Provides performance budgets and format recommendations based on content type. Use when the user asks about image optimization, LCP is an image/video, layout shifts from media, or media loading strategy. Compatible with Chrome DevTools MCP.
webperf-loading
Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation. Includes decision trees that automatically analyze TTFB sub-parts when slow, detect script loading anti-patterns (async/defer/preload conflicts), identify render-blocking resources, and validate resource hints usage. Features workflows for complete loading audit (6 phases), backend performance investigation, and priority optimization. Cross-skill integration with Core Web Vitals (LCP resource loading), Interaction (script execution blocking), and Media (lazy loading strategy). Use when the user asks about TTFB, FCP, render-blocking, slow loading, font performance, script optimization, or resource hints. Compatible with Chrome DevTools MCP.
webperf-interaction
Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking. Includes decision trees that automatically run script attribution when long frames detected, break down input latency phases, and correlate layout shifts with interactions. Features workflows for complete interaction audit, third-party script impact analysis, and animation performance debugging. Cross-skill integration with Core Web Vitals (INP/CLS correlation) and Loading (script execution analysis). Use when the user asks about slow interactions, janky scrolling, unresponsive pages, or INP optimization. Compatible with Chrome DevTools MCP.
webperf-core-web-vitals
Intelligent Core Web Vitals analysis with automated workflows and decision trees. Measures LCP, CLS, INP with guided debugging that automatically determines follow-up analysis based on results. Includes workflows for LCP deep dive (5 phases), CLS investigation (loading vs interaction), INP debugging (latency breakdown + attribution), and cross-skill integration with loading, interaction, and media skills. Use when the user asks about Core Web Vitals, LCP optimization, layout shifts, or interaction responsiveness. Compatible with Chrome DevTools MCP.
compose-multiplatform-patterns
KMP项目中的Compose Multiplatform和Jetpack Compose模式——状态管理、导航、主题化、性能优化和平台特定UI。
java-coding-standards
Spring Bootサービス向けのJavaコーディング標準：命名、不変性、Optional使用、ストリーム、例外、ジェネリクス、プロジェクトレイアウト。
continuous-learning
Claude Codeセッションから再利用可能なパターンを自動的に抽出し、将来の使用のために学習済みスキルとして保存します。
nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
network-101
Configure and test common network services (HTTP, HTTPS, SNMP, SMB) for penetration testing lab environments. Enable hands-on practice with service enumeration, log analysis, and security testing against properly configured target systems.
neon-postgres
Expert patterns for Neon serverless Postgres, branching, connection pooling, and Prisma/Drizzle integration
nanobanana-ppt-skills
AI-powered PPT generation with document analysis and styled images