core web vitals optimisations 2020

« Si seulement je pouvais simplement agiter une baguette magique et avoir un site web super rapide ! » Cela vous a probablement aussi traversé l’esprit, n’est-ce pas ? Surtout en ce moment où les core web vitals de Google sont au centre des conversations. Optimiser la vitesse du site et l’expérience utilisateur, c’est beaucoup de travail et cela devient parfois assez technique et compliqué.

 

Core Web Vitals, où en sommes-nous ?

 

Dans cet article, nous passons en revue cinq actions que vous pouvez réaliser pour améliorer vos Core Web Vitals. Vous trouverez donc dans ce post des conseils vous permettant de booster vos performances au regard de ces nouveaux scores mis en place par Google.

Attention toutefois, cela n’est pas exhaustif et Google continue de modifier tout cela. Rien n’est définitif. Il est donc difficile de déterminer avec précision ce qui va réellement booster vos performances. Google nous donne simplement un aperçu de ce qui nuit à l’expérience utilisateur.

 

Core Web Vitals : 5 actions à mettre en place par vous ou votre développeur

 

Cela fait des années que l’on parle de l’importance de la vitesse de chargement des pages web d’un site et de l’expérience utilisateur. Même s’il existe de nombreuses informations sur la façon d’optimiser votre site, il est souvent difficile de mettre ces connaissances en pratique. Ces derniers mois, Google a une fois de plus mis la vitesse de chargement au premier plan. Pour vous aider, le moteur de recherche a mis au point des outils donnant des indications quant aux optimisations à réaliser.

Très peu de choses ont vraiment changé. Tout se résume à faire parvenir le contenu principal de votre site à vos utilisateurs le plus rapidement possible. Faites le test vous-même, essayez de voir comment votre site fonctionne du coté des utilisateurs.

Essayez de classer les corrections à réaliser par ordre de priorité et commencez ! Ci-dessous, découvrez plusieurs façon d’optimiser vos Core Web Vitals. Des actions que vous allez pouvoir mettre en place vous-même ou demander à votre développeur.

 

1. Optimisez vos images


Voilà un vieux truc en or : l’optimisation des images. L’une des choses les plus importantes que vous puissiez faire pour votre site est d’optimiser correctement vos images. Oui, cela a été dit des millions de fois, mais faites-le. Une seule grosse image non optimisée sur votre page d’accueil ou votre landing page pourrait vous faire énormément de tort. Les grandes images ont un fort impact sur le temps de chargement de votre site. Assurez-vous d’accueillir correctement vos visiteurs en faisant en sorte que ce chargement soit rapide.

Assurez-vous que vos images soient proposées dans la bonne taille aux internautes et pensez à les compresser. Il existe de nombreux outils pour vous aider dans cette tâche. Il n’est pas nécessaire d’avoir une grosse résolution pour que l’image soit nette sur les écrans les plus couramment utilisés par les internautes.

Votre CMS est également un outil qui vous aidera à améliorer le chargement de vos images. Prévue pour Août, la mise à jour WordPress 5.5 ne chargera que les images qui apparaissent à l’écran et laissera le reste charger lorsque l’utilisateur interagira avec le contenu. De ce fait, cela indiquera au navigateur de ne charger les « grandes » images que lorsque c’est nécessaire (et donc lorsque l’internaute souhaite poursuivre sa navigation ou réaliser une action).

 

2. Stabilisez le chargement de vos pages en spécifiant l’espace pour les images


Un des facteurs utilisé par Google afin de juger si vous proposez une expérience client agréable est le CLS. Ce score mesure si la disposition des éléments de votre page bouge lors de la consultation d’un contenu sur votre site par un internaute. Il n’y a rien de plus frustrant que de vouloir cliquer à un endroit et de ne pas y a arriver car la mise en page »saute��».

Le fait que la mise en page saute est causé par des images sans dimensions dans le CSS. Cela peut également être causé par des publicités sans dimension, ou par du contenu injecté dynamiquement. Lorsqu’ils ne sont pas correctement dimensionnés, ces éléments ont tendance à sauter un peu pendant le processus de chargement, ce qui leur donne un aspect saccadé et instable.

L’un des moyens permettant d’améliorer les Core Web Vitals consiste à ajouter la largeur et la hauteur des images dans le CSS. De cette façon, le navigateur réservera de l’espace pour cette image qui apparaîtra probablement plus tard que le texte. Toutefois, le contenu ne « sautera » plus car le navigateur saura qu’un élément de telle taille doit apparaître à cet endroit.

De ce fait, assurez-vous simplement que vos images ont les attributs de largeur et de hauteur appropriés.

Si vous souhaitez intégrer des espaces publicitaires, faites la même chose. Dans le CSS indiquez des dimensions adéquates.

 

3. Boostez votre serveur pour réduire le temps de chargement


Plus vite votre serveur répond aux demandes, mieux c’est. Le fait que le serveur réponde plus rapidement impacte directement vos Core Web Vitals.

L’optimisation de votre serveur se décompose en plusieurs parties. Tout d’abord, mettez à niveau votre plan d’hébergement. Ne lésinez pas sur l’hébergement. Choisissez un hébergement qui offre de bonnes performances à un prix raisonnable. Ensuite, il y a la question de savoir comment le serveur a été configuré. Utilisez une version récente de PHP. Enfin, il y a la question du matériel que vous avez choisi. Celui-ci doit tout de même être assez récent et entretenu.

Vous devez également faire des recherches sur le fonctionnement de vos bases de données et voir si vous pouvez apporter des améliorations. Utilisez des outils comme le plugin Query Monitor WordPress pour continuer à analyser les requêtes sur votre site.

Enfin demandez à votre développeur d’examiner comment votre serveur pousse les fichiers vers les clients. Il existe plusieurs façons d’améliorer ce processus. Ce sont des solutions plus avancées qui vous permettent d’affiner la façon dont votre serveur répond aux demandes.

 

4. Examinez le code CSS pour charger plus rapidement le contenu


Lorsque le navigateur charge une page, il doit obtenir le HTML, le charger, le CSS, le charger, le JavaScript, le charger, etc. Plus vous avez besoin de fichiers pour charger votre site et plus ceux-ci sont volumineux, plus le chargement de votre site sera lent.

Comme le CSS se charge tardivement, il faut souvent un certain temps avant qu’un élément n’apparaisse à l’écran. En prenant les éléments critiques de votre conception dans le fichier CSS principal et en les insérant dans votre code, vous pouvez faire apparaître plus rapidement votre contenu.

Vous pouvez utiliser des plugins de mise en cache WordPress comme WP Rocket. WP Rocket dispose d’un simple bouton qui, lorsqu’il est activé permet d’éliminer les CSS qui bloquent le rendu et d’améliorer le chargement de votre site.

 

5. Améliorez le chargement des scripts tiers


Pour de nombreux sites, la lenteur vient aussi de l’extérieur. Si votre site repose sur des scripts publicitaires, par exemple, vos performances sont fondamentalement entre les mains du fournisseur de publicité. Vous ne pouvez qu’espérer que ses annonces soient performantes. Si leurs annonces se chargent très lentement, il est peut-être temps de trouver un autre fournisseur.

Si vous constatez que des scripts tiers ralentissent votre site, vous devriez vous pencher sur la question. Demandez-vous si vous avez vraiment besoin de cette annonce en particulier. Quelle est la valeur de ces scripts ? Il existe peut-être une autre option, un peu plus optimisée et moins stressante pour votre serveur. Essayez donc cela.

Si c’est possible, vous pouvez essayer d’héberger le script vous-même. De cette façon, vous maîtrisez un peu mieux le processus de chargement. Si vous ne pouvez pas le faire, essayez de le précharger plus rapidement.

Au moins, assurez-vous de charger les scripts de manière asynchrone ou de reporter cela au dernier moment. De cette façon, le navigateur peut construire la page avant d’obtenir et d’exécuter le script externe. Utilisez l’asynchronisation si le script que vous chargez est important, comme un script d’analyse. Vous pouvez utiliser le report de chargement pour les ressources moins critiques.

 

Optimiser les Core Web Vitals : toutes les petites améliorations comptent


Google a une fois de plus mis la vitesse du site et l’expérience utilisateur au premier plan. Nous avons toujours envisagé le référencement de manière holistique. Or, il y a de nombreux éléments que vous pouvez travailler un par un afin de construire le meilleur site possible. Bien que les conseils mentionnés ci-dessus puissent vous aider à améliorer vos « Core Web Vitals », vous devriez toujours tout faire pour offrir à vos visiteurs une meilleure expérience.

 

Pensez à réaliser un audit SEO de votre site Web afin de repérer les potentielles améliorations à réaliser au regard des scores – Core Web Vitals – mis en place par Google.

Laisser un commentaire