--- title: "Performance d'Éclair : garder 100 sur 100" description: "La performance d'Éclair vient du cache statique, du CSS en ligne et des images WebP. Mesure-la avec Lighthouse, puis évite ce qui fait perdre des points." url: "https://eclair.academy/parcours/expert/performance" lang: "fr" author: "Thierry Gustin" published: "2026-11-02" updated: "2026-11-02" --- # Performance d'Éclair : garder 100 sur 100 > **L’essentiel** — La performance d'Éclair repose sur un cache statique servi sans charger l'application, un CSS inséré dans la page, des images WebP responsives et un seul script de 1,2 Ko compressé. Pour garder 100 sur Lighthouse, mesure avec Lighthouse et PageSpeed Insights, envoie des images adaptées, garde le CSS personnalisé léger et évite les scripts tiers. 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. > **Avant de commencer** — Durée : 35 minutes. Prérequis : un site en ligne avec quelques contenus, le navigateur Chrome, et les leçons [Images et médiathèque](https://eclair.academy/parcours/debutant/images-mediatheque) et [L'architecture d'Éclair](https://eclair.academy/parcours/expert/architecture). ## Ce que tu sauras faire ### 📊 Mesurer correctement Lighthouse, PageSpeed Insights et temps de réponse du serveur. ### 📷 Garder des pages légères Images, polices, CSS personnalisé et vidéos. ### 🎯 Éviter les pièges Scripts tiers, mesure d'audience et cache de CDN. ## Ce que fait déjà Éclair ![Mesures d'Éclair : Lighthouse 100 dans les quatre catégories, poids des pages et temps de réponse du serveur](https://eclair.academy/media/2026/11/eclair-academy-performance-fr.webp) *Mesures publiées pour Éclair, en local sur le site de démonstration.* | Mécanisme | Effet | | --- | --- | | cache statique : `index.php` sert la page sans charger l'application | 0,7 ms de temps de réponse serveur, mesuré en local | | CSS inséré dans la page : 17 à 23 Ko, 5 à 6 Ko compressés | aucune feuille de style bloquante | | polices système, ou une seule police de titre préchargée | aucun décalage de mise en page | | images WebP de 480 à 1600 px, dimensions explicites, chargement différé | l'élément principal s'affiche vite | | un seul script public, différé : 2,4 Ko, 1,2 Ko compressé | navigateur jamais bloqué | | Brotli ou Gzip, cache navigateur d'un an, adresses versionnées `?v=…` | visites suivantes sans retéléchargement | | ETag et réponses 304 | une page inchangée n'est pas renvoyée | 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. ```bash # 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/ ``` > **Compare des médianes** — Un score peut varier d'un point d'une passe à l'autre. Lance trois mesures et garde la médiane, comme le fait `php tools/capture.php --lighthouse` dans le dépôt. ## 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](https://eclair.academy/hebergement). 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](https://eclair.academy/parcours/expert/nginx-vps). ## La liste de contrôle | Vérification | Où | Attendu | | --- | --- | --- | | cache actif | **Réglages › Avancé** | `X-Cache: HIT` au deuxième appel | | mode débogage | `eclair-config.php` | aucun `ECLAIR_DEBUG` | | version de PHP | panneau de l'hébergeur | 8.3, avec OPcache actif | | images | **Médias** | 1600 px au moins en pleine largeur, textes alternatifs remplis | | WebP | code source d'une page illustrée | des fichiers `.webp` dans les `srcset` | | CSS personnalisé | **Réglages › Apparence** | quelques Ko | | vidéos | bloc Vidéo | aucun lecteur avant le clic | | scripts tiers | gabarits | aucun | | mesure finale | Lighthouse mobile | 100 dans les 4 catégories, à un point près | ## À 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](https://eclair.academy/parcours/debutant/images-mediatheque) : formats, tailles et textes alternatifs. - [Directions artistiques et Score Design](https://eclair.academy/parcours/intermediaire/directions-artistiques) : la police de titre et ses garanties. - [Nginx, VPS, proxy et CDN](https://eclair.academy/parcours/expert/nginx-vps) : compression, cache navigateur et Cloudflare hors d'Apache. - web.dev : [les signaux Web essentiels](https://web.dev/articles/vitals), LCP, CLS et INP expliqués. - Chrome for Developers : [présentation de Lighthouse](https://developer.chrome.com/docs/lighthouse/overview). ## Questions fréquentes ### Pourquoi mon score est-il plus bas sur PageSpeed Insights qu'en local ? PageSpeed Insights mesure depuis les serveurs de Google, avec un mobile et un réseau simulés plus lents, et subit la latence de ton hébergement. Compare plusieurs passages et regarde d'abord le temps de réponse du serveur. ### Faut-il une extension de cache ou un CDN ? Éclair n'a pas d'extensions et n'en a pas besoin : le cache statique est intégré. Un CDN reste utile pour des visiteurs éloignés, à condition de laisser le HTML hors de son cache. ### Puis-je ajouter Google Analytics ? Pas sans modifier les gabarits et la CSP du noyau, puis ta politique de confidentialité. Commence par Search Console et les statistiques de ton hébergeur, qui ne coûtent aucun point. ### Les directions artistiques ralentissent-elles le site ? Elles ajoutent une police de titre de 12 à 27 Ko, servie par ton site et préchargée. Les quatre directions mesurées dans le dépôt gardent 100 dans les quatre catégories.