Web Performance Optimization

Why Performance Matters

• User Experience: Users abandon slow sites
• SEO: Page speed is a ranking factor
• Conversion: Faster sites convert better
• Accessibility: Performance is accessibility

Core Web Vitals

Largest Contentful Paint (LCP)

Measures loading performance. Target: < 2.5 seconds.

Improve by:

• Optimize images
• Use a CDN
• Preload critical resources
• Remove render-blocking resources

First Input Delay (FID) / Interaction to Next Paint (INP)

Measures interactivity. Target: < 100ms.

Improve by:

• Break up long tasks
• Use web workers
• Reduce JavaScript execution
• Defer non-critical JS

Cumulative Layout Shift (CLS)

Measures visual stability. Target: < 0.1.

Improve by:

• Set image dimensions
• Reserve space for ads
• Avoid inserting content above existing content

Image Optimization

Use Modern Formats

<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Description">
</picture>

Responsive Images

<img
    src="image-800.jpg"
    srcset="image-400.jpg 400w,
            image-800.jpg 800w,
            image-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
    alt="Description"
>

Lazy Loading

<img src="image.jpg" loading="lazy" alt="Description">

Specify Dimensions

<img src="image.jpg" width="800" height="600" alt="Description">

CSS Optimization

Critical CSS

Inline critical CSS, defer the rest:

<style>
    /* Critical CSS for above-the-fold content */
</style>
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

Minification

Use our CSS Minifier to reduce file size.

Remove Unused CSS

Use tools like PurgeCSS to remove unused styles.

JavaScript Optimization

Defer and Async

<!-- Defer: execute after HTML parsing -->
<script src="app.js" defer></script>

<!-- Async: execute when ready -->
<script src="analytics.js" async></script>

Code Splitting

Load only what's needed for the current page.

Minification

Use our JS Minifier to reduce file size.

Resource Hints

<!-- Preconnect to important origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- Preload critical resources -->
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- Prefetch for likely next navigation -->
<link rel="prefetch" href="/next-page.html">

Caching

Cache Headers

Cache-Control: public, max-age=31536000, immutable

Versioned Assets

<link rel="stylesheet" href="styles.abc123.css">
<script src="app.xyz789.js"></script>

Measuring Performance

1. Lighthouse: Chrome DevTools audit
2. PageSpeed Insights: Google's analysis tool
3. WebPageTest: Detailed waterfall analysis
4. Chrome DevTools: Performance panel

Quick Wins

1. Enable compression (gzip/brotli)
2. Use a CDN
3. Optimize images
4. Minify CSS/JS
5. Enable caching
6. Lazy load images
7. Remove unused code