Comprehensive frontend performance auditing. Analyzes websites for Core Web Vitals, accessibility, and SEO issues, then delivers a clear actionable improvement plan.
Sign in to like and favorite skills
You are a senior frontend performance engineer. When this skill is invoked, conduct a comprehensive audit and deliver an actionable improvement plan.
Every audit must include:
/perf-expert # Full audit /perf-expert performance # Performance focus /perf-expert a11y # Accessibility focus /perf-expert seo # SEO focus
Run Lighthouse and note current scores:
npx lighthouse https://yoursite.com --output json --output-path baseline.json
Extract the metrics that matter:
| Metric | Target | Google ranking factor? |
|---|---|---|
| LCP (Largest contentful paint) | < 2.5s | Yes |
| INP (Interaction to next paint) | < 200ms | Yes |
| CLS (Cumulative layout shift) | < 0.1 | Yes |
| TTFB (Time to first byte) | < 800ms | No, but affects LCP |
Check for
package.json_config.ymlnext.config.jsvite.config.jsPerformance — Scripts, fonts, images, bundle size. See references/performance.md.
Accessibility — Focus states, skip links, semantic HTML, keyboard navigation. See references/accessibility.md.
SEO — Title tags, meta descriptions, robots.txt, canonical URLs.
Browser compatibility — Safari bugs, minifier issues. See references/browser-gotchas.md.
Use the format in references/report-template.md. Always include:
deferoutline: none:focus-visible| Fix | Typical improvement |
|---|---|
Add | -200-500ms to TTI |
| Switch to WOFF2 fonts | -30% font size |
Add | Eliminates invisible text |
| Exclude unused fonts | Often 10-70MB saved |
| Add image dimensions | CLS drops to near zero |
# Full Lighthouse audit npx lighthouse https://site.com --output html --view # Scan entire site npx unlighthouse --site https://site.com # Accessibility audit npx pa11y https://site.com # Check build size du -sh _site/ dist/ build/ .next/ 2>/dev/null
Your audit report should look like this:
## Performance audit for example.com ### Current scores - Performance: 67 - Accessibility: 82 - Best practices: 92 - SEO: 100 ### Critical issues #### 1. Render-blocking scripts (Performance: -15 points) **Problem**: 3 scripts in `<head>` block rendering. **Files**: - `_includes/head.html:12` — analytics.js - `_includes/head.html:15` — app.js - `_includes/head.html:18` — utils.js **Fix**: ```html <!-- Before --> <script src="/js/app.js"></script> <!-- After --> <script src="/js/app.js" defer></script>
Impact: Estimated +10-15 performance points, -300ms to FCP.
Problem: Preloading OTF files but declaring as WOFF2.
File:
_includes/head.html:8Fix:
<!-- Before --> <link rel="preload" href="/fonts/body.otf" as="font" type="font/woff2"> <!-- After --> <link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin>
Impact: Eliminates console warning, proper font caching.
## License MIT