Performance & Core Web Vitals

La vitesse n'est pas un luxe, c'est un facteur de classement

Depuis 2021, Google utilise les Core Web Vitals comme signal de classement. Ces trois métriques mesurent l'expérience réelle de tes utilisateurs : la vitesse de chargement du contenu principal (LCP), la réactivité aux interactions (INP) et la stabilité visuelle de la page (CLS).

Un site qui échoue sur ces métriques est pénalisé dans les résultats de recherche. Et au-delà du SEO, un site lent perd des visiteurs, des leads et des ventes. Les études sont unanimes : chaque seconde de chargement en plus fait chuter le taux de conversion de 7 %. Sur mobile, 53 % des visiteurs abandonnent si la page met plus de 3 secondes à s'afficher.

La performance web n'est pas un sujet technique réservé aux développeurs. C'est un levier business qui impacte directement ton chiffre d'affaires et ta visibilité.

Les trois Core Web Vitals expliqués

LCP — Largest Contentful Paint

Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible dans la fenêtre du navigateur. Il s'agit généralement d'une image hero, d'un titre principal ou d'un bloc de texte important. L'objectif est un LCP inférieur à 2,5 secondes.

Les causes fréquentes d'un mauvais LCP : images non optimisées, polices web bloquantes, CSS render-blocking, serveur lent, absence de CDN. Nous intervenons sur chacun de ces facteurs pour ramener ton LCP dans le vert.

INP — Interaction to Next Paint

L'INP a remplacé le FID (First Input Delay) en mars 2024. Cette métrique mesure la réactivité globale de ton site aux interactions utilisateur : clics, taps, saisie clavier. L'objectif est un INP inférieur à 200 millisecondes.

Un mauvais INP est souvent causé par du JavaScript lourd qui bloque le thread principal. Scripts d'analytics mal configurés, carousels gourmands, bibliothèques inutilisées : chaque script ajouté à ta page a un coût de performance que nous quantifions et optimisons.

CLS — Cumulative Layout Shift

Le CLS mesure la stabilité visuelle de ta page. Rien de plus frustrant qu'un bouton qui bouge au moment où tu essaies de cliquer dessus, ou un texte qui se décale parce qu'une image se charge tardivement. L'objectif est un CLS inférieur à 0,1.

Les causes principales : images sans dimensions explicites, publicités ou embeds qui s'insèrent dynamiquement, polices web qui provoquent un flash de contenu. Nous corrigeons chaque source d'instabilité pour une expérience visuelle stable et prévisible.

Nos interventions techniques

Optimisation des images

Les images représentent en moyenne 50 % du poids total d'une page web. Nous les optimisons sans perte de qualité visible : conversion au format WebP ou AVIF, compression intelligente, dimensionnement adapté à chaque breakpoint, lazy loading pour les images hors écran.

• Conversion automatique en WebP/AVIF avec fallback JPEG
• Images responsives avec srcset et sizes
• Lazy loading natif pour les images sous la ligne de flottaison
• Preload de l'image LCP pour un affichage immédiat

Optimisation CSS et JavaScript

Le CSS et le JavaScript render-blocking sont les ennemis de la performance. Nous extrayons le CSS critique (au-dessus de la ligne de flottaison) et l'inlinons dans le HTML. Le reste du CSS est chargé de manière asynchrone. Le JavaScript non essentiel est différé avec defer ou async.

• CSS critique inliné, CSS non critique chargé en async
• JavaScript différé (defer) ou chargé dynamiquement
• Tree-shaking pour éliminer le code mort
• Minification et compression (gzip/brotli)
• Bundling optimisé avec code splitting

Stratégie de cache

Un cache bien configuré évite de recharger les mêmes ressources à chaque visite. Nous mettons en place des en-têtes cache-control adaptés à chaque type de ressource : cache long pour les assets statiques (CSS, JS, images), cache court pour les pages HTML dynamiques.

Gestion des scripts tiers

Google Analytics, pixels Facebook, chatbots, widgets de consentement cookies : les scripts tiers sont souvent les premiers responsables de la dégradation des performances. Nous auditons chaque script tiers, évaluons son impact réel et proposons des alternatives moins gourmandes quand elles existent.

• Audit de l'impact de chaque script tiers
• Chargement conditionnel (après interaction utilisateur)
• Remplacement des scripts lourds par des alternatives légères
• Facade pattern pour les widgets non critiques

Ce qui est inclus

• Audit de performance complet (Lighthouse, WebPageTest, CrUX)
• Optimisation des Core Web Vitals (LCP, INP, CLS)
• Compression et conversion des images
• Optimisation CSS/JS (critical path, defer, minification)
• Configuration du cache navigateur et CDN
• Audit et optimisation des scripts tiers
• Mise en place du monitoring de performance
• Rapport avant/après avec métriques mesurées