General
1,627 installs
Performance optimization
by addyosmani/web-quality-skills
Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix…
Skill content
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