web-performance-optimization

Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance

Aller à l'installation

Dépôt: BEKO2210/Firstbrain
Dernière activité de la source: 17 mai 2026 à 12:40
Langue détectée de SKILL.md: anglais
Étoiles: 15
Forks: 2

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Retour à la recherche Retour à l’installation

name	web-performance-optimization
description	Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance
type	skill
created	2026-02-27T00:00:00.000Z
domain	productivity
category	developer-experience
risk	unknown
source	community
tags	["skill","productivity","developer-experience","web","performance","optimization"]

Web Performance Optimization

Overview

Help 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.

When to Use This Skill

Use when website or app is loading slowly
Use when optimizing for Core Web Vitals (LCP, FID, CLS)
Use when reducing JavaScript bundle size
Use when improving Time to Interactive (TTI)
Use when optimizing images and assets
Use when implementing caching strategies
Use when debugging performance bottlenecks
Use when preparing for performance audits

How It Works

Step 1: Measure Current Performance

I'll help you establish baseline metrics:

Run Lighthouse audits
Measure Core Web Vitals (LCP, FID, CLS)
Check bundle sizes
Analyze network waterfall
Identify performance bottlenecks

Step 2: Identify Issues

Analyze performance problems:

Large JavaScript bundles
Unoptimized images
Render-blocking resources
Slow server response times
Missing caching headers
Layout shifts
Long tasks blocking main thread

Step 3: Prioritize Optimizations

Focus on high-impact improvements:

Critical rendering path optimization
Code splitting and lazy loading
Image optimization
Caching strategies
Third-party script optimization

Step 4: Implement Optimizations

Apply performance improvements:

Optimize assets (images, fonts, CSS, JS)
Implement code splitting
Add caching headers
Lazy load non-critical resources
Optimize critical rendering path

Step 5: Verify Improvements

Measure impact of changes:

Re-run Lighthouse audits
Compare before/after metrics
Monitor real user metrics (RUM)
Test on different devices and networks

Examples

Example 1: Optimizing Core Web Vitals

## Performance Audit Results

### Current Metrics (Before Optimization)
  4.2s ❌ (should be < 2.5s)
  180ms ❌ (should be < 100ms)
  0.25 ❌ (should be < 0.1)
  62/100



  Hero image (2.5MB) loads slowly
  Large JavaScript bundle (850KB) blocks main thread
  Images without dimensions cause layout shifts





 Hero image is 2.5MB and loads slowly


\\`html
<!-- Before: Unoptimized image -->


<!-- After: Optimized with modern formats -->

  
  
  

\\`


 Compress image to < 200KB
 Use CDN for faster delivery
 Preload hero image: 



 850KB JavaScript bundle blocks main thread



 
\\`javascript
// Before: Everything in one bundle
import { HeavyComponent } from './HeavyComponent';
import { Analytics } from './analytics';
import { ChatWidget } from './chat';

// After: Lazy load non-critical code
const HeavyComponent = lazy(() => import('./HeavyComponent'));
const ChatWidget = lazy(() => import('./chat'));

// Load analytics after page interactive
if (typeof window !== 'undefined') {
  window.addEventListener('load', () => {

 
\\`bash

npx webpack-bundle-analyzer


npm uninstall moment  # Use date-fns instead (smaller)
npm install date-fns
\\`

 
\\`html
<!-- Before: Blocks rendering -->


<!-- After: Deferred -->

\\`



 Images without dimensions cause layout shifts


\\`html
<!-- Before: No dimensions -->


<!-- After: With dimensions -->

