🎯

performance-audit

🎯Skill

from serkan-ozal/browser-devtools-skills

What it does

Performs comprehensive web page performance analysis using Web Vitals, network metrics, and SEO performance indicators.

📦

Part of

serkan-ozal/browser-devtools-skills(9 items)

performance-audit

Installation

Quick InstallInstall with npx

npx skills add serkan-ozal/browser-devtools-skills

npm installInstall npm package

npm install -g browser-devtools-mcp

📖 Extracted from docs: serkan-ozal/browser-devtools-skills

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Analyze web page performance using Web Vitals and network timing metrics. Use when the user asks about page performance, load times, Core Web Vitals (LCP, CLS, INP), slow pages, or SEO performance factors.

Overview

# Performance Audit Skill

Analyze web page performance using Web Vitals and network timing metrics.

When to Use

This skill activates when:

User asks about page performance or speed
User wants to optimize load times
User mentions slow page or poor user experience
User needs Core Web Vitals metrics
User asks about SEO performance factors

Capabilities

Web Vitals Analysis

```bash

browser-devtools-cli o11y get-web-vitals

browser-devtools-cli --json o11y get-web-vitals

browser-devtools-cli --json o11y get-web-vitals --wait-ms 3000

browser-devtools-cli --json o11y get-web-vitals --include-debug

```

Network Performance

```bash

browser-devtools-cli --json o11y get-http-requests

browser-devtools-cli --json o11y get-http-requests --resource-type script,stylesheet

browser-devtools-cli --json o11y get-http-requests --status-min 400

```

Visual Analysis

```bash

browser-devtools-cli content take-screenshot --name "above-fold"

browser-devtools-cli content take-screenshot --name "full-page" --full-page

```

JavaScript Execution Analysis

```bash

browser-devtools-cli run js-in-browser --script "performance.getEntriesByType('longtask')"

browser-devtools-cli run js-in-browser --script "performance.getEntriesByType('resource')"

```

Performance Thresholds

|--------|------|------------|------|

| LCP | ≤2.5s | 2.5-4s | >4s |

| INP | ≤200ms | 200-500ms | >500ms |

| CLS | ≤0.1 | 0.1-0.25 | >0.25 |

| TTFB | ≤800ms | 800-1800ms | >1800ms |

| FCP | ≤1.8s | 1.8-3s | >3s |

Audit Workflow

```bash

SESSION="--session-id perf-audit"

# 1. Navigate to page

browser-devtools-cli $SESSION navigation go-to --url "https://example.com"

# 2. Wait for page to settle

browser-devtools-cli $SESSION sync wait-for-network-idle

# 3. Get Web Vitals

browser-devtools-cli $SESSION --json o11y get-web-vitals --wait-ms 2000

# 4. Analyze network requests

browser-devtools-cli $SESSION --json o11y get-http-requests

# 5. Check for console errors

browser-devtools-cli $SESSION --json o11y get-console-messages --types error,warn

# 6. Take screenshot for reference

browser-devtools-cli $SESSION content take-screenshot --name "performance-audit"

# 7. Cleanup

browser-devtools-cli session delete perf-audit

```

Detailed Analysis

Check Large Resources

```bash

browser-devtools-cli --json o11y get-http-requests --resource-type image,script,stylesheet

```

Check Slow Requests

```bash

browser-devtools-cli --json o11y get-http-requests

# Look for requests with high timing values

```

Check Render-Blocking Resources

```bash

browser-devtools-cli run js-in-browser --script "

performance.getEntriesByType('resource')

.filter(r => r.renderBlockingStatus === 'blocking')

.map(r => ({name: r.name, duration: r.duration}))

```

Check Long Tasks

```bash

browser-devtools-cli run js-in-browser --script "

performance.getEntriesByType('longtask')

.map(t => ({startTime: t.startTime, duration: t.duration}))

```

Common Issues

Large unoptimized images
Render-blocking CSS/JS
Too many HTTP requests
Slow server response (TTFB)
Layout shifts from dynamic content
Uncompressed resources
Missing caching headers
Third-party scripts blocking main thread

Best Practices

Run multiple times for consistent results
Wait for network idle before measuring
Use --wait-ms for LCP/CLS to settle
Check network requests for slow/large resources
Take screenshots at different load stages
Test on different network conditions (throttle if needed)
Compare before/after for optimization validation

More from this repository8

🎯

debugging🎯Skill

Debugs web web applications by inspconsoleecting messages,, tracing function and calls exceptions without breakingpoints. Human

🎯

browser-testing🎯Skill

Automates browser testing by navigating, interacting with web pages, filling forms, capturing content, and verifying UI behaviors using Browser DevTools CLI.

🎯

browser-devtools-cli🎯Skill

Automates web browser interactions using Playwright for testing, debugging, and extracting content via a powerful CLI tool.

🎯

visual-testing🎯Skill

Validates and compares web page visual rendering across different browsers and configurations using automated screenshot comparison techniques.

🎯

observability🎯Skill

Enables comprehensive web application monitoring by tracking distributed traces, console logs, network requests, and performance metrics across frontend and backend services.

🎯

react-debugging🎯Skill

Inspects and maps React components to DOM elements, helping developers quickly diagnose rendering issues and component interactions.

🎯

accessibility-audit🎯Skill

Performs comprehensive web accessibility audits using ARIA snapshots, AX tree analysis, and WCAG validation checks.

🎯

api-testing🎯Skill

Mocks and tests API integrations by simulating responses, intercepting requests, and monitoring network traffic.