10 conseils pour améliorer les performances de votre site web

Les performances d’un site web peuvent s’avérer un élément déterminant de son succès, ou de son échec. Un site lent peut faire fuir les visiteurs, alors qu’un chargement rapide favorise leur satisfaction.

Parmi les éléments clés pour mesurer les performances de votre site, on retrouve ce que Google appelle les Core Web Vitals. En d’autres termes, il s’agit des mesures vitales clés pour le web.

Selon les derniers rapports de Chrome, plus de 50,1% des sites web ont déjà de bons scores de Core Web Vitals. Ce nombre continue d’ailleurs de croître sans arrêt. Cela indique que davantage de propriétaires de sites se sensibilisent à l’importance des performances.

Si vous ne faites pas encore partie de ces 50 %, vous risquez de voir votre classement en souffrir dans les résultats Google, en plus de décevoir vos visiteurs.

Voilà pourquoi nous avons rédigé cet article, visant à vous aider à améliorer les performances de votre site web.

Vous pourrez ainsi améliorer son référencement et son expérience utilisateur, tout en augmentant vos taux de conversion et diminuant vos taux de rebonds.

Quels sont les éléments clés des performances d’un site web?

Google a conçu les Core Web Vitals pour être des indicateurs clés en matière de performances. En ce sens, elle joue un rôle similaire à des notes sur un bulletin scolaire, pour votre site web.

Google utilise ces mesures parmi d’autres pour évaluer la qualité et la convivialité de votre site. Il mesure ainsi la vitesse de chargement de votre site web, sa réactivité et sa stabilité visuelle, afin d’évaluer l’expérience utilisateur.

Il existe de nombreuses données pouvant permettre d’évaluer les performances d’un site web. Google a toutefois choisi de n’en retenir que trois, considérées comme plus importantes.

Les trois mesures de base des performances d’un site web :

• Plus grande peinture contenue (Largest Contentful Paint ou LCP)
• Décalage de disposition cumulatif (Cumulative Layout Shift ou CLS)
• Interaction avec la peinture suivante (Interaction to Next Paint ou INP)

Ces éléments peuvent ne pas avoir de sens pour le moment — Essayons de les comprendre séparément.

Plus grande peinture contenue (Largest Contentful Paint ou LCP)

Cette première donnée mesure la vitesse à laquelle le plus grand élément de contenu (l’image principale, une grande vidéo ou un gros morceau de texte) est entièrement chargé sur votre page.

Selon l’étude de Chrome citée précédemment, 64,8% des sites Web auraient déjà des scores LCP acceptables.

Pour les rejoindre, votre LCP doit atteindre un temps de chargement de 2,5 secondes ou moins. Au-delà de quatre secondes, votre score sera considéré mauvais, et pourrais diminuer votre taux de conversion.

Décalage de disposition cumulatif (CLS)

De nos jours, plus de la moitié des internautes utilise des appareils mobiles pour naviguer sur le web. Les sites web doivent donc être capable de s’adapter facilement à tout type d’écran.

L’indicateur suivant mesure la réactivité de votre contenu. Il mesure la quantité de décalage au cours du chargement, entre la mise en page prévue et celle qui s’affiche réellement.

Un score CLS faible signifie que votre mise en page reste stable au cours du processus de chargement. Idéalement, il devrait être de zéro en version mobile et pc.

En septembre 2024, 78,2 % des sites web obtiendraient de bons scores CLS, selon Google. Offrir une expérience utilisateur fluide et sans décalage est donc une priorité de plus en plus répandu.

En règle général, vous devriez viser un score CLS de 0,1 ou moins. Toute note au-dessus de 0,25 peut nuire à vos résultats auprès des utilisateurs mobiles.

Interaction avec la peinture suivante (INP)

Depuis le 12 mars 2024, le 3e paramètres vital du Web est l’INP, ou Interaction to Next Paint. Cette mesure remplace le délai de première entrée (First Input Delay ou FID) au sein des Core Web Vitals.

Le FID ne mesurait que la première interaction possible pour l’utilisateur. L’INP va désormais plus loin, et examine toutes les interactions possibles sur une page web.

Les données de l’étude de Chrome indiquent que 85% des sites web obtiennent déjà de bons scores INP. Il est d’ailleurs fort probable que si vous optimisez votre site pour les deux scores précédents, votre INP s’améliorera également.

Pour améliorer l’expérience de vos utilisateurs, visez un INP de 200 millisecondes ou moins. Un score entre 200 et 500 millisecondes est tolérable, mais indique que vous avez du travail à faire.

