Page speed is a critical ranking factor and directly impacts user experience. Faster pages have lower bounce rates, higher conversions, and better search rankings.
Mobile users leave if page takes >3 seconds
Per 1 second improvement
Google uses speed as a ranking factor
Speed affects LCP and INP
| Metric | Good | Needs Work | Poor |
|---|---|---|---|
| Time to First Byte (TTFB) | < 200ms | 200-500ms | > 500ms |
| First Contentful Paint (FCP) | < 1.8s | 1.8-3s | > 3s |
| Largest Contentful Paint (LCP) | < 2.5s | 2.5-4s | > 4s |
| Total Blocking Time (TBT) | < 200ms | 200-600ms | > 600ms |
Images often account for the largest portion of page weight. Optimizing them can dramatically improve load times.
<!-- Native lazy loading -->
<img src="image.jpg" loading="lazy" alt="Description">
<!-- Responsive with lazy loading -->
<img srcset="small.jpg 480w,
medium.jpg 800w,
large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 1000px) 800px,
1200px"
src="medium.jpg"
loading="lazy"
alt="Description"><!-- Blocks rendering - use sparingly -->
<script src="critical.js"></script>
<!-- Downloads in parallel, executes in order after parsing -->
<script src="script.js" defer></script>
<!-- Downloads in parallel, executes immediately when ready -->
<script src="analytics.js" async></script>Inline critical above-the-fold CSS directly in the HTML to render content faster. Load remaining CSS asynchronously.
Audit stylesheets and remove rules that aren't used. Tools like PurgeCSS can automate this.
| Asset Type | Recommended Cache Time |
|---|---|
| HTML pages | No cache or short (for dynamic content) |
| CSS/JS (versioned) | 1 year |
| Images | 1 year |
| Fonts | 1 year |
| API responses | Varies (seconds to hours) |
Serve static assets from geographically distributed servers to reduce latency.
Use Gzip or Brotli compression for text-based resources (HTML, CSS, JS).
Enable modern protocols for multiplexing and faster connections.