# 🎯 PageSpeed Perfection Playbook — Battle-Tested Guide
> **Version 1.0.0** — Based on 6+ real-world iterations achieving 99-100% on oveanet.ch, montpellier.ai, and oveanet.fr
> By Laurent ROCHETTA × AI
---
## 📐 Architecture: The 4-Phase Protocol
```
Phase 1: DIAGNOSTIC → Extract scores, identify all failing audits
Phase 2: PERFORMANCE → Self-host fonts → Inline CSS → Cache → CLS
Phase 3: ACCESSIBILITY → WCAG AA contrast fixes (systematic)
Phase 4: BEST PRACTICES & SEO → Console errors, security, meta tags
```
Each phase runs sequentially. **Backup before each phase.** Re-test after each phase.
---
## ⚠️ Anti-Patterns — Things That BREAK Scores
> [!CAUTION]
> These are real mistakes made during optimization that caused score REGRESSIONS.
### 🔴 NEVER: Async CSS Loading
```html
```
**What happens:** The page renders with no styles, then FLASHES when CSS loads. PageSpeed measures this as a massive Cumulative Layout Shift (0.936 — nearly maximum). Performance dropped from 86 to 75.
**Fix:** Either load CSS synchronously or inline it entirely.
### 🔴 NEVER: External Font CDN Without Fallback
```html
```
**What happens:** DNS lookup + TLS handshake to `fonts.googleapis.com`, then another to `fonts.gstatic.com`. On 4G simulation, this adds 500ms+ to LCP.
### 🔴 NEVER: Images Without Dimensions
```html
```
**Fix:** Always add `width` and `height`:
```html
```
---
## 🏆 Technique Catalog — Ordered by Impact
### [P1] Self-Host Fonts (Biggest LCP Win)
**Impact:** LCP -30-50% on mobile, eliminates 2 external requests
**Step 1:** Download fonts from Google Fonts API or copy from existing projects:
```
fonts/
├── space-grotesk-400-latin.woff2
├── space-grotesk-600-latin.woff2
└── space-grotesk-700-latin.woff2
```
**Step 2:** Update CSS `@font-face` declarations:
```css
/* ✅ Self-hosted — zero external requests */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/space-grotesk-400-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/space-grotesk-600-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/space-grotesk-700-latin.woff2') format('woff2');
}
```
**Step 3:** Preload critical fonts in HTML ``:
```html
```
**Step 4:** Remove ALL Google Fonts CDN references:
```diff
-
-
-
+
```
### How to get woff2 files from Google Fonts:
```bash
# Method 1: Use google-webfonts-helper
# https://gwfh.mranftl.com/fonts
# Method 2: Direct download with curl (set woff2 user-agent)
curl -H "User-Agent: Mozilla/5.0" \
"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" \
| grep -oP 'url\(\K[^)]+' | while read url; do
wget "$url" -P fonts/
done
```
---
### [P2] Inline ALL CSS (Zero Render-Blocking)
**Impact:** Eliminates render-blocking CSS request, reduces FCP by 100-300ms
**For PHP sites** (like montpellier.ai):
```php
```
**For static HTML sites** (build script):
PowerShell build script:
```powershell
# build-dist.ps1 — Inline CSS into HTML for production
$css = Get-Content "styles.css" -Raw
$html = Get-Content "index.html" -Raw
$cssInline = " "
# Replace the critical CSS + external link with full inline
$pattern = '