Tout résultat qui dépasse 500 millisecondes nuit sérieusement à l’expérience utilisateur.

Comment mesurer les signes vitaux du noyau

Avant de commencer à améliorer vos scores de Core Web Vitals, il est sage d’avoir une idée de l’état actuel de votre site.

De cette façon, vous serez en mesure de mesurer vos progrès. L’évaluation régulière de vos scores peut être une partie précieuse de la maintenance de votre site web.

Examinons quelques façons de mesurer les performances de votre site web.

PageSpeed Insights

Il existe une poignée d’outils en ligne que vous pouvez utiliser pour mesurer les Core Web Vitals, y compris Pingdom et GTmetrix. Nous recommandons toutefois d’utiliser Google PageSpeed Insights.

Pour commencer, rendez-vous sur le site et entrez l’URL de votre site web. Cliquez ensuite simplement sur le bouton Analyser.

Une fois l’analyse de votre site terminée, l’outil vous fournira un résumé de certaines des données clés et des données de base sur les Core Web Vitals.

À titre d’exemple, nous avons testé le site web Google.com, pour voir si l’entreprise réussi son propre test. Voici les résultats:

Comme vous pouvez le voir dans la capture d’écran ci-dessus, Google ne donne pas toujours le meilleur exemple, et peine parfois à respecter ses propres règles.

Le site de Google.com a donc échoué le test, en atteignant seulement deux objectifs sur trois:

• LCP : 1,2 secondes – réussi!
• INP : 259 millisecondes – échoué! dépasse 250 ms
• CLS : 0,04 – réussi!

PageSpeed Insights teste les scores des appareils mobiles et des ordinateurs en même temps. Vous pouvez basculer d’une série de résultats à l’autre à l’aide des onglets destinés à cet effet.

Si vous faites défiler la page de résultats, vous trouverez également des diagnostics et des suggestions d’améliorations.

PageSpeed Insights vous proposera une série de recommandations que vous pouvez utiliser pour augmenter votre score et améliorer les performances de votre site. Cette liste sera plus ou moins longue, en fonction de vos résultats.

Rapport sur l’expérience utilisateur de Chrome

Vous pouvez également accéder à vos Core Web Vitals via votre rapport d’expérience utilisateur Chrome. Cela peut être particulièrement utile pour les développeurs et les webmasters.

Ce rapport est disponible via un autre outil appelé la Google Search Console. Il vous fournit des données réelles et des informations sur vos visiteurs et leur activité.

Ce rapport vous aide ainsi à comprendre comment vos utilisateurs utilisent le web et interagissent avec votre site.

Pour y accéder, vous devez vous connecter au tableau de bord de l’outil Google Search Console. Vous devez ensuite accéder à la section Core Web Vitals, qui se trouve dans la section « Experience ».

L’extension Chrome Core Web Vitals

Un autre outil pratique peut vous aider à évaluer les score de Core Web Vitals des sites web que vous visitez.

Si vous utilisez le navigateur Google Chrome, vous pouvez utiliser l’extension Web Vitals pour évaluer vos paramètres vitaux de base sur n’importe quel site Web.

Il suffit d’ajouter l’extension à Chrome pour y avoir accès. Il faut toutefois éviter de confondre avec l’application Core Web Vitals.

Bien que celle-ci soit mieux évaluée par les utilisateurs, Google émet un avertissement à son sujet. L’application risque d’ailleurs de bientôt devenir inaccessible, alors il vaut mieux choisir l’outil recommandé.

Grâce à cet outil, chaque fois que vous vous connectez à un site web, vous pourrez cliquez sur l’icône de l’extension dans la barre du navigateur pour y accéder. Vous verrez alors le score des Core Web Vitals pour la page web affichée.

Les scores LCP, CLS et INP seront ainsi accessibles en un coup d’œil. Vous n’aurez plus à consulter la page de PageSpeed Insight pour les connaître.

Comment améliorer les performances de votre site web?

Jusqu’à maintenant, nous avons abordé les bases des performances d’un site web. Il est désormais temps de vous donner quelques conseils pour améliorer vos scores de Core Web Vitals.

L’objectif n’est pas seulement d’impressionner Google. Cette optimisation permet de créer un site web rapide et fluide que les internautes aimeront utiliser.

1. Utilisez les formats d’image modernes

Les humains sont d’abord et avant tout attirés par le contenu visuel. Il est donc naturel d’utiliser des éléments multimédias pour tenter de se démarquer de ses compétiteurs.

