Web Performance Optimization: A Developer's Guide

Core Web Vitals: Google's Performance Metrics

Most web performance problems come down to two things: images that are too big and JavaScript that blocks rendering. Google's Core Web Vitals put numbers to the user impact — LCP, CLS, and INP — and these metrics now directly influence search rankings, which means slow pages don't just frustrate users, they cost you organic traffic too:

• Largest Contentful Paint (LCP): Time until the largest visible element (usually a hero image or headline) is rendered. Target: under 2.5 seconds.
• Cumulative Layout Shift (CLS): Measures visual stability — how much content unexpectedly shifts while loading. Target: under 0.1.
• Interaction to Next Paint (INP): Measures responsiveness to user interactions. Target: under 200ms.

Measure your current scores with Lighthouse in Chrome DevTools, PageSpeed Insights, or the Chrome User Experience Report (CrUX) for real-world field data.

Image Optimization: The Biggest Win

Images typically account for 60-70% of a web page's total weight. Image optimization alone can dramatically improve load times.

Use Modern Image Formats

<picture>
  <!-- AVIF: best compression, modern browsers -->
  <source srcset="hero.avif" type="image/avif">
  <!-- WebP: excellent compression, wide support -->
  <source srcset="hero.webp" type="image/webp">
  <!-- JPEG: fallback for older browsers -->
  <img src="hero.jpg" alt="Hero image">
</picture>

AVIF provides 50% better compression than JPEG at the same quality. WebP provides 30% better compression. The <picture> element with <source> tags allows serving the optimal format to each browser.

Responsive Images with srcset

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Hero"
  loading="lazy"
  decoding="async"
>

Lazy Loading

Images below the fold don't need to load immediately. The native loading="lazy" attribute defers off-screen images until the user scrolls near them:

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

<!-- Never lazy-load the hero/above-the-fold image -->
<!-- Use fetchpriority="high" for the LCP image instead -->
<img src="hero.jpg" fetchpriority="high" alt="Hero">

JavaScript Optimization

JavaScript is the most expensive resource per byte — it must be downloaded, parsed, compiled, and executed. Large JavaScript bundles are a primary cause of slow interactive time.

Code Splitting

Instead of one massive bundle, split your JavaScript into smaller chunks loaded on demand:

// Dynamic import: load only when needed
const button = document.getElementById('load-chart');
button.addEventListener('click', async () => {
  // Chart library loaded only when user clicks
  const { Chart } = await import('./chart.js');
  new Chart(canvas, config);
});

// React.lazy for route-based code splitting
const Dashboard = React.lazy(() => import('./Dashboard'));
const Settings = React.lazy(() => import('./Settings'));

Tree Shaking

Modern bundlers (Webpack, Rollup, Vite) can eliminate unused code through tree shaking. Import only what you need, and use ES modules (import/export) which enable static analysis:

// Bad: imports entire lodash library (72KB)
import _ from 'lodash';
_.debounce(fn, 300);

// Good: imports only debounce (2KB)
import debounce from 'lodash/debounce';
// Or with ES module lodash-es:
import { debounce } from 'lodash-es';

Defer Non-Critical JavaScript

<!-- defer: executes after HTML parsed, in order -->
<script src="app.js" defer></script>

<!-- async: executes as soon as downloaded (no order guarantee) -->
<script src="analytics.js" async></script>

<!-- type="module": deferred by default, modern syntax -->
<script type="module" src="app.js"></script>

Critical Rendering Path

The browser can't render anything until it has parsed HTML, loaded and parsed CSS, and executed blocking JavaScript. Optimizing the critical rendering path means minimizing what must happen before first paint.

• Inline critical CSS: Put above-the-fold styles in a <style> tag so the first render doesn't require a CSS file fetch.
• Preload key resources: Use <link rel="preload"> for fonts, hero images, and critical scripts.
• Minimize render-blocking resources: Defer or async non-critical scripts; load non-critical CSS asynchronously.

<!-- Preload LCP image (hero) -->
<link rel="preload" as="image" href="hero.avif" type="image/avif">

<!-- Preload critical font -->
<link rel="preload" as="font" href="/fonts/sans.woff2"
      type="font/woff2" crossorigin>

<!-- Preconnect to third-party domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">

Font Optimization

Web fonts can cause "flash of invisible text" (FOIT) or "flash of unstyled text" (FOUT) while loading. Minimize the impact:

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;  /* show fallback, swap when loaded */
  unicode-range: U+0000-00FF;  /* only load characters you use */
}

Consider using variable fonts — a single font file that contains multiple weights and styles, dramatically reducing the number of font files that need to be loaded.

Eliminate Layout Shifts (CLS)

Layout shifts occur when content moves after initial render — typically caused by images without dimensions, ads, or dynamically injected content. Fix by always specifying width and height for images and reserving space for dynamic content:

<!-- Always specify dimensions -->
<img src="photo.jpg" width="800" height="600" alt="...">

/* Reserve space for embeds with aspect-ratio */
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Avoid inserting content above existing content */

Conclusion

Web performance optimization is an ongoing practice, not a one-time task. Start by measuring your Core Web Vitals to understand where you stand. Attack the biggest wins first: optimize images with modern formats and proper sizing, split and defer JavaScript, preload critical resources, and fix layout shifts. Each optimization compounds — a faster page leads to better SEO rankings, which brings more users, justifying further investment in performance. The best-performing sites treat performance as a feature, not an afterthought.