---
name: page-speed
description: >
Page speed optimization guidelines and implementation patterns.
Ensures all funnel pages meet Core Web Vitals targets for LCP < 2.5s,
FID < 100ms, and CLS < 0.1.
---
# Page Speed Optimization
Every funnel page must load fast. Slow pages kill conversions — a 1-second delay reduces conversions by 7%.
## Core Web Vitals Targets
| Metric | Target | Impact |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | Main content visible |
| FID (First Input Delay) | < 100ms | Page is interactive |
| CLS (Cumulative Layout Shift) | < 0.1 | No visual jumping |
| TTFB (Time to First Byte) | < 800ms | Server responds fast |
## Required Optimizations
### 1. Critical CSS Inlining
Inline above-the-fold CSS directly in `` to eliminate render-blocking:
```html
```
### 2. Image Optimization
```html
```
### 3. Font Loading
```css
@font-face {
font-family: 'BrandFont';
src: url('brand-font.woff2') format('woff2');
font-display: swap; /* Always include this */
font-weight: 400;
}
```
```html
```
### 4. Script Loading
```html
```
### 5. Preconnect to Third Parties
```html
```
## Performance Budget
| Resource | Budget |
|---|---|
| Total page weight | < 500KB |
| HTML | < 50KB |
| CSS | < 50KB |
| JavaScript | < 100KB |
| Images (above fold) | < 200KB |
| Fonts | < 100KB |
| Third-party scripts | < 50KB |
## Quick Audit Checklist
- [ ] Viewport meta tag present
- [ ] All images have width/height attributes
- [ ] Below-fold images use `loading="lazy"`
- [ ] No render-blocking scripts in ``
- [ ] `font-display: swap` on all @font-face
- [ ] Critical CSS inlined
- [ ] Third-party origins preconnected
- [ ] No unused CSS/JS shipped
- [ ] Images in WebP/AVIF format
- [ ] Total page weight under 500KB