Web PerformanceOptimization

Web performance is not just a technical KPI — it's an environmental, user experience, and business issue. A slow site consumes more energy, frustrates users, and drops your Google ranking. The good news? Optimizing performance from day one doesn’t cost more — it just requires the right mindset.

This page is developer-focused. We’ll get hands-on with asset strategy, real code examples, and concrete best practices for front-end performance.

Understanding Performance Metrics

  • Core Web Vitals: Google's key performance indicators
    • LCP (Largest Contentful Paint): loading speed
    • FID (First Input Delay): interactivity
    • CLS (Cumulative Layout Shift): visual stability
  • RUM (Real User Monitoring): measures actual user experiences on real devices
    Tools: web.dev, DebugBear, SpeedCurve
  • Synthetic Monitoring: lab-based tools run in controlled environments
    Tools: Lighthouse, WebPageTest, PageSpeed Insights

Optimizing Assets

Images

  • Use <picture> with source elements for responsive images. 
    <picture>
  <source srcset="image@2x.avif" type="image/avif" media="(min-width: 1024px)" />
  <source srcset="image.jpg" type="image/jpeg" media="(max-width: 1023px)" />
  <img src="image.jpg" alt="Example" width="800" height="600" loading="lazy" />
</picture>
  • Use srcset and sizes for simpler cases: 
    <img
  src="img-800.jpg"
  srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Responsive image"
  loading="lazy"
  width="800" height="600" />
  • Use proper aspect ratio and define width/height to reduce CLS.
  • Lazy-load below-the-fold images using loading="lazy" or libraries like vanilla-lazyload, lazysizes.

Fonts

  • Use modern formats (woff2), subset fonts to only necessary characters.
  • Preload fonts: 
    <link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
  • Use font-display: swap to avoid invisible text during load.

Videos

  • Avoid embedding YouTube. Use light embeds or load video on interaction only.
  • Use muted autoplay only if necessary and always provide controls.

Icons

  • Prefer inline SVG over icon fonts (lighter, accessible, stylable).
  • Example: 
    <svg role="img" aria-label="Cart">
  <use href="/icons.svg#icon-cart" />
</svg>

Other Critical Best Practices

  • Limit requests: fewer scripts, fewer fonts, fewer third-party embeds
  • Bundle smartly: use code-splitting and tree-shaking
  • Cache static assets: set far-future expiry headers for static content
  • Avoid sliders & carousels: heavy on DOM, JS, and rarely necessary
  • Preload key images and fonts to reduce LCP
  • Minimize CSS and JS: inline critical CSS, defer non-critical scripts

Shared Responsibility

Performance is not the developer’s burden alone. Designers and clients must be aligned:

  • Don’t design features that don’t add value (video backgrounds, parallax, autoplay sliders…)
  • Challenge feature creep and keep the UI lean
  • Use design systems that are modular and performance-aware