Vitesse d'un site web : pourquoi chaque seconde compte

Les seuils à connaître

Google mesure la vitesse perçue avec le Largest Contentful Paint (LCP), soit le moment où le plus gros élément visible de la page s'affiche. Son guide web.dev recommande un LCP de 2,5 secondes ou moins, évalué au 75e centile des chargements. Au-delà de 4 secondes, la performance est considérée comme mauvaise.

Pourquoi c'est important pour vous

Un visiteur qui attend ne revient pas toujours. Un site rapide donne une meilleure première impression, retient davantage les visiteurs et facilite le référencement. La vitesse fait partie des critères d'expérience utilisés par Google.

Les causes les plus fréquentes de lenteur

• Des images trop lourdes, non compressées
• Trop de scripts et de polices chargés au démarrage
• Un hébergement peu performant
• Des vidéos qui se lancent automatiquement en haute définition
• Des extensions et outils inutilisés

Comment accélérer un site

Compressez les images et utilisez des formats modernes comme WebP. Chargez les images sous le pli seulement au besoin. Retirez les scripts inutiles, hébergez vos fichiers près de vos visiteurs et activez la mise en cache. Mesurez avant et après avec un outil comme PageSpeed Insights.

Penser vitesse dès la conception

Il est beaucoup plus simple de concevoir un site léger dès le départ que de corriger un site lourd. Un design sobre, des visuels choisis avec soin et un code propre font toute la différence.

Les deux autres mesures à connaître

Au-delà du LCP, Google suit l'interactivité et la stabilité visuelle. Selon web.dev, une bonne interactivité (INP) se situe à 200 millisecondes ou moins, et une mauvaise à plus de 500 millisecondes. Pour la stabilité de la mise en page (CLS), un bon score est de 0,1 ou moins, et un mauvais dépasse 0,25. Ces seuils s'évaluent au 75e centile des visites.

Pour les images, web.dev recommande d'indiquer la largeur et la hauteur des images et des vidéos (ou de réserver l'espace avec l'attribut CSS aspect-ratio) afin d'éviter que la page saute pendant le chargement. L'image principale de la page devrait être chargée en priorité, sans chargement différé.

Décomposer le chargement en quatre temps

web.dev explique que le LCP se décompose en quatre sous-parties : le temps avant le premier octet reçu du serveur, le délai avant que le téléchargement de l'image principale commence, la durée de ce téléchargement et le délai avant l'affichage. Pour une page bien optimisée, les repères relatifs sont d'environ 40 % pour le premier octet, moins de 10 % pour le délai de départ, environ 40 % pour le téléchargement et moins de 10 % pour l'affichage. Identifier la partie la plus longue permet d'agir au bon endroit.

Les actions les plus efficaces

Quelques gestes donnent de bons résultats pour la plupart des sites :

• Placer l'image principale directement dans le HTML, et non derrière un script
• Lui donner une priorité élevée de chargement et ne jamais la charger en différé
• Servir les images en formats modernes comme WebP ou AVIF, aux bonnes dimensions
• Utiliser un réseau de distribution (CDN) pour rapprocher le contenu des visiteurs
• Réduire les redirections et retarder les scripts non essentiels
• Réserver l'espace des images et des vidéos pour éviter les décalages de mise en page

Réactivité et animations

Pour que la page réponde vite aux clics, il faut éviter les longues tâches de code : au-delà de 50 millisecondes, le navigateur est bloqué. On découpe le travail, on supprime le code inutile et on garde la page légère. Côté animations, mieux vaut animer des propriétés qui ne déplacent pas la mise en page, comme la transformation, plutôt que la position ou les marges.

Questions fréquentes

Notre service lié : Design web. Des sites web modernes et intuitifs, pensés pour mettre votre marque en valeur et transformer les visiteurs en clients.