Web Performance Optimization

Why Performance Matters

Web Performance is not just about speed—it’s about user retention and SEO. Google’s research shows that as page load time goes from 1s to 3s, the probability of bounce increases by 32%.

Core Web Vitals (CWV)

Google uses these three metrics to rank your site’s health:

1. LCP (Largest Contentful Paint): How fast does the main content load? (Target: ).
2. INP (Interaction to Next Paint): How responsive is the page to user input? (Target: ).
3. CLS (Cumulative Layout Shift): Does the page jump around as it loads? (Target: ).

Optimization Strategies

1. Asset Optimization

• Images: Use modern formats like WebP or AVIF. Implement loading="lazy" for off-screen images.
• Minification: Remove whitespace and comments from HTML, CSS, and JS using tools like Terser or ESBuild.
• Compression: Enable Brotli or Gzip on your server to shrink file transfer sizes.

2. Rendering Optimization

• Critical CSS: Inline the styles needed for the initial viewport to prevent a Flash of Unstyled Content (FOUC).
• Code Splitting: Use import() to load JavaScript chunks only when they are needed.
• Defer/Async: Use defer for scripts that aren’t needed for the initial UI.

3. Network Optimization

• CDNs: Serve static assets from the edge to reduce physical distance to the user.
• Caching: Use Cache-Control: max-age=31536000, immutable for versioned assets.

Practice Exercise

Use Chrome DevTools (Lighthouse) to audit a page. Identify a component suffering from a high CLS score and fix it using a “Skeleton” or fixed-dimension placeholder.

Answer

Fixing Layout Shift (CLS)

The Problem: An image loads slowly, pushing the text content down once it arrives.

The Solution: Provide “Aspect Ratio Boxes” or fixed dimensions so the browser reserves space before the image arrives.

<!-- Bad: Causes Shift -->
<img src="large-hero.jpg" alt="Hero" />

<!-- Good: Reserves Space -->
<div class="hero-container" style="aspect-ratio: 16 / 9; background: #f0f0f0;">
  <img
    src="large-hero.jpg"
    alt="Hero"
    style="width: 100%; height: 100%; object-fit: cover;"
  />
</div>

Why This Architecture Works

1. Browser Heuristics: By providing the aspect-ratio or width/height attributes, the browser can calculate the layout during the first pass, even if the image asset is still pending.
2. User Perception: A gray placeholder (Skeleton) is significantly less jarring than content that suddenly jumps px down the screen.
3. SEO Stability: Minimizing CLS directly improves your Search Console “Experience” score, leading to better organic rankings.

Summary

Web Performance is an ongoing process, not a one-time fix. By prioritizing Core Web Vitals, optimizing asset delivery, and ensuring visual stability, you build applications that feel premium and respect the user’s time and bandwidth.