Améliorer la vitesse de son site : tuto Core Web Vitals pour non-développeurs

Les trois indicateurs à connaître

Google résume l'expérience de chargement en trois métriques, les Core Web Vitals. Elles sont mesurées sur les visites réelles de vos utilisateurs, pas en laboratoire.

• LCP (Largest Contentful Paint) : temps d'affichage du plus gros élément visible, souvent l'image du haut de page. Objectif : moins de 2,5 secondes.
• INP (Interaction to Next Paint) : délai de réaction de la page quand on clique ou on tape. Objectif : moins de 200 millisecondes.
• CLS (Cumulative Layout Shift) : stabilité visuelle, c'est-à-dire les éléments qui sautent pendant le chargement. Objectif : moins de 0,1.

Mesurer correctement en 5 minutes

Ouvrez PageSpeed Insights, entrez l'URL de votre page d'accueil et lisez d'abord le bloc « Données de l'expérience utilisateur réelle » : c'est le seul qui compte pour le classement. Le score de laboratoire en dessous sert au diagnostic, pas au verdict.

Testez au minimum trois pages : l'accueil, une page de service et une page locale. Les problèmes diffèrent souvent d'un gabarit à l'autre. Répétez la mesure sur l'onglet Mobile — c'est celui que Google utilise pour l'indexation.

Correctif 1 — Les images, 80 % du problème

Dans la quasi-totalité des sites de TPE ralentis, la cause principale est une photo de 4 Mo affichée dans un bloc de 800 pixels de large. Trois actions suffisent à régler l'essentiel.

• Convertir les photos en WebP ou AVIF : 30 à 70 % de poids en moins à qualité identique.
• Servir plusieurs tailles selon l'écran (attribut srcset) au lieu d'une seule image géante redimensionnée par le navigateur.
• Activer le chargement différé (loading="lazy") sur toutes les images situées sous la ligne de flottaison, jamais sur l'image principale du haut.

Correctif 2 — Réserver la place des éléments

Le CLS vient presque toujours d'images ou d'iframes sans dimensions déclarées, et de bannières insérées après coup au-dessus du contenu. Déclarez width et height sur chaque image, réservez l'espace des bandeaux cookies et des publicités, et évitez d'injecter un élément au-dessus d'un texte déjà affiché.

Correctif 3 — Polices et scripts tiers

Les polices personnalisées bloquent souvent le premier affichage. Hébergez-les localement, limitez-vous à deux familles et deux graisses, et utilisez font-display: swap pour afficher le texte immédiatement.

Chaque script tiers — chat, pixel publicitaire, carte, widget d'avis — ajoute des requêtes et du temps d'exécution. Faites l'inventaire, supprimez ce qui n'est plus utilisé, et chargez le reste après l'affichage principal.

Correctif 4 — Hébergement et cache

Un temps de réponse serveur supérieur à 600 ms plombe tout le reste, quel que soit le travail sur les images. Vérifiez le TTFB dans PageSpeed, activez la compression Brotli ou gzip, mettez en cache les ressources statiques pour un an, et servez le site derrière un CDN si votre audience est dispersée.

Le plan d'action en une demi-journée

Pour un site vitrine classique, l'ordre le plus rentable est celui-ci. Mesurez avant et après chaque étape pour vérifier le gain réel plutôt que d'empiler les optimisations à l'aveugle.

• Compresser et convertir toutes les images du site.
• Précharger uniquement l'image principale de la page d'accueil.
• Ajouter les dimensions manquantes sur images et iframes.
• Supprimer les scripts tiers inutilisés.
• Passer les polices en local avec swap.
• Activer compression et cache serveur.
• Remesurer sur mobile, page par page.
• Revérifier 28 jours plus tard sur les données réelles.