Web Performance Optimization Techniques for Modern Applications

January 20, 2023

9 min read

Performance

Web Development

Frontend

Optimization

Web performance has a direct impact on user experience and business metrics. Studies have shown that even a one-second delay in page load time can result in a 7% reduction in conversions. In this article, we'll explore various techniques to optimize web performance.

Core Web Vitals

Google's Core Web Vitals are a set of specific factors that Google considers important for user experience:

Largest Contentful Paint (LCP): Measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (FID): Measures interactivity. Pages should have a FID of less than 100 milliseconds.
Cumulative Layout Shift (CLS): Measures visual stability. Pages should maintain a CLS of less than 0.1.

Image Optimization

Images often account for most of the downloaded bytes on a web page. Optimizing them can significantly improve performance:

Use Modern Image Formats

WebP, AVIF, and JPEG XL offer better compression than traditional formats like JPEG and PNG.

Responsive Images

Use the srcset attribute to provide different image sizes for different devices:

<img 
  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
  sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px" 
  src="fallback.jpg" 
  alt="Description"
>

Lazy Loading

Load images only when they're about to enter the viewport:

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

JavaScript Optimization

Code Splitting

Split your JavaScript bundle into smaller chunks that can be loaded on demand:

// Using dynamic import in React
import React, { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    Loading...

}>
      
    
  );
}

Tree Shaking

Remove unused code from your JavaScript bundles. Most modern bundlers like Webpack, Rollup, and esbuild support tree shaking.

Defer Non-Critical JavaScript

Use the defer attribute to prevent JavaScript from blocking the parsing of HTML:

<script src="non-critical.js" defer></script>

CSS Optimization

Critical CSS

Inline critical CSS in the head of your HTML to reduce render-blocking:

<head>
  <style>
    /* Critical CSS here */
    body { font-family: sans-serif; margin: 0; }
    header { background-color: #f8f9fa; padding: 1rem; }
  </style>
  <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
</head>

Reduce Unused CSS

Tools like PurgeCSS can remove unused CSS from your stylesheets.

Caching Strategies

HTTP Caching

Use appropriate Cache-Control headers to leverage browser caching:

Cache-Control: max-age=31536000, immutable

Service Workers

Implement a service worker to cache assets and enable offline functionality:

// Register a service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}

Conclusion

Web performance optimization is an ongoing process. By focusing on Core Web Vitals and implementing the techniques discussed in this article, you can significantly improve your web application's performance, leading to better user experience and higher conversion rates.