Des vidéos ou des belles images à haute résolution peuvent toutefois nuire aux performances d’un site si elles ne sont pas correctement compressées.

Il est généralement préférable d’optimiser les fichiers avant de les téléverser sur votre site web plutôt que d’utiliser des solutions côté serveur.

Google a d’ailleurs créer un type d’images spécifiquement optimisé pour internet, soit le format WebP. Il permet de conserver la résolution des images à un niveau presque identique, tout en réduisant considérablement la taille des fichiers.

WebP est ainsi devenu le format de référence pour les photographies et les images complexes. Il offre une nettement meilleure compression que des formats comme JPG ou PNG. Il permet donc des fichiers moins volumineux, sans sacrifier la qualité des images.

Les fichiers d’images WebP sont environ 30 % moins volumineux que leurs équivalents en version JPG. Ils permettent donc de réduire les besoins de bande passante et le temps nécessaire au chargement.

Plusieurs outils peuvent vous permettre d’optimiser facilement vos images. Notamment, l’application Squoosh vous offre de convertir des images en WebP ou de simplement les compresser pour économiser de l’espace.

Voici quelques plugins d’optimisation d’image qui mérite aussi d’être pris en compte :

• ShortPixel Image Optimizer
• Optimiseur d’image EWWW
• Imagifier
• Smush

Mis à part le format WebP, nous recommandons aussi d’utiliser SVG pour les icônes, logos et illustrations.

Le format SVG est l’acronyme de Scalable Vector Graphics. Il ne s’agit pas d’images enregistrées sous forme de pixels, comme les formats d’image classiques tel que JPEG, PNG, WebP, etc.

Les SVGs sont un langage de balisage basé sur le XML qui décrit l’image sur un plan géométrique 2D. En d’autres termes, les images prennent la forme de formules mathématiques.

Celles-ci sont converties par le navigateur des utilisateurs. Les images sont alors « reconstruites » en selon les instructions du balisage SVG complet.

Cette technique de programmation rend les SVG extrêmement légers, puisque les fichiers sont essentiellement des petits blocs de texte.

Le fait que les images SVG soient créées à partir de calculs présente aussi d’autres avantages. Elles peuvent être mises à l’échelle sans la moindre perte de qualité et elles ont un aspect net sur n’importe quel type d’écran.

Vous pouvez donc zoomer autant que vous voulez, l’image elle ne pixellisera pas.

2. Optimisez les polices de votre site web pour les performances

Les polices de caractères que vous choisissez peuvent aider ou nuire à votre site web. Quand il est question d’optimiser les performances de votre site web, un moins grand nombre de polices est généralement recommandé.

Voici quelques conseils pour optimiser les polices de votre site web :

• Limitez le nombre de polices : N’utilisez pas plus de deux polices principales sur votre site web. Cela signifie une police pour les titres et une autre pour le corps du texte. Vous réduirez ainsi le nombre de requêtes HTTP en simplifiant votre design. Faites également attention au poids des polices, et n’incluez que celles dont vous avez réellement besoin.
• Si possible, utilisez les mêmes polices que le système : Les systèmes informatiques ont tous des polices de caractères d’inclus et préinstallées. On peut penser à des options comme Arial, Helvetica ou Georgia. Ces polices se chargent instantanément, en plus de vous éviter de trouver des solutions supplémentaires.
• Préchargez les polices critiques : Un lien de préchargement ajouté dans votre HTML peut indiquer au navigateur d’obtenir vos polices principales au début du processus de chargement. Cette solution peut améliorer considérablement les temps de chargement du contenu textuel.
• Optimisez vos polices personnalisées pour éviter les décalages : Les navigateurs ne connaissent pas les dimensions exactes des caractères des polices personnalisées avant des les télécharger. Cette réalité peut parfois entraîner des décalages entre la mise en page prévue et celle qui s’affiche réellement. Ce décalage mesuré par le CLS, ou Cumulative Layer Shift. De nombreux outils peuvent vous aider à générer des CSS pour réduire le décalage.
• Réduisez l’étendu de vos polices : Supprimez les caractères non utilisés de vos fichiers de polices, comme les caractères non latins si votre site ne les utilise pas. Cela réduit la taille des fichiers et accélère les temps de chargement.

Il existe quelques stratégies avancées d’optimisation des polices de caractères. Cette liste de conseils devrait toutefois vous aider à éviter que les polices ne nuisent trop aux performances de votre site web.

