Web Performance Optimization

1---
2name: web-performance-optimization
3description: "Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance"
4---
5 
6# Web Performance Optimization
7 
8## Overview
9 
10Help developers optimize website and web application performance to improve user experience, SEO rankings, and conversion rates. This skill provides systematic approaches to measure, analyze, and improve loading speed, runtime performance, and Core Web Vitals metrics.
11 
12## When to Use This Skill
13 
14- Use when website or app is loading slowly
15- Use when optimizing for Core Web Vitals (LCP, FID, CLS)
16- Use when reducing JavaScript bundle size
17- Use when improving Time to Interactive (TTI)
18- Use when optimizing images and assets
19- Use when implementing caching strategies
20- Use when debugging performance bottlenecks
21- Use when preparing for performance audits
22 
23## How It Works
24 
25### Step 1: Measure Current Performance
26 
27I'll help you establish baseline metrics:
28- Run Lighthouse audits
29- Measure Core Web Vitals (LCP, FID, CLS)
30- Check bundle sizes
31- Analyze network waterfall
32- Identify performance bottlenecks
33 
34### Step 2: Identify Issues
35 
36Analyze performance problems:
37- Large JavaScript bundles
38- Unoptimized images
39- Render-blocking resources
40- Slow server response times
41- Missing caching headers
42- Layout shifts
43- Long tasks blocking main thread
44 
45### Step 3: Prioritize Optimizations
46 
47Focus on high-impact improvements:
48- Critical rendering path optimization
49- Code splitting and lazy loading
50- Image optimization
51- Caching strategies
52- Third-party script optimization
53 
54### Step 4: Implement Optimizations
55 
56Apply performance improvements:
57- Optimize assets (images, fonts, CSS, JS)
58- Implement code splitting
59- Add caching headers
60- Lazy load non-critical resources
61- Optimize critical rendering path
62 
63### Step 5: Verify Improvements
64 
65Measure impact of changes:
66- Re-run Lighthouse audits
67- Compare before/after metrics
68- Monitor real user metrics (RUM)
69- Test on different devices and networks
70 
71## Examples
72 
73### Example 1: Optimizing Core Web Vitals
74 
75```markdown
76## Performance Audit Results
77 
78### Current Metrics (Before Optimization)
79- **LCP (Largest Contentful Paint):** 4.2s ❌ (should be < 2.5s)
80- **FID (First Input Delay):** 180ms ❌ (should be < 100ms)
81- **CLS (Cumulative Layout Shift):** 0.25 ❌ (should be < 0.1)
82- **Lighthouse Score:** 62/100
83 
84### Issues Identified
85 
861. **LCP Issue:** Hero image (2.5MB) loads slowly
872. **FID Issue:** Large JavaScript bundle (850KB) blocks main thread
883. **CLS Issue:** Images without dimensions cause layout shifts
89 
90### Optimization Plan
91 
92#### Fix LCP (Largest Contentful Paint)
93 
94**Problem:** Hero image is 2.5MB and loads slowly
95 
96**Solutions:**
97\`\`\`html
98<!-- Before: Unoptimized image -->
99<img src="/hero.jpg" alt="Hero">
100 
101<!-- After: Optimized with modern formats -->
102<picture>
103  <source srcset="/hero.avif" type="image/avif">
104  <source srcset="/hero.webp" type="image/webp">
105  <img 
106    src="/hero.jpg" 
107    alt="Hero"
108    width="1200" 
109    height="600"
110    loading="eager"
111    fetchpriority="high"
112  >
113</picture>
114\`\`\`
115 
116**Additional optimizations:**
117- Compress image to < 200KB
118- Use CDN for faster delivery
119- Preload hero image: `<link rel="preload" as="image" href="/hero.avif">`
120 
121#### Fix FID (First Input Delay)
122 
123**Problem:** 850KB JavaScript bundle blocks main thread
124 
125**Solutions:**
126 
1271. **Code Splitting:**
128\`\`\`javascript
129// Before: Everything in one bundle
130import { HeavyComponent } from './HeavyComponent';
131import { Analytics } from './analytics';
132import { ChatWidget } from './chat';
133 
134// After: Lazy load non-critical code
135const HeavyComponent = lazy(() => import('./HeavyComponent'));
136const ChatWidget = lazy(() => import('./chat'));
137 
138// Load analytics after page interactive
139if (typeof window !== 'undefined') {
140  window.addEventListener('load', () => {
141    import('./analytics').then(({ Analytics }) => {
142      Analytics.init();
143    });
144  });
145}
146\`\`\`
147 
1482. **Remove Unused Dependencies:**
149\`\`\`bash
150# Analyze bundle
151npx webpack-bundle-analyzer
152 
153# Remove unused packages
154npm uninstall moment  # Use date-fns instead (smaller)
155npm install date-fns
156\`\`\`
157 
1583. **Defer Non-Critical Scripts:**
159\`\`\`html
160<!-- Before: Blocks rendering -->
161<script src="/analytics.js"></script>
162 
163<!-- After: Deferred -->
164<script src="/analytics.js" defer></script>
165\`\`\`
166 
167#### Fix CLS (Cumulative Layout Shift)
168 
169**Problem:** Images without dimensions cause layout shifts
170 
171**Solutions:**
172\`\`\`html
173<!-- Before: No dimensions -->
174<img src="/product.jpg" alt="Product">
175 
176<!-- After: With dimensions -->
177<img 
178  src="/product.jpg" 
179  alt="Product"
180  width="400" 
181  height="300"
182  style="aspect-ratio: 4/3;"
183>
184\`\`\`
185 
186**For dynamic content:**
187\`\`\`css
188/* Reserve space for content that loads later */
189.skeleton-loader {
190  min-height: 200px;
191  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
192  background-size: 200% 100%;
193  animation: loading 1.5s infinite;
194}
195 
196@keyframes loading {
197  0% { background-position: 200% 0; }
198  100% { background-position: -200% 0; }
199}
200\`\`\`
201 
202### Results After Optimization
203 
204- **LCP:** 1.8s ✅ (improved by 57%)
205- **FID:** 45ms ✅ (improved by 75%)
206- **CLS:** 0.05 ✅ (improved by 80%)
207- **Lighthouse Score:** 94/100 ✅
208```
209 
210### Example 2: Reducing JavaScript Bundle Size
211 
212```markdown
213## Bundle Size Optimization
214 
215### Current State
216- **Total Bundle:** 850KB (gzipped: 280KB)
217- **Main Bundle:** 650KB
218- **Vendor Bundle:** 200KB
219- **Load Time (3G):** 8.2s
220 
221### Analysis
222 
223\`\`\`bash
224# Analyze bundle composition
225npx webpack-bundle-analyzer dist/stats.json
226\`\`\`
227 
228**Findings:**
2291. Moment.js: 67KB (can replace with date-fns: 12KB)
2302. Lodash: 72KB (using entire library, only need 5 functions)
2313. Unused code: ~150KB of dead code
2324. No code splitting: Everything in one bundle
233 
234### Optimization Steps
235 
236#### 1. Replace Heavy Dependencies
237 
238\`\`\`bash
239# Remove moment.js (67KB) → Use date-fns (12KB)
240npm uninstall moment
241npm install date-fns
242 
243# Before
244import moment from 'moment';
245const formatted = moment(date).format('YYYY-MM-DD');
246 
247# After
248import { format } from 'date-fns';
249const formatted = format(date, 'yyyy-MM-dd');
250\`\`\`
251 
252**Savings:** 55KB
253 
254#### 2. Use Lodash Selectively
255 
256\`\`\`javascript
257// Before: Import entire library (72KB)
258import _ from 'lodash';
259const unique = _.uniq(array);
260 
261// After: Import only what you need (5KB)
262import uniq from 'lodash/uniq';
263const unique = uniq(array);
264 
265// Or use native methods
266const unique = [...new Set(array)];
267\`\`\`
268 
269**Savings:** 67KB
270 
271#### 3. Implement Code Splitting
272 
273\`\`\`javascript
274// Next.js example
275import dynamic from 'next/dynamic';
276 
277// Lazy load heavy components
278const Chart = dynamic(() => import('./Chart'), {
279  loading: () => <div>Loading chart...</div>,
280  ssr: false
281});
282 
283const AdminPanel = dynamic(() => import('./AdminPanel'), {
284  loading: () => <div>Loading...</div>
285});
286 
287// Route-based code splitting (automatic in Next.js)
288// pages/admin.js - Only loaded when visiting /admin
289// pages/dashboard.js - Only loaded when visiting /dashboard
290\`\`\`
291 
292#### 4. Remove Dead Code
293 
294\`\`\`javascript
295// Enable tree shaking in webpack.config.js
296module.exports = {
297  mode: 'production',
298  optimization: {
299    usedExports: true,
300    sideEffects: false
301  }
302};
303 
304// In package.json
305{
306  "sideEffects": false
307}
308\`\`\`
309 
310#### 5. Optimize Third-Party Scripts
311 
312\`\`\`html
313<!-- Before: Loads immediately -->
314<script src="https://analytics.com/script.js"></script>
315 
316<!-- After: Load after page interactive -->
317<script>
318  window.addEventListener('load', () => {
319    const script = document.createElement('script');
320    script.src = 'https://analytics.com/script.js';
321    script.async = true;
322    document.body.appendChild(script);
323  });
324</script>
325\`\`\`
326 
327### Results
328 
329- **Total Bundle:** 380KB ✅ (reduced by 55%)
330- **Main Bundle:** 180KB ✅
331- **Vendor Bundle:** 80KB ✅
332- **Load Time (3G):** 3.1s ✅ (improved by 62%)
333```
334 
335### Example 3: Image Optimization Strategy
336 
337```markdown
338## Image Optimization
339 
340### Current Issues
341- 15 images totaling 12MB
342- No modern formats (WebP, AVIF)
343- No responsive images
344- No lazy loading
345 
346### Optimization Strategy
347 
348#### 1. Convert to Modern Formats
349 
350\`\`\`bash
351# Install image optimization tools
352npm install sharp
353 
354# Conversion script (optimize-images.js)
355const sharp = require('sharp');
356const fs = require('fs');
357const path = require('path');
358 
359async function optimizeImage(inputPath, outputDir) {
360  const filename = path.basename(inputPath, path.extname(inputPath));
361  
362  // Generate WebP
363  await sharp(inputPath)
364    .webp({ quality: 80 })
365    .toFile(path.join(outputDir, \`\${filename}.webp\`));
366  
367  // Generate AVIF (best compression)
368  await sharp(inputPath)
369    .avif({ quality: 70 })
370    .toFile(path.join(outputDir, \`\${filename}.avif\`));
371  
372  // Generate optimized JPEG fallback
373  await sharp(inputPath)
374    .jpeg({ quality: 80, progressive: true })
375    .toFile(path.join(outputDir, \`\${filename}.jpg\`));
376}
377 
378// Process all images
379const images = fs.readdirSync('./images');
380images.forEach(img => {
381  optimizeImage(\`./images/\${img}\`, './images/optimized');
382});
383\`\`\`
384 
385#### 2. Implement Responsive Images
386 
387\`\`\`html
388<!-- Responsive images with modern formats -->
389<picture>
390  <!-- AVIF for browsers that support it (best compression) -->
391  <source 
392    srcset="
393      /images/hero-400.avif 400w,
394      /images/hero-800.avif 800w,
395      /images/hero-1200.avif 1200w
396    "
397    type="image/avif"
398    sizes="(max-width: 768px) 100vw, 50vw"
399  >
400  
401  <!-- WebP for browsers that support it -->
402  <source 
403    srcset="
404      /images/hero-400.webp 400w,
405      /images/hero-800.webp 800w,
406      /images/hero-1200.webp 1200w
407    "
408    type="image/webp"
409    sizes="(max-width: 768px) 100vw, 50vw"
410  >
411  
412  <!-- JPEG fallback -->
413  <img 
414    src="/images/hero-800.jpg"
415    srcset="
416      /images/hero-400.jpg 400w,
417      /images/hero-800.jpg 800w,
418      /images/hero-1200.jpg 1200w
419    "
420    sizes="(max-width: 768px) 100vw, 50vw"
421    alt="Hero image"
422    width="1200"
423    height="600"
424    loading="lazy"
425  >
426</picture>
427\`\`\`
428 
429#### 3. Lazy Loading
430 
431\`\`\`html
432<!-- Native lazy loading -->
433<img 
434  src="/image.jpg" 
435  alt="Description"
436  loading="lazy"
437  width="800"
438  height="600"
439>
440 
441<!-- Eager loading for above-the-fold images -->
442<img 
443  src="/hero.jpg" 
444  alt="Hero"
445  loading="eager"
446  fetchpriority="high"
447>
448\`\`\`
449 
450#### 4. Next.js Image Component
451 
452\`\`\`javascript
453import Image from 'next/image';
454 
455// Automatic optimization
456<Image
457  src="/hero.jpg"
458  alt="Hero"
459  width={1200}
460  height={600}
461  priority  // For above-the-fold images
462  quality={80}
463/>
464 
465// Lazy loaded
466<Image
467  src="/product.jpg"
468  alt="Product"
469  width={400}
470  height={300}
471  loading="lazy"
472/>
473\`\`\`
474 
475### Results
476 
477| Metric | Before | After | Improvement |
478|--------|--------|-------|-------------|
479| Total Image Size | 12MB | 1.8MB | 85% reduction |
480| LCP | 4.5s | 1.6s | 64% faster |
481| Page Load (3G) | 18s | 4.2s | 77% faster |
482```
483 
484## Best Practices
485 
486### ✅ Do This
487 
488- **Measure First** - Always establish baseline metrics before optimizing
489- **Use Lighthouse** - Run audits regularly to track progress
490- **Optimize Images** - Use modern formats (WebP, AVIF) and responsive images
491- **Code Split** - Break large bundles into smaller chunks
492- **Lazy Load** - Defer non-critical resources
493- **Cache Aggressively** - Set proper cache headers for static assets
494- **Minimize Main Thread Work** - Keep JavaScript execution under 50ms chunks
495- **Preload Critical Resources** - Use `<link rel="preload">` for critical assets
496- **Use CDN** - Serve static assets from CDN for faster delivery
497- **Monitor Real Users** - Track Core Web Vitals from real users
498 
499### ❌ Don't Do This
500 
501- **Don't Optimize Blindly** - Measure first, then optimize
502- **Don't Ignore Mobile** - Test on real mobile devices and slow networks
503- **Don't Block Rendering** - Avoid render-blocking CSS and JavaScript
504- **Don't Load Everything Upfront** - Lazy load non-critical resources
505- **Don't Forget Dimensions** - Always specify image width/height
506- **Don't Use Synchronous Scripts** - Use async or defer attributes
507- **Don't Ignore Third-Party Scripts** - They often cause performance issues
508- **Don't Skip Compression** - Always compress and minify assets
509 
510## Common Pitfalls
511 
512### Problem: Optimized for Desktop but Slow on Mobile
513**Symptoms:** Good Lighthouse score on desktop, poor on mobile
514**Solution:**
515- Test on real mobile devices
516- Use Chrome DevTools mobile throttling
517- Optimize for 3G/4G networks
518- Reduce JavaScript execution time
519```bash
520# Test with throttling
521lighthouse https://yoursite.com --throttling.cpuSlowdownMultiplier=4
522```
523 
524### Problem: Large JavaScript Bundle
525**Symptoms:** Long Time to Interactive (TTI), high FID
526**Solution:**
527- Analyze bundle with webpack-bundle-analyzer
528- Remove unused dependencies
529- Implement code splitting
530- Lazy load non-critical code
531```bash
532# Analyze bundle
533npx webpack-bundle-analyzer dist/stats.json
534```
535 
536### Problem: Images Causing Layout Shifts
537**Symptoms:** High CLS score, content jumping
538**Solution:**
539- Always specify width and height
540- Use aspect-ratio CSS property
541- Reserve space with skeleton loaders
542```css
543img {
544  aspect-ratio: 16 / 9;
545  width: 100%;
546  height: auto;
547}
548```
549 
550### Problem: Slow Server Response Time
551**Symptoms:** High TTFB (Time to First Byte)
552**Solution:**
553- Implement server-side caching
554- Use CDN for static assets
555- Optimize database queries
556- Consider static site generation (SSG)
557```javascript
558// Next.js: Static generation
559export async function getStaticProps() {
560  const data = await fetchData();
561  return {
562    props: { data },
563    revalidate: 60 // Regenerate every 60 seconds
564  };
565}
566```
567 
568## Performance Checklist
569 
570### Images
571- [ ] Convert to modern formats (WebP, AVIF)
572- [ ] Implement responsive images
573- [ ] Add lazy loading
574- [ ] Specify dimensions (width/height)
575- [ ] Compress images (< 200KB each)
576- [ ] Use CDN for delivery
577 
578### JavaScript
579- [ ] Bundle size < 200KB (gzipped)
580- [ ] Implement code splitting
581- [ ] Lazy load non-critical code
582- [ ] Remove unused dependencies
583- [ ] Minify and compress
584- [ ] Use async/defer for scripts
585 
586### CSS
587- [ ] Inline critical CSS
588- [ ] Defer non-critical CSS
589- [ ] Remove unused CSS
590- [ ] Minify CSS files
591- [ ] Use CSS containment
592 
593### Caching
594- [ ] Set cache headers for static assets
595- [ ] Implement service worker
596- [ ] Use CDN caching
597- [ ] Cache API responses
598- [ ] Version static assets
599 
600### Core Web Vitals
601- [ ] LCP < 2.5s
602- [ ] FID < 100ms
603- [ ] CLS < 0.1
604- [ ] TTFB < 600ms
605- [ ] TTI < 3.8s
606 
607## Performance Tools
608 
609### Measurement Tools
610- **Lighthouse** - Comprehensive performance audit
611- **WebPageTest** - Detailed waterfall analysis
612- **Chrome DevTools** - Performance profiling
613- **PageSpeed Insights** - Real user metrics
614- **Web Vitals Extension** - Monitor Core Web Vitals
615 
616### Analysis Tools
617- **webpack-bundle-analyzer** - Visualize bundle composition
618- **source-map-explorer** - Analyze bundle size
619- **Bundlephobia** - Check package sizes before installing
620- **ImageOptim** - Image compression tool
621 
622### Monitoring Tools
623- **Google Analytics** - Track Core Web Vitals
624- **Sentry** - Performance monitoring
625- **New Relic** - Application performance monitoring
626- **Datadog** - Real user monitoring
627 
628## Related Skills
629 
630- `@react-best-practices` - React performance patterns
631- `@frontend-dev-guidelines` - Frontend development standards
632- `@systematic-debugging` - Debug performance issues
633- `@senior-architect` - Architecture for performance
634 
635## Additional Resources
636 
637- [Web.dev Performance](https://web.dev/performance/)
638- [Core Web Vitals](https://web.dev/vitals/)
639- [Lighthouse Documentation](https://developers.google.com/web/tools/lighthouse)
640- [MDN Performance Guide](https://developer.mozilla.org/en-US/docs/Web/Performance)
641- [Next.js Performance](https://nextjs.org/docs/advanced-features/measuring-performance)
642- [Image Optimization Guide](https://web.dev/fast/#optimize-your-images)
643 
644---
645 
646**Pro Tip:** Focus on Core Web Vitals (LCP, FID, CLS) first - they have the biggest impact on user experience and SEO rankings!
647