> ## Documentation Index
> Fetch the complete documentation index at: https://devtools.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Frontend Performance Optimization
> Learn how to optimize your frontend applications for better speed and user experience
## Why Performance Matters
Performance is a critical aspect of frontend development that directly impacts user experience, engagement, and conversion rates. Studies have shown that:
* 53% of mobile users abandon sites that take longer than 3 seconds to load
* Every 100ms of latency costs Amazon 1% in sales
* Google uses page speed as a ranking factor for both desktop and mobile searches
Performance optimization is not just about making your site fast—it's about creating a smooth, responsive experience that keeps users engaged and satisfied.
## Performance Metrics
Before optimizing, it's important to understand what to measure. Here are key performance metrics to track:
Time until the browser renders the first bit of content from the DOM.
**Good target:** Under 1.8 seconds
Time until the largest text or image element is rendered.
**Good target:** Under 2.5 seconds
Time from when a user first interacts with your site to when the browser responds.
**Good target:** Under 100 milliseconds
Measures visual stability and unexpected layout shifts.
**Good target:** Under 0.1
Time until the page is fully interactive.
**Good target:** Under 3.8 seconds
Sum of all time periods between FCP and TTI when the main thread was blocked.
**Good target:** Under 200 milliseconds
## Measuring Performance
### Tools for Performance Measurement
Chrome's built-in auditing tool that provides performance scores and suggestions.
Access it through Chrome DevTools > Lighthouse tab or run it from the command line:
```bash theme={null}
npm install -g lighthouse
lighthouse https://example.com --view
```
Provides detailed performance analysis from multiple locations and browsers.
Visit [WebPageTest.org](https://www.webpagetest.org/) to run tests.
Offers detailed runtime performance analysis including CPU usage, rendering, and network activity.
1. Open Chrome DevTools (F12)
2. Go to the Performance tab
3. Click Record and interact with your site
4. Stop recording and analyze the results
Google's report on real-user performance metrics.
Access it through Google Search Console.
### Real User Monitoring (RUM)
While lab testing is valuable, measuring performance with real users provides the most accurate data:
```javascript theme={null}
// Using the Web Vitals library
import {getLCP, getFID, getCLS} from 'web-vitals';
function sendToAnalytics({name, delta, id}) {
// Send metrics to your analytics service
console.log(`Metric: ${name} | Value: ${delta} | ID: ${id}`);
}
// Monitor Core Web Vitals
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
```
## Optimizing Asset Delivery
### Image Optimization
Images often account for the largest portion of page weight. Here's how to optimize them:
Use tools like ImageOptim, TinyPNG, or Sharp to compress images without significant quality loss.
```bash theme={null}
# Using Sharp in Node.js
const sharp = require('sharp');
sharp('input.jpg')
.resize(800) // Resize to 800px width
.jpeg({ quality: 80 }) // Compress with 80% quality
.toFile('output.jpg');
```
Always serve images at the appropriate size for their display dimensions.
WebP, AVIF, and JPEG XL offer better compression than older formats like JPEG and PNG.
```html theme={null}
```
Only load images when they're about to enter the viewport.
```html theme={null}
```
For broader browser support, use a library like lazysizes:
```html theme={null}
```
Serve different image sizes based on the device's screen size.
```html theme={null}
```
### JavaScript Optimization
Split your JavaScript into smaller chunks that load on demand.
```javascript theme={null}
// Using dynamic imports in modern JavaScript
button.addEventListener('click', async () => {
const module = await import('./heavy-feature.js');
module.initFeature();
});
```
With webpack:
```javascript theme={null}
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js',
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
```
Reduce file size by removing unnecessary characters and compressing the code.
```bash theme={null}
# Using Terser for minification
npx terser script.js -o script.min.js -c -m
```
Enable Gzip or Brotli compression on your server:
```nginx theme={null}
# Nginx configuration for Gzip
gzip on;
gzip_types text/plain text/css application/javascript;
gzip_min_length 1000;
```
Prevent JavaScript from blocking the page render.
```html theme={null}
```
Remove unused code from your bundles.
```javascript theme={null}
// webpack.config.js
module.exports = {
mode: 'production', // Enables tree shaking
optimization: {
usedExports: true,
},
};
```
Use ES modules to enable tree shaking:
```javascript theme={null}
// Import only what you need
import { Button } from 'ui-library';
// Instead of
// import * from 'ui-library';
```
### CSS Optimization
Inline critical styles in the `` and load the rest asynchronously.
```html theme={null}
```
Tools like Critical or CriticalCSS can automate this process.
Remove unused styles to reduce file size.
```bash theme={null}
# Using PurgeCSS
npx purgecss --css style.css --content index.html --output style.purged.css
```
Load non-critical CSS asynchronously.
```html theme={null}
```
Use efficient selectors to improve rendering performance.
```css theme={null}
/* Avoid deeply nested selectors */
.header .navigation .list .item a { /* slow */ }
/* Better approach */
.nav-link { /* fast */ }
```
### Fonts Optimization
System fonts load instantly because they're already installed.
```css theme={null}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
```
Use `font-display` to control how fonts are displayed while loading.
```css theme={null}
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap; /* Show fallback font until custom font loads */
}
```
Preload important fonts:
```html theme={null}
```
Only include the characters you need.
```html theme={null}
```
Use tools like glyphhanger to create custom subsets.
Each font weight and style is a separate download.
```css theme={null}
/* Instead of loading many weights */
body {
/* Only load what you need */
font-family: 'Roboto';
font-weight: 400; /* Regular */
}
h1, h2, h3 {
font-weight: 700; /* Bold */
}
```
## Rendering Performance
### Optimizing the Critical Rendering Path
Move non-critical CSS and JavaScript out of the critical rendering path.
```html theme={null}
```
Keep the DOM tree small and shallow.
```html theme={null}
Deeply nested content
Flatter DOM structure
```
Batch DOM reads and writes to prevent forced reflows.
```javascript theme={null}
// Bad: Interleaving reads and writes
const width = element.offsetWidth; // Read
element.style.width = (width + 10) + 'px'; // Write
const height = element.offsetHeight; // Read (forces reflow)
element.style.height = (height + 10) + 'px'; // Write
// Good: Batch reads, then writes
const width = element.offsetWidth; // Read
const height = element.offsetHeight; // Read
element.style.width = (width + 10) + 'px'; // Write
element.style.height = (height + 10) + 'px'; // Write
```
Prefer properties that only affect compositing.
```css theme={null}
/* Expensive (triggers layout) */
.expensive {
animation: move 1s infinite;
}
@keyframes move {
from { width: 100px; height: 100px; }
to { width: 200px; height: 200px; }
}
/* Efficient (only compositing) */
.efficient {
animation: slide 1s infinite;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
```
### Preventing Layout Shifts
Layout shifts create a poor user experience and negatively impact your CLS score.
```html theme={null}
```
```css theme={null}
/* Reserve space for dynamic content */
.comments-container {
min-height: 200px;
}
/* Use content-visibility for off-screen content */
.below-fold-section {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Estimate height */
}
```
## Network Optimization
### Caching Strategies
Configure proper cache headers to reduce server requests.
```nginx theme={null}
# Nginx configuration for static assets
location /static/ {
expires 1y;
add_header Cache-Control "public, max-age=31536000, immutable";
}
# For HTML files
location / {
add_header Cache-Control "no-cache, must-revalidate";
}
```
Implement offline caching with service workers.
```javascript theme={null}
// Register a service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
// In sw.js
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll([
'/',
'/styles.css',
'/script.js',
'/offline.html'
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
```
Use browser memory cache for frequently accessed data.
```javascript theme={null}
// Simple in-memory cache
const cache = new Map();
async function fetchWithCache(url) {
if (cache.has(url)) {
return cache.get(url);
}
const response = await fetch(url);
const data = await response.json();
cache.set(url, data);
return data;
}
```
### Resource Hints
Use resource hints to inform the browser about resources it should load or connect to:
```html theme={null}
```
## Framework-Specific Optimizations
### React
```jsx theme={null}
// Use React.memo for component memoization
const MemoizedComponent = React.memo(function MyComponent(props) {
// Only re-renders if props change
return
{props.name}
;
});
// Use useMemo for expensive calculations
function SearchResults({ query, data }) {
const filteredData = React.useMemo(() => {
return data.filter(item => item.name.includes(query));
}, [query, data]);
return (
```