Web Performance: Make Your Site Lightning Fast

Website speed matters. A 1-second delay can reduce conversions by 7%. Users expect pages to load in under 3 seconds. Let’s make your site blazing fast.

Why Performance Matters

  • User Experience - Faster sites feel better
  • SEO - Google ranks faster sites higher
  • Conversions - Speed directly impacts revenue
  • Mobile - Essential on slow networks

Measuring Performance

Tools

  • Lighthouse - Built into Chrome DevTools
  • PageSpeed Insights - Google’s tool
  • WebPageTest - Detailed analysis
  • Chrome DevTools - Network & Performance tabs

Core Web Vitals

  • LCP (Largest Contentful Paint) - < 2.5s
  • FID (First Input Delay) - < 100ms
  • CLS (Cumulative Layout Shift) - < 0.1

Image Optimization

Modern Formats

```html Description ```

Lazy Loading

```html Description ```

Responsive Images

```html <img srcset=“small.jpg 480w, medium.jpg 800w, large.jpg 1200w” sizes=“(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px” src=“medium.jpg” alt=“Responsive image”

```

Code Optimization

Minimize JavaScript

```javascript // Bad: Load entire library import _ from ‘lodash’;

// Good: Import only what you need import debounce from ‘lodash/debounce’; ```

Code Splitting

```javascript // Dynamic imports const Component = lazy(() => import(’./Component’));

// Route-based splitting const Dashboard = lazy(() => import(’./pages/Dashboard’)); ```

Remove Unused Code

```bash

Analyze bundle

npm run build — —stats npx webpack-bundle-analyzer ```

Caching Strategies

HTTP Caching

```nginx

Cache static assets

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 1y; add_header Cache-Control “public, immutable”; } ```

Service Workers

```javascript // Cache-first strategy self.addEventListener(‘fetch’, event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); }); ```

Resource Loading

Preload Critical Resources

```html

\`\`\`

Defer Non-Critical JavaScript

```html

```

DNS Prefetch

```html

\`\`\`

CSS Optimization

Critical CSS

```html

\`\`\`

Remove Unused CSS

```bash npm install -D @fullhuman/postcss-purgecss ```

Font Optimization

Font Display

```css @font-face { font-family: ‘Custom’; src: url(‘/font.woff2’) format(‘woff2’); font-display: swap; /* Show fallback immediately */ } ```

Variable Fonts

```css /* One file for all weights */ @font-face { font-family: ‘Inter’; src: url(‘/Inter-Variable.woff2’) format(‘woff2’); font-weight: 100 900; } ```

CDN & Hosting

Use a CDN

  • Cloudflare (free)
  • AWS CloudFront
  • Vercel Edge Network
  • Netlify

Compression

```nginx

Enable gzip

gzip on; gzip_types text/css application/javascript image/svg+xml; gzip_min_length 1000;

Enable Brotli (better compression)

brotli on; brotli_types text/css application/javascript; ```

Database Optimization

Indexing

```sql CREATE INDEX idx_user_email ON users(email); ```

Query Optimization

```sql — Bad: N+1 queries SELECT * FROM posts; — Then for each post: SELECT * FROM users WHERE id = post.user_id;

— Good: JOIN SELECT posts.*, users.name FROM posts INNER JOIN users ON posts.user_id = users.id; ```

Caching

```javascript // Redis cache const cached = await redis.get(`user:${id}`); if (cached) return JSON.parse(cached);

const user = await db.user.findById(id); await redis.setex(`user:${id}`, 3600, JSON.stringify(user)); ```

Quick Wins

  1. Enable compression - Gzip/Brotli
  2. Optimize images - WebP/AVIF, lazy loading
  3. Minify assets - CSS/JS/HTML
  4. Use CDN - Serve static assets faster
  5. Enable caching - HTTP headers
  6. Reduce HTTP requests - Combine files
  7. Use modern image formats - WebP, AVIF
  8. Implement lazy loading - Images, videos
  9. Optimize fonts - Subset, font-display
  10. Remove unused code - Tree shaking

Performance is a feature. Make it fast!