performance
Lighthouse-based performance optimization with budgets, critical rendering path guidance, and Core Web Vitals alignment.
- Defines resource budgets (1.5 MB total, <300 KB JS, <100 KB CSS) and provides server response optimization (TTFB <800ms, HTTP/2, edge caching)
- Covers resource loading strategies: preconnect/preload directives, deferred CSS, script deferral patterns, and code splitting techniques
- Includes image optimization (AVIF/WebP selection, responsive markup, LCP prioritization) and font strategies (variable fonts, font-display swap, subsetting)
- Addresses runtime performance: layout thrashing prevention, debouncing, requestAnimationFrame, and list virtualization for large datasets
- Provides caching strategies (Cache-Control headers, service worker patterns) and third-party script management (async loading, interaction-based delays, facade patterns)
Performance optimization
Deep performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization.
How it works
- Identify performance bottlenecks in code and assets
- Prioritize by impact on Core Web Vitals
- Provide specific optimizations with code examples
- Measure improvement with before/after metrics
Performance budget
| Resource | Budget | Rationale |
|---|---|---|
| Total page weight | < 1.5 MB | 3G loads in ~4s |
| JavaScript (compressed) | < 300 KB | Parsing + execution time |
| CSS (compressed) | < 100 KB | Render blocking |
| Images (above-fold) | < 500 KB | LCP impact |
More from addyosmani/web-quality-skills
accessibility
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
21.9Kseo
Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".
21.2Kcore-web-vitals
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
6.5Kweb-quality-audit
Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".
6.3Kbest-practices
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".
6.0K