perf-analyzer_skill

Overview

This skill performs a comprehensive frontend performance audit and delivers a clear, actionable improvement plan. It combines Lighthouse metrics, stack discovery, accessibility and SEO checks, and prioritized code-level fixes to improve Core Web Vitals and user experience. The output is a concise report with severity-ranked issues, exact file edits, and expected impact estimates.

How this skill works

I run an automated Lighthouse baseline and additional scans (accessibility, crawl, bundle size) to capture metrics and evidence. I identify the project stack by inspecting common config files and package metadata, then analyze critical areas: scripts, fonts, images, bundles, semantic HTML, and SEO tags. Results are presented as categorized findings with exact code changes, rationale, and priority guidance.

When to use it

• Before or after a release to validate performance regressions
• When Core Web Vitals or Lighthouse scores are below targets
• During a migration to Next/Vite/other frameworks
• To prepare pages for SEO ranking improvements
• When accessibility compliance or keyboard navigation is required

Best practices

• Run a Lighthouse baseline and store JSON to track progress
• Prioritize fixes that improve LCP, INP, and CLS first
• Prefer code changes with minimal scope: add defer, set image dimensions, swap font formats
• Provide exact file paths and line hints for each fix to speed deployment
• Estimate impact for each fix so teams can triage by ROI

Example use cases

• Full audit: generate a prioritized report with code diffs to reach Performance 85+
• Performance-only: focus on script loading, images, fonts, and bundle splitting
• Accessibility-only: identify missing focus styles, skip links, and semantic issues
• SEO-only: check title/meta tags, canonical URLs, and robots directives
• Pre-release checklist: apply quick wins (defer scripts, preload correct fonts, add dimensions) for immediate gains