3. Pensez-y bien avant d’utiliser Google Tag Manager

Google Tag Manager est un outil pratique qui accomplit parfaitement ses objectifs. Il peut vous aider à choisir des mots-clés à viser pour améliorer votre référencement SEO.

C’est un outil complet permettant de gérer plusieurs balises de mots-clés sans utiliser de code. Il présente toutefois à la fois des avantages et des inconvénients en ce qui concerne les Core Web Vitals.

Google Tag Manager est excellent pour la gestion de vos mots-clés. Il peut cependant ralentir votre site s’il n’est pas utilisé judicieusement.

Chaque balise ajoute quelques millisecondes au temps de chargement. Si vous en utilisez un trop grand nombre, elle s’additionnent pour retarder cumulativement le chargement de manière significative.

Chacune des balises se déclenche à chaque chargement de page. Il vaut donc mieux utiliser Google Tag Manager uniquement pour les balises essentielles et à l’échelle du site uniquement. Il est préférable de tester manuellement les balises moins critiques ou spécifiques aux pages.

4. Utilisez la mise en cache pour améliorer les performances de votre site web

La mise en cache est un peu comme un « souvenir » récent de votre site web.

Sans cache, le contenu de chaque page web est entièrement depuis le serveur pour chaque visiteur. Au contraire, la mise en cache stocke une copie de la page et la présente aux visiteurs sans devoir la charger.

L’utilisation de la mise en cache peut ainsi améliorer considérablement les temps de chargements, et particulièrement le LCP. L’impact est d’autant plus important pour les sites web dynamiques ou riches en contenu multimédias. Il existe différents niveaux de mise en cache que vous pouvez envisager :

• Cache du navigateur : Indique aux navigateurs de stocker certains fichiers localement.
• Mise en cache côté serveur : Stocke les pages générées ou les requêtes de base de données.
• Objet en cache : cache des éléments individuels comme les widgets ou les menus.

En fonction de votre hébergeur web, vous êtes peut-être en mesure de tirer parti de la mise en cache au niveau du serveur.

Par exemple, les plans d’hébergement web d’Ex2 vous offrent l’accès à des serveurs compatibles avec la technologie de mise en cache Litespeed.

Si vous utilisez WordPress comme CMS pour votre site web, le plugin LS Cache peut vous aider à mettre en place des couches de mise en cache. Il offre diverses options de caches de navigateur et d’objets permettant d’améliorer la vitesse de chargement de votre site.

5. Éliminer les ressources de blocage du rendu

Les éléments de blocage de rendu font référence aux fichiers HTML, CSS et JavaScript statiques nécessaires pour livrer une page de votre site.

Chacun de ces fichiers contient des scripts qui peuvent empêcher vos utilisateurs d’afficher du contenu. Généralement, ils sont créés à partir de plugins et d’outils tiers.

Pour éviter que ces scripts ne nuisent à votre expérience utilisateur, vous pouvez éliminer les ressources de blocage du rendu et réduire ou supprimer tous les éléments inutilisés.

Il existe plusieurs techniques que vous pouvez utiliser pour faire cela.

Vous pouvez tout d’abord réduire votre JavaScript et CSS manuellement. Cela implique notamment d’éliminer les espaces blancs ou les commentaires inutiles.

Cette tâche peut être simplifiée en utilisant un outil comme CSS Minifier pour faciliter les choses.

Il vous suffit alors d’entrer votre CSS et sélectionnez le bouton Minify. Vous pouvez copier et coller la version optimisée pour remplacer votre code précédent.

Une autre méthode consiste à condenser votre JavaScript et CSS en combinant les fichiers. Pour ce faire, vous pouvez notamment utiliser un outil d’optimisation de fichiers, comme celui du plugin WP Rocket.

6. Reporter le chargement de JavaScript

Pour améliorer vos scores FID en particulier, vous pouvez utiliser une technique connue sous le nom de chargement différé ou retardé. Il s’agit en fait de différer le chargement de JavaScript. Cette approche permet d’éliminer les éléments bloquant le rendu.

Le chargement différé permet de commencer charge d’autres contenus sur la page dès qu’un visiteur arrive, plutôt que d’attendre que tous les fichiers JavaScript finissent de charger.

Au contraire, ce seront vos fichiers que se trouveront forcés d’attendre que le reste de votre page web soit chargé.

Vous pouvez aussi choisir que le CSS critique charge « le contenu au-dessus du pli » plus rapidement. « Au-dessus du pli » désigne les éléments de la page web qui apparaissent en premier.

