Frontend Performance Optimization

Fast websites convert better. Here's how to optimize yours.

Core Web Vitals

Focus on these metrics:

LCP (Largest Contentful Paint) - < 2.5s
FID (First Input Delay) - < 100ms
CLS (Cumulative Layout Shift) - < 0.1

Image Optimization

Images are often the biggest culprit:

<!-- Use modern formats -->
<picture>
 <source srcset="image.webp" type="image/webp">
 <source srcset="image.jpg" type="image/jpeg">
 <img src="image.jpg" alt="Description">
</picture>

<!-- Lazy load below-fold images -->
<img src="image.jpg" loading="lazy" alt="Description">

<!-- Specify dimensions to prevent CLS -->
<img src="image.jpg" width="800" height="600" alt="Description">

Code Splitting

Load only what's needed:

// React lazy loading
import { lazy, Suspense } from 'react';

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

function App() {
 return (
 <Suspense fallback={<Loading />}>
 <HeavyComponent />
 </Suspense>
 );
}

Bundle Optimization

Analyze and reduce bundle size:

# Analyze bundle
npx webpack-bundle-analyzer

# Tree shaking - import only what you need
import { debounce } from 'lodash-es'; // Good
import _ from 'lodash'; // Bad - imports everything

Critical CSS

Inline critical styles:

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

Resource Hints

Tell the browser what to prioritize:

<!-- Preconnect to required origins -->
<link rel="preconnect" href="https://api.example.com">

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

<!-- Preload critical resources -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero.jpg" as="image">

JavaScript Optimization

// Debounce expensive operations
function debounce(fn, delay) {
 let timeout;
 return (...args) => {
 clearTimeout(timeout);
 timeout = setTimeout(() => fn(...args), delay);
 };
}

window.addEventListener('resize', debounce(handleResize, 250));

// Use requestAnimationFrame for animations
function animate() {
 // Animation logic
 requestAnimationFrame(animate);
}

Caching Strategy

// Service Worker caching
self.addEventListener('fetch', event => {
 event.respondWith(
 caches.match(event.request)
 .then(response => response || fetch(event.request))
 );
});

Conclusion

Performance is a feature. Measure, optimize, and continuously monitor your web applications.