Web Perf : le guide septembre 2026

Largest Contentful Paint (LCP)

Le LCP mesure le temps d'affichage du plus grand élément visible au chargement. Objectif : moins de 2,5 secondes. En savoir plus.

• Images : compression, formats WebP ou AVIF, srcset/<picture>. Pour l'image LCP, ajoutez fetchpriority="high" et ne la mettez jamais en loading="lazy".
• Ressources critiques : <link rel="preload"> pour l'image LCP et les polices, CSS critique en ligne, CSS/JS non critiques chargés de façon différée.
• Serveur et réseau : temps de réponse (TTFB) réduit, CDN, cache HTTP, HTTP/2 ou HTTP/3.

Interaction to Next Paint (INP)

L'INP a remplacé le FID en mars 2024. Il mesure la réactivité de la page à toutes les interactions (clic, toucher, clavier) sur la durée de la visite. Objectif : moins de 200 ms. En savoir plus.

• Découper les longues tâches JavaScript (guide) et rendre la main au navigateur (par exemple avec scheduler.yield() quand il est disponible).
• Supprimer ou différer le JavaScript inutile et auditer les scripts tiers.
• Déporter les calculs lourds dans des Web Workers.
• Limiter la taille du DOM et la complexité des sélecteurs CSS ; content-visibility: auto peut alléger le rendu initial (MDN).

Cumulative Layout Shift (CLS)

Le CLS additionne les décalages de mise en page inattendus. Objectif : moins de 0,1. En savoir plus.

• Toujours indiquer width et height (ou aspect-ratio) sur images, vidéos et iframes.
• Réserver l'espace des publicités et des contenus embarqués.
• Ne pas insérer de contenu au-dessus du contenu existant, sauf en réponse à une action de l'utilisateur.
• font-display: swap (ou optional) et polices de secours ajustées pour limiter les décalages dus aux polices.

Optimisation des images

• Formats : WebP (très largement pris en charge), AVIF (meilleure compression, désormais bien pris en charge : vérifiez Can I use), JPEG pour les photos en repli, PNG pour les aplats avec transparence, SVG pour logos et icônes.
• Compression : avec perte (Squoosh, cwebp, avifenc) ou sans perte quand la fidélité prime. Minifier les SVG avec SVGOMG.
• Responsive : srcset, sizes et <picture> (MDN).
• Lazy loading pour les images hors écran, et CDN d'images (Cloudinary, Imgix, Sirv…) pour redimensionner et convertir à la volée.

Optimisation du cache

Le cache réutilise les ressources déjà téléchargées. Caching HTTP - MDN.

• Cache navigateur : en-têtes Cache-Control (préféré à Expires), ETag, Last-Modified. Ressources versionnées : max-age=31536000, immutable ; HTML : cache court ou revalidation.
• Service Worker : stratégies avancées (cache-first, network-first, stale-while-revalidate) pour les PWA.
• Cache CDN : ressources servies au plus près de l'utilisateur.

Exemple Apache (.htaccess) : cache long pour les fichiers statiques, sans toucher au HTML.

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
</IfModule>

Configuration serveur

• Compression : Brotli en priorité, gzip en repli, sur les ressources texte uniquement (pas sur les images ni les WOFF2).

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

• HTTP/2 et HTTP/3 : multiplexage, compression des en-têtes ; HTTP/3 (QUIC) est largement déployé chez les CDN et les navigateurs (Can I use). Le « server push » HTTP/2 est abandonné : utilisez preload ou les 103 Early Hints.
• Cache serveur (Redis, Memcached, cache de pages) et PHP-FPM avec OPcache pour les sites dynamiques.
• Minification du HTML, du CSS et du JavaScript via vos outils de build.
• Redirections : limitez-les, chaque saut ajoute de la latence. Redirection permanente :

  Redirect 301 /ancienne-page.html /nouvelle-page.html

• Hébergement : ressources, localisation et capacité adaptées au trafic.

Fichiers de contrôle : robots.txt, sitemap.xml et llms.txt

• robots.txt : contrôle l'exploration (pas l'indexation) et préserve le budget de crawl. Google Search Central. Le champ Crawl-delay n'est pas pris en charge par Google.

  User-agent: *
  Disallow: /admin/
  Disallow: /tmp/
  
  Sitemap: https://www.web-perf.com/sitemap.xml

• sitemap.xml : liste les URL à indexer, avec lastmod fiable (Google ignore priority et changefreq). À soumettre dans Google Search Console et Bing Webmaster Tools.
• llms.txt : proposition de 2024 de fichier Markdown (titre, résumé, liens vers les pages clés) destiné aux assistants IA. Ce n'est pas un fichier de permissions comme robots.txt, et son usage réel par les moteurs et les IA reste, à ma connaissance, non confirmé : à traiter comme facultatif. Pour interdire des robots d'IA, utilisez robots.txt avec leurs user-agents.

Pré-chargement (preload)

Il signale au navigateur une ressource critique à charger tôt (MDN).

<link rel="preload" href="/img/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/police.woff2" as="font" type="font/woff2" crossorigin>

Préchargez peu de ressources, renseignez toujours as et mesurez l'effet : un preload mal placé peut dégrader les performances. Complétez avec preconnect vers les origines tierces indispensables.

Chargement prédictif et Speculation Rules

La Speculation Rules API remplace avantageusement <link rel="prefetch"> et les bibliothèques de prédiction : des règles JSON indiquent les pages à précharger (prefetch) ou à pré-rendre entièrement (prerender). Le paramètre eagerness (conservative, moderate, eager) évite un préchargement trop agressif. Elle est prise en charge par les navigateurs Chromium ; vérifiez la compatibilité sur Can I use et prévoyez un comportement normal ailleurs. Ne pré-rendez pas de pages à effets de bord (déconnexion, panier).

<script type="speculationrules">
{
  "prerender": [
    { "where": { "href_matches": "/*" }, "eagerness": "moderate" }
  ]
}
</script>

Chargement différé (lazy loading)

L'attribut natif loading="lazy" s'applique aux images et iframes situées sous la ligne de flottaison, et il est pris en charge par tous les navigateurs modernes. Ne l'utilisez pas sur l'image LCP ni sur les ressources visibles au chargement.

<img src="image.webp" width="800" height="450" loading="lazy" alt="Description">

Chargement différé des scripts : defer et async

• defer : téléchargement en parallèle, exécution après l'analyse du HTML et dans l'ordre. C'est le bon choix par défaut.
• async : exécution dès que le script est prêt, sans ordre garanti. Réservé aux scripts indépendants (analytics, widgets).
• Sans attribut, le script est bloquant : à éviter pour tout ce qui n'est pas critique. Les modules (type="module") sont différés par défaut.

<script defer src="script.js"></script>

Documentation : élément script - MDN.