What frameworks does it support?

It can audit any live website, but provides specialized codebase analysis for tools like Next.js, Vite, Webpack, SvelteKit, and Astro.

Does it help with SEO rankings?

Yes, by optimizing Core Web Vitals which are key ranking factors, this skill directly helps improve your site's search engine visibility.

How does this skill measure web performance?

It uses the Chrome DevTools MCP to run live performance traces, capturing real-time metrics like LCP and CLS directly from a browser instance.

Does it require additional configuration?

Yes, it requires the chrome-devtools-mcp server to be installed and configured in your MCP settings to perform live browser actions and traces.

Can it fix performance issues automatically?

It provides specific, actionable code snippets and configuration changes that you can apply to resolve identified bottlenecks based on real trace data.

Web Performance Auditor

Name: Web Performance Auditor
Author: cloudflare

bycloudflare

•

640

•

分析与监控

Audits and optimizes web application performance using real-time Chrome DevTools telemetry and Core Web Vitals analysis.

The web-perf skill empowers Claude to perform deep-dive performance audits by interfacing directly with Chrome DevTools via MCP. It automates the collection of Core Web Vitals—including LCP, CLS, and TBT—while identifying critical bottlenecks like render-blocking resources, inefficient network dependency chains, and layout shifts. Beyond simple metrics, it analyzes build configurations for frameworks like Vite, Next.js, and Webpack to provide actionable, code-level recommendations, ensuring your web applications meet modern speed and accessibility standards with quantified impact reports.

主要功能

01Codebase-aware optimization for modern bundlers and frameworks

02Real-time performance tracing via Chrome DevTools MCP integration

03Accessibility tree snapshots and contrast ratio auditing

04Automated Core Web Vitals measurement (LCP, FCP, CLS, TBT)

05640 GitHub stars

06Network dependency chain and render-blocking resource identification

使用场景

01Debugging sudden drops in Lighthouse scores or search engine rankings

02Profiling build outputs to eliminate unused CSS, JS, and inefficient polyfills

03Identifying specific DOM elements causing layout shifts or slow largest contentful paints

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cloudflare/skills web-perf

For use in Claude.ai and ChatGPT

Download Skill