Performance web : les bases qui ont le plus d'impact

Les métriques qui comptent pour Google

Les Core Web Vitals sont intégrés dans le ranking Google depuis 2021 :

Métrique | Signification | Cible
LCP | Largest Contentful Paint — temps d'affichage du plus grand élément | < 2.5 s
INP | Interaction to Next Paint — réactivité aux clics | < 200 ms
CLS | Cumulative Layout Shift — stabilité visuelle | < 0.1

Mesure avec PageSpeed Insights — gratuit, données réelles.

Images : le gain le plus facile

html copier





<img
src="photo.webp"
width="800"
height="600"
loading="lazy"
decoding="async"
alt="Description utile"
>

WebP : 30-50 % plus léger que JPEG, supporté partout

width et height : évite le layout shift (CLS)

loading="lazy" : charge hors écran uniquement au scroll

decoding="async" : ne bloque pas le thread principal

Convertir en WebP sur macOS

bash copier

# Avec ffmpeg (brew install ffmpeg)
ffmpeg -i photo.jpg -q:v 85 photo.webp

# Ou en lot
for f in *.jpg; do ffmpeg -i "$f" -q:v 85 "${f%.jpg}.webp"; done

Polices web : charger moins pour afficher plus vite

html copier



<link rel="preload" as="style"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

preconnect : négocie la connexion TLS en avance

display=swap : texte visible immédiatement, police swappée à l'arrivée

Limite les weights : 400;600 au lieu de 100;200;300;400;500;600;700;800;900

Cache navigateur avec .htaccess

apache copier

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
</IfModule>

Un asset mis en cache pendant 1 an = zéro requête lors des visites suivantes.

Compression gzip/brotli

apache copier

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

Réduit le poids du HTML/CSS/JS de 60-80 % en transit. Déjà dans le .htaccess de ce blog.

Ce qu'il ne faut PAS faire

❌ Charger jQuery pour un effet que 5 lignes de JS natif font

❌ Mettre des images en background-image CSS pour le contenu (invisible pour les lecteurs d'écran et le LCP)

❌ Bloquer le rendu avec des scripts en sans defer ou async

❌ Utiliser des polices variables de 500 Ko quand Inter en système-ui fait le même travail

Règle d'or : mesure avant d'optimiser. PageSpeed Insights + onglet Network de DevTools avec Slow 3G montrent exactement où est le problème.