\\`


\\`css
/* Reserve space for content that loads later

## Bundle Size Optimization

### Current State
- **Total Bundle:** 850KB (gzipped: 280KB)
- **Main Bundle:** 650KB
- **Vendor Bundle:** 200KB
- **Load Time (3G):** 8.2s

### Analysis

\`\`\`bash
# Analyze bundle composition
npx webpack-bundle-analyzer dist/stats.json
\`\`\`

**Findings:**
1. Moment.js: 67KB (can replace with date-fns: 12KB)
2. Lodash: 72KB (using entire library, only need 5 functions)
3. Unused code: ~150KB of dead code
4. No code splitting: Everything in one bundle

### Optimization Steps

#### 1. Replace Heavy Dependencies

\`\`\`bash
# Remove moment.js (67KB) → Use date-fns (12KB)
npm uninstall moment
npm install date-fns

# Before
import moment from 'moment';
const formatted = moment(date).format('YYYY-MM-DD');

# After
import { format } from 'date-fns';
const formatted = format(date, 'yyyy-MM-dd');
\`\`\`

**Savings:** 55KB

#### 2. Use Lodash Selectively

\`\`\`javascript
// Before: Import entire library (72KB)
import _ from 'lodash';
const unique = _.uniq(array);

// After: Import only what you need (5KB)
import uniq from 'lodash/uniq';
const unique = uniq(array);

// Or use native methods
const unique = [...new Set(array)];
\`\`\`

**Savings:** 67KB

#### 3. Implement Code Splitting

\`\`\`javascript
// Next.js example
import dynamic from 'next/dynamic';

// Lazy load heavy components
const Chart = dynamic(() => import('./Chart'), {
  loading: () => <div>Loading chart...</div>,
  ssr: false
});

const AdminPanel = dynamic(() => import('./AdminPanel'), {
  loading: () => <div>Loading...</div>
});

// Route-based code splitting (automatic in Next.js)
// pages/admin.js - Only loaded when visiting /admin
// pages/dashboard.js - Only loaded when visiting /dashboard
\`\`\`

#### 4. Remove Dead Code

\`\`\`javascript
// Enable tree shaking in webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false
  }
};

// In package.json
{
  "sideEffects": false
}
\`\`\`

#### 5. Optimize Third-Party Scripts

\`\`\`html
<!-- Before: Loads immediately -->
<script src="https://analytics.com/script.js"></script>

<!-- After: Load after page interactive -->
<script>
  window.addEventListener('load', () => {
    const script = document.createElement('script');
    script.src = 'https://analytics.com/script.js';
    script.async = true;
    document.body.appendChild(script);
  });
</script>
\`\`\`

### Results

- **Total Bundle:** 380KB ✅ (reduced by 55%)
- **Main Bundle:** 180KB ✅
- **Vendor Bundle:** 80KB ✅
- **Load Time (3G):** 3.1s ✅ (improved by 62%)

## Image Optimization

### Current Issues
- 15 images totaling 12MB
- No modern formats (WebP, AVIF)
- No responsive images
- No lazy loading

### Optimization Strategy

#### 1. Convert to Modern Formats

\`\`\`bash
# Install image optimization tools
npm install sharp

# Conversion script (optimize-images.js)
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

async function optimizeImage(inputPath, outputDir) {
  const filename = path.basename(inputPath, path.extname(inputPath));
  
  // Generate WebP
  await sharp(inputPath)
    .webp({ quality: 80 })
    .toFile(path.join(outputDir, \`\${filename}.webp\`));
  
  // Generate AVIF (best compression)
  await sharp(inputPath)
    .avif({ quality: 70 })
    .toFile(path.join(outputDir, \`\${filename}.avif\`));
  
  // Generate optimized JPEG fallback
  await sharp(inputPath)
    .jpeg({ quality: 80, progressive: true })
    .toFile(path.join(outputDir, \`\${filename}.jpg\`));
}

// Process all images
const images = fs.readdirSync('./images');
images.forEach(img => {
  optimizeImage(\`./images/\${img}\`, './images/optimized');
});
\`\`\`

#### 2. Implement Responsive Images

\`\`\`html
<!-- Responsive images with modern formats -->
<picture>
  <!-- AVIF for browsers that support it (best compression) -->
  <source 
    srcset="
      /images/hero-400.avif 400w,
      /images/hero-800.avif 800w,
      /images/hero-1200.avif 1200w
    "
    type="image/avif"
    sizes="(max-width: 768px) 100vw, 50vw"
  >
  
  <!-- WebP for browsers that support it -->
  <source 
    srcset="
      /images/hero-400.webp 400w,
      /images/hero-800.webp 800w,
      /images/hero-1200.webp 1200w
    "
    type="image/webp"
    sizes="(max-width: 768px) 100vw, 50vw"
  >
  
  <!-- JPEG fallback -->
  <img 
    src="/images/hero-800.jpg"
    srcset="
      /images/hero-400.jpg 400w,
      /images/hero-800.jpg 800w,
      /images/hero-1200.jpg 1200w
    "
    sizes="(max-width: 768px) 100vw, 50vw"
    alt="Hero image"
    width="1200"
    height="600"
    loading="lazy"
  >
</picture>
\`\`\`

#### 3. Lazy Loading

\`\`\`html
<!-- Native lazy loading -->
<img 
  src="/image.jpg" 
  alt="Description"
  loading="lazy"
  width="800"
  height="600"
>

<!-- Eager loading for above-the-fold images -->
<img 
  src="/hero.jpg" 
  alt="Hero"
  loading="eager"
  fetchpriority="high"
>
\`\`\`

#### 4. Next.js Image Component

\`\`\`javascript
import Image from 'next/image';

// Automatic optimization
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority  // For above-the-fold images
  quality={80}
/>

// Lazy loaded
<Image
  src="/product.jpg"
  alt="Product"
  width={400}
  height={300}
  loading="lazy"
/>
\`\`\`

### Results

| Metric | Before | After | Improvement |
|--------|--------|-------|-------------|
| Total Image Size | 12MB | 1.8MB | 85% reduction |
| LCP | 4.5s | 1.6s | 64% faster |
| Page Load (3G) | 18s | 4.2s | 77% faster |

# Test with throttling
lighthouse https://yoursite.com --throttling.cpuSlowdownMultiplier=4

# Analyze bundle
npx webpack-bundle-analyzer dist/stats.json

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

// Next.js: Static generation
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60 // Regenerate every 60 seconds
  };
}