7. Utiliser un réseau de diffusion de contenu (CDN)

Imaginez que votre site web ait un clone de lui-même dans chaque grande ville du monde. C’est essentiellement ce qu’un réseau de diffusion de contenu (CDN) fait.

Il distribue des copies de vos actifs statiques (comme les images, CSS et fichiers JavaScript) sur des serveurs du monde entier, afin que vos visiteurs puissent les télécharger à partir de l’emplacement le plus proche.

Le résultat? Des temps de chargement plus rapides, des scores LCP améliorés et une meilleure expérience utilisateur pour votre public mondial. Il peut également aider à minimiser le temps au premier octet (TTFB).

Il existe plusieurs outils tiers que vous pouvez utiliser pour votre site WordPress. L’une des options les plus populaires est Cloudflare.

8. Optimisez les formats des images de votre site web pour les performances

Plus une image est grande, plus le fichier qui la compose est volumineux. Par conséquent, il est sage d’éviter d’utiliser des images trop grandes un peu partout.

Par exemple, il n’y a aucune raison d’utiliser de grandes images HD pour vos miniatures. Vous devriez plutôt choisir des images plus petites et à faible résolution.

Pour optimiser davantage vos images, vous pouvez utiliser l’attribut srcset dans votre code HTML. Cette balise vous permet de spécifier les emplacements des images de différentes tailles.

Les navigateurs peuvent alors automatiquement servir des images de la bonne taille, en fonction de la résolution du périphérique. Ce procédé améliore les performances, particulièrement le score LCP.

Vous pouvez également spécifier les attributs de largeur et de hauteur pour vos balises d’image. Une autre solution est de réserver l’espace nécessaire avec le ratio d’aspect CSS. Cela assure que l’utilisateur voit automatiquement des images plus petites.

Vous pouvez le faire en prenant le contenu du fichier CSS principal et l’inlining dans votre code. Le contenu chargera ainsi plus rapidement, ce qui améliorera l’expérience utilisateur.

Certains plugins de mise en cache (comme WP Rocket) offrent aussi une fonctionnalité d’optimisation CSS qui peut être servir à cet effet.

9. Utilisez le chargement paresseux (Lazy Loading)

Nous vous recommandons aussi de tirer profit du chargement paresseux ou lazy loading. Cette technique permet d’éviter que vos images soient chargées en même temps que tout le reste sur la page. Elles chargent plutôt au moment précis où les utilisateurs accèdent à la section de la page web dans laquelle elles sont incluses.

Les images à chargement différé peuvent aider à améliorer votre score LCP et la vitesse de chargement. Elles sont aussi plutôt faciles à utiliser.

Les navigateurs modernes prennent en charge le chargement lent natif. Il suffit d’inclure l’attribut loading=”lazy” sur les balises .

Pour les utilisateurs de WordPress, vous avez juste besoin d’un plugin (comme Smush) pour activer le lazy loading.

10. Améliorez votre hébergement web

Il peut arriver que vous aillez tout fait correctement, mais que vos scores de Core Web Vitals restent bas. Si c’est ce cas, c’est peut-être que les besoins de votre site dépassent les ressources auxquelles il a accès.

À ce stade, il est logique d’envisager de mettre à niveau de votre plan d’hébergement web. Vous pourrez ainsi augmenter les ressources accessibles à votre site.

La mise à niveau de votre hébergement web est le moyen le plus rapide pour accélérer votre site Web. Ce n’est toutefois pas une solution miracle, si vous n’avez pas rempli les étapes précédentes.

De plus, cette solution n’est pas gratuite. Chaque fois que vous passez à un plan supérieur, vous augmentez les frais d’opérations de votre site web. C’est pourquoi nous avons placé ce conseil à la toute fin de notre liste.

Pour conclure nos conseils pour améliorer les performances de votre site web

Les performances de votre site web peuvent jouer un rôle majeur dans le succès ou l’échec de votre site web. Il est donc important de vous assurer que votre site est conforme aux Core Web Vitals de Google.

Ce sont des indicateurs clés de la vitesse de chargement, qui jouent également un rôle important dans le référencement SEO.

Nous espérons que cet article vous a aidé à améliorer les performances de votre site web. Si c’est le cas, nous vous invitons à consulter nos autres autres articles et tutoriels.

N’hésitez pas non plus à consulter notre base de connaissance. Vous y trouverez une foule d’articles détaillés pouvant répondre à toutes vos questions web.