Core Web Vitals : rendre un site vitrine rapide, mesure par mesure

Un visiteur qui attend trois secondes devant une page blanche repart souvent avant de voir votre offre. Google mesure cette expérience avec trois indicateurs, les Core Web Vitals, et en tient compte dans son classement. Bonne nouvelle : sur un site vitrine, les atteindre est surtout une question de discipline.

Les trois mesures

Les seuils s'appliquent au 75e centile des visites réelles : trois visiteurs sur quatre doivent avoir une bonne expérience. L'INP a remplacé le FID en mars 2024 ; il est plus exigeant, car il prend en compte toutes les interactions et pas seulement la première.

Où mesurer

• PageSpeed Insights affiche les données réelles de vos visiteurs Chrome, si votre site a assez de trafic, et une mesure de laboratoire.
• Lighthouse, dans les outils de développement de Chrome, mesure en laboratoire. Pratique pendant le développement, mais il ne remplace pas les données réelles.
• La Search Console regroupe les pages lentes de votre site une fois qu'il est indexé.

Testez toujours en mode mobile avec un réseau ralenti : c'est la condition de la majorité de vos visiteurs.

Améliorer le LCP

Sur un site vitrine, le plus grand élément est presque toujours l'image ou le titre du haut de page.

1. Servez l'image principale en AVIF ou WebP, à la bonne taille. Une photo de 4000 pixels de large affichée sur 1200 pixels gaspille du temps et des données. L'attribut srcset laisse le navigateur choisir.
2. Ne chargez pas cette image en différé. loading="lazy" est utile pour les images plus bas dans la page, mais nuisible pour l'image principale. Ajoutez-lui plutôt fetchpriority="high".
3. Limitez les polices. Deux familles, au format WOFF2, avec font-display: swap pour que le texte s'affiche tout de suite avec une police de secours.
4. Choisissez un hébergement proche de vos visiteurs, ou un CDN. Un temps de réponse du serveur supérieur à 800 ms rend un bon LCP presque impossible.

Améliorer l'INP

L'INP se dégrade quand le navigateur est occupé à exécuter du JavaScript au moment où l'on clique.

• Moins de scripts. Chaque widget tiers (chat, carte, réseaux sociaux) ajoute du code. Demandez-vous s'il est indispensable, et chargez-le au moment où l'on en a besoin : une carte peut s'afficher au clic sur « Voir le plan ».
• Pas de traitement lourd au clic. Une réaction visible immédiate, même un simple indicateur de chargement, puis le travail.
• Méfiez-vous des curseurs et animations au défilement pilotés en JavaScript : le CSS fait la même chose sans bloquer la page.

Améliorer le CLS

Les sauts de mise en page viennent presque toujours d'éléments dont la taille n'est pas connue à l'avance.

• Donnez une largeur et une hauteur à chaque image et vidéo, ou un aspect-ratio en CSS. Le navigateur réserve la place avant le chargement.
• Réservez la place des bandeaux (cookies, annonce) au lieu de les insérer en haut de page après coup ; ou affichez-les par-dessus le contenu, en bas.
• Choisissez des polices de secours proches de vos polices web, pour que le texte ne change pas de longueur au chargement.

Ce que nous faisons dans les templates Forge

Les templates n'embarquent aucune photo lourde : les visuels de démonstration sont dessinés en CSS et en SVG, les polices sont au format WOFF2 et hébergées avec le site, et les versions HTML ne chargent qu'environ 4 Ko de JavaScript, pour le menu mobile. Quand vous ajoutez vos propres photos, gardez les réflexes ci-dessus : c'est souvent là que les bons scores se perdent.

En résumé

Une image principale légère et prioritaire, des dimensions sur toutes les images, peu de polices, peu de scripts. Ces quatre règles suffisent à placer la plupart des sites vitrines dans le vert.