Performance d'Éclair : garder 100 sur 100

La performance d'Éclair ne dépend d'aucune extension de cache à régler : elle est intégrée au CMS. Mesuré en local, le site de démonstration obtient 100 dans les quatre catégories de Lighthouse. Cette leçon explique d'où vient ce résultat, comment le mesurer chez toi et quelles décisions le font baisser : images, polices, CSS, vidéos, scripts et hébergement.

Ce que fait déjà Éclair

Le dépôt publie aussi ses mesures dans tests/fixtures/lighthouse-1.8.0.json : Lighthouse en mobile, médiane de trois passages, sur l'accueil et un article du site de référence, une page de vente, puis l'accueil habillé des directions Nocturne, Riviera, Presse et Affiche. Résultat partout : 100 dans les quatre catégories, un LCP de 779 à 885 ms, un CLS de 0 et un TBT de 0 à 17 ms.

Comment mesurer la performance d'Éclair ?

1. Lighthouse dans Chrome : ouvre la page en navigation privée, car les extensions faussent la mesure, puis les outils de développement, onglet Lighthouse. Choisis le mode mobile et les quatre catégories, puis lance l'analyse.
2. PageSpeed Insights (pagespeed.web.dev) : la même analyse, lancée depuis les serveurs de Google, avec les données réelles des visiteurs Chrome quand ton site en a assez.
3. En ligne de commande, pour suivre l'évolution d'une version à l'autre.
4. Le temps de réponse du serveur, que Lighthouse noie dans le reste : mesure-le à part avec curl.

# Lighthouse en mobile (Node.js 22 ou plus), rapport ouvert dans le navigateur
npx lighthouse https://exemple.fr/ --only-categories=performance,accessibility,best-practices,seo --view

# Après une modification : 1er appel (page générée), puis 2e appel (cache statique)
curl -s -o /dev/null -w 'TTFB : %{time_starttransfer} s\n' https://exemple.fr/
curl -s -o /dev/null -w 'TTFB : %{time_starttransfer} s\n' https://exemple.fr/

Le temps de réponse d'un hébergement mutualisé

Les 0,7 ms annoncés sont mesurés en local. Sur un vrai hébergement s'ajoutent la latence du réseau et le démarrage de PHP, car même le chemin rapide passe par index.php. Trois leviers restent entre tes mains :

• garde le cache actif : Réglages › Avancé › Cache statique des pages coché, et aucun ECLAIR_DEBUG dans eclair-config.php, qui le coupe ;
• choisis PHP 8.3 dans le panneau de ton hébergeur et vérifie qu'OPcache est actif : PHP ne recompile plus ses scripts à chaque requête ;
• héberge le site près de tes visiteurs, avec l'aide du comparatif des hébergeurs.

Après chaque modification, Éclair vide tout le cache : la première visite de chaque page la régénère, une seule fois. Les visites suivantes repassent par le chemin rapide.

Images : le premier poste à surveiller

La performance d'Éclair se joue surtout sur les images, puisque tout le reste est déjà réglé. Éclair réduit chaque original à 2000 px, le ré-encode, puis crée des déclinaisons WebP de 480, 800, 1200 et 1600 px, uniquement plus petites que l'original. Quelques réflexes suffisent :

• envoie des photos d'au moins 1600 px de large si elles s'affichent en pleine largeur, sans quoi la plus grande déclinaison manque ;
• remplis le texte alternatif : Lighthouse le contrôle dans la catégorie Accessibilité ;
• évite les GIF animés lourds, gardés en GIF sans version WebP : pour une animation, préfère le bloc Vidéo ;
• vérifie que l'extension GD gère le WebP, sans quoi les images restent en JPG ou en PNG ;
• place l'image importante en tête : l'image à la une, celle d'une bannière ou, à défaut, une image des deux premiers blocs est chargée en priorité, les autres en différé.

Polices, CSS personnalisé et vidéos

Polices. Les thèmes classiques n'utilisent que des polices système, sans aucun téléchargement. Une direction artistique ajoute une seule police de titre de 12 à 27 Ko : ton serveur la télécharge une fois depuis Fontsource, la range dans media/fonts/, puis le site la précharge avec font-display: optional, sans décalage de mise en page. N'ajoute pas d'autre police : le CSS personnalisé retire les @import, et la CSP refuse les polices d'un autre domaine.

CSS personnalisé. Il est inséré dans chaque page, avec le thème : chaque Ko ajouté est téléchargé à chaque visite, sans cache séparé. Le plafond est de 64 Ko, mais vise quelques Ko, et n'y glisse pas d'images encodées en base64.

Vidéos. Le bloc Vidéo n'affiche qu'un bouton de lecture : aucune requête ne part vers YouTube ou Vimeo avant le clic. Au clic, le script du site charge le lecteur depuis youtube-nocookie.com ou player.vimeo.com.

Scripts tiers et mesure d'audience

La CSP du site public n'accepte que les scripts servis par ton domaine : gestionnaires de balises, fenêtres de discussion ou Cloudflare Web Analytics sont bloqués. C'est voulu, car chaque script tiers coûte du temps de chargement et souvent des cookies. Pour suivre ton audience sans rien ajouter :

• Search Console et Bing Webmaster Tools donnent clics, impressions et requêtes, après vérification dans Réglages › SEO ;
• les statistiques de ton hébergeur, tirées des journaux du serveur, ne demandent ni script ni cookie ;
• sur un VPS, un analyseur de journaux comme GoAccess lit directement ceux de Nginx ou d'Apache.

Un outil de mesure en JavaScript t'obligerait à modifier les gabarits et la CSP du noyau, perdus à chaque mise à jour, puis la politique de confidentialité créée à l'installation, qui annonce l'absence de cookie de suivi et d'outil de mesure d'audience tiers.

Faut-il un CDN ?

Rarement. Les pages, déjà légères, partent du cache statique en quelques millisecondes. Un CDN aide surtout quand tes visiteurs sont loin du serveur, pour les fichiers statiques. Dans ce cas, ne mets pas le HTML en cache chez le CDN : Éclair ne pourrait pas le vider à chaque publication. Les réglages de Cloudflare sont détaillés dans la leçon Nginx, VPS, proxy et CDN.

La liste de contrôle

À retenir

• La performance d'Éclair vient du cache statique, du CSS en ligne, des images WebP et d'un seul petit script : il n'y a rien à installer.
• Mesure avec Lighthouse en navigation privée et PageSpeed Insights, et isole le temps de réponse du serveur avec curl.
• Les images sont le premier levier : 1600 px pour la pleine largeur, textes alternatifs, pas de GIF animé lourd.
• Le CSS personnalisé est envoyé avec chaque page : garde-le léger.
• Les scripts tiers sont bloqués par la CSP : mesure ton audience avec Search Console et les journaux du serveur.

Pour aller plus loin

• Images et médiathèque : formats, tailles et textes alternatifs.
• Directions artistiques et Score Design : la police de titre et ses garanties.
• Nginx, VPS, proxy et CDN : compression, cache navigateur et Cloudflare hors d'Apache.
• web.dev : les signaux Web essentiels, LCP, CLS et INP expliqués.
• Chrome for Developers : présentation de Lighthouse.

Toutes les leçons du parcours