Agent skill · software engineering · secondsky
web-performance-optimization
Optimizes web application performance through code splitting, lazy loading, caching strategies, and Core Web Vitals monitoring. Use when improving page load times, implementing service workers, or reducing bundle sizes.
Why this skill is useful
Provides specific code examples for performance optimization techniques that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
Web Performance Optimization Overview Implement performance optimization strategies including lazy loading, code splitting, caching, compression, and monitoring to improve Core Web Vitals and user experience. When to Use Slow page load times High Largest Contentful Paint (LCP) Large bundle sizes Frequent Cumulative Layout Shift (CLS) Mobile performance issues Code Splitting (React) Webpack Bundle Optimization Image Optimization Service Worker Caching Core Web Vitals Monitoring Performance Targets Metric Good Needs Improvement -------- ------ ------------------- LCP <2.5s 2.5-4s INP <200ms 200-500ms CLS <0.1 0.1-0.25 TTI <3.8s 3.8-7.3s Note: INP (Interaction to Next Paint) replaced FID (First Input Delay) as a Core Web Vital in March 2024. INP provides a more comprehensive measure of page responsiveness by capturing the full duration of interactions, not just the input delay. Compression (Nginx) Best Practices Minimize bundle size with code splitting Optimize images with appropriate formats Implement lazy loading strategically Use HTTP caching headers Enable gzip/brotli compression Monitor Core Web Vitals continuously Implement service workers Defer non-critical JavaScript Optimize critical rendering path Test on real devices and networks Optimization Checklist [ ] Enable code splitting for routes [ ] Lazy load below-fold components [ ] Optimize and compress images [ ] Implement service worker caching [ ] Enable gzip/brotli compression [ ] Monitor Core Web Vitals [ ] Minimize render-blocking resources Additional Configuration See references/compression-monitoring.md for: Webpack compression plugin setup Apache .htaccess compression config TTFB monitoring implementation Puppeteer automation for measurement See references/typescript-advanced.md for: TypeScript lazyLoad utility TypeScript image component Advanced service worker with offline fallback TerserPlugin configuration Complete PerformanceMetrics interface Tools Lighthouse / PageSpeed Insights WebPageTest Chrome …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/web-performance-optimization