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

<!-- Mauvais -->
<img src="photo.jpg">

<!-- Bien -->
<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

# 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

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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

<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

<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 <head> 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.