Performance
Performance Metrics & How to Optimize Them
Author: @Tranloi2k
On this page
Performance Metrics: Web Performance Indicators & How to Optimize Them
Description: A roundup of common web performance metrics, what they mean, and how to optimize each one.
1. Common Performance Metrics & How to Optimize Them
a. FCP (First Contentful Paint)
- Definition: The moment the browser first paints any content (text, image, canvas) on screen.
- Meaning: Measures how fast the first content appears to the user.
- Target: Under 1.8s for a good experience.
How to optimize FCP:
- Prioritize loading critical resources (CSS, fonts, important images).
- Use
preloadfor critical fonts and CSS. - Avoid blocking scripts in
<head>. - Use server-side rendering (SSR) where possible.
- Reduce image size, use WebP or SVG.
b. LCP (Largest Contentful Paint)
- Definition: The moment the largest content element (a big image, a large block) appears on screen.
- Meaning: Measures how fast the page's main content loads.
- Target: Under 2.5s to hit "Good."
How to optimize LCP:
- Compress large images (hero images, banners).
- Lazy-load unimportant images/elements.
- Place large images/blocks (hero) early in the HTML.
- Use a CDN for images and large assets.
- Optimize server-side rendering (SSR, SSG).
- Reduce request count, prioritize the LCP resource via
priority/preload.
c. TTFB (Time to First Byte)
- Definition: Time from when the user sends a request to when the first byte is received from the server.
- Meaning: Measures server/backend response speed.
- Target: Under 0.8s.
How to optimize TTFB:
- Upgrade the server, use a CDN.
- Server-side caching (Redis, Varnish).
- Optimize database queries and backend logic.
- Use HTTP/2, reduce concurrent requests.
- Get geographically closer to users, choose optimal hosting/servers.
d. FID (First Input Delay)
- Definition: Time from the user's first interaction (clicking a button, a link, etc.) to the browser's response.
- Meaning: Measures how smooth the initial interaction feels.
- Target: Under 100ms.
How to optimize FID (and Total Blocking Time - TBT):
- Reduce JS bundle size, use code splitting and tree shaking.
- Defer non-critical JS (
defer,async). - Prefer small, fast event handlers.
- Avoid long tasks (>50ms) in JS.
- Use a Web Worker for heavy processing.
- Minimize unnecessary reflow/repaint.
e. CLS (Cumulative Layout Shift)
- Definition: The total amount of unexpected layout shift while a page is loading.
- Meaning: Measures how visually stable the page is while loading.
- Target: Under 0.1.
How to optimize CLS:
- Always set fixed dimensions for images, videos, and iframes.
- Avoid inserting ads or popups into the layout while the page is still loading.
- Use placeholders for images/dynamic content.
- Avoid fonts that cause text to shift (use
font-display: swap). - Don't insert new elements into the DOM before the layout has stabilized.
f. Speed Index
- Definition: Measures how quickly content is visually complete.
- Meaning: Measures how quickly a page's content becomes visible to the user.
- Target: The lower, the better.
How to optimize Speed Index:
- Combine the techniques above: load critical content first, lazy-load the rest.
- Optimize the network, reduce the number and size of resources.
- Use smart caching and a CDN.
- Prioritize the critical path for the user's journey.
g. Time to Interactive
- Definition: The time it takes for a page to become fully interactive.
- Meaning: Measures when the page can respond to any user action.
- Target: Under 3.8s.
How to optimize Time to Interactive:
- Reduce blocking JS, use code splitting and tree shaking.
- Prioritize loading critical JS first.
- Defer non-essential tasks, lazy-load unimportant parts.
- Optimize rendering and event handlers.
2. Tools for Measuring and Testing Performance Metrics
- Google Lighthouse (Chrome DevTools): detailed reports and optimization guidance for each metric.
- WebPageTest.org: tests your site from multiple locations, reports each loading step.
- PageSpeed Insights: checks performance & SEO.
- Chrome User Experience Report: real-world data from actual users.
3. Summary & Optimization Checklist
| Metric | Main Optimization |
|---|---|
| FCP | Prioritize critical CSS, fonts, images |
| LCP | Compress large images, lazy-load, CDN, SSR |
| TTFB | Caching, backend optimization, CDN |
| FID/TBT | Reduce JS, code splitting, avoid long tasks |
| CLS | Set fixed dimensions, avoid layout shifts |
| Speed Index | Optimize holistically, load critical, lazy-load |
| Interactive | Combine JS reduction, optimize critical path |
Conclusion:
Understanding performance metrics helps you optimize your website's performance, improve user experience, and boost SEO rankings. Combine the right techniques for each metric to get the best results!