Boostez vos Core Web Vitals pour améliorer votre référencement naturel grâces à ces conseils
Google & les Core Web Vitals.
En juin 2021, Google a commencé à déployer la mise à jour Core Web Vitals tant attendue. Cela signifie que la vitesse et le temps de chargement des pages de votre site auront un impact encore plus prononcé sur votre classement dans les résultats Google. Alors, comment adapter votre stratégie de référencement à ce changement ? Jetons un coup d’œil à 5 choses que vous pouvez faire pour améliorer votre score !
Nous vous avons listé 5 actions à effectuer dans ce sens pour améliorer la performance de votre site web :
Optimisez vos images
C’est un des points essentiels pour améliorer les performances de votre site internet ! Les images utilisées sur votre site doivent être adaptées pour que votre référencement soit le plus efficace possible.
Ainsi il convient de s’assurer que les images utilisées soient aux dimensions adéquates d’après leur emplacement sur le site, et bien compressées. Par exemple, il ne sert à rien d’utiliser une image de 2000 sur 2000 pixels à côté d’un petit texte ! Un grand nombre d’outils gratuits sont à votre disposition pour optimiser vos images : côté (re)dimensionnement, on pense notamment à Adobe Spark, et côté compression on peut citer tinypng ou encore squoosh.app.
Le format de l’image est également important dans cette quête d’optimisation de vos performances. Des formats récents comme le « WebP » peuvent ainsi vous aider à obtenir des images de haute qualité tout en ayant un poids réduit au possible.
Stabilisez le chargement de vos pages en réservant de l'espace pour les images.
L’un des nouveaux critères à prendre en considération est le « décalage de mise en page cumulatif » (Cumulative layout shift ou CLS en anglais).
Ce décalage est l’une des principales causes de frustration pour les utilisateurs d’un site web, et vous l’avez probablement déjà expérimentée. En effet, ce décalage est par exemple ce qui arrive parfois lorsqu’on ouvre un site sur son téléphone portable : le texte s’affiche, et lorsque l’on s’apprête à cliquer sur un élément, surprise, une image apparaît à sa place ! Il était toujours prévu que cette image soit là, cependant elle a chargée plus lentement que le texte, ce qui donne cette impression de décalage.
La cause du décalage réside dans l’utilisation d’images (ou de publicités, …) dont les dimensions ne sont pas spécifiées dans le CSS. Si ces éléments sont mal dimensionnés, ils auront tendance à rendre le chargement instable, saccadé.
Il convient donc de bien s’assurer que les visuels utilisés sur votre site disposent de proportions appropriées, en veillant par exemple à ce que les attributs de hauteur et de largeur soient bien spécifiés via CSS.
Accélérez votre serveur pour réduire le temps de chargement
Il n’y a pas de secrets pour ce point, plus le serveur répond rapidement aux demandes des utilisateurs, plus votre site est, hé bien, rapide.
L’optimisation d’un serveur peut se faire de plusieurs côtés. Tout d’abord, assurez-vous d’avoir un plan d’hébergement offrant un niveau de performance élevé. Ensuite, dans de rares cas, vous pouvez également mettre à niveau le matériel utilisé (cette option n’est que très rarement possible si vous hébergez votre site via un prestataire externe).
Le fonctionnement des bases de données présentes sur le serveur peut également être optimisé afin de gagner de précieuses secondes. Sur WordPress, certains plugins tel WP-Optimize peuvent vous aider à optimiser vos bases de données.
Examinez les "CSS critiques" (critical CSS) pour charger plus rapidement le contenu
Quand votre navigateur web (Chrome, Firefox, …) charge une page, il doit récupérer le code HTML, le décoder, récupérer le code CSS, le décoder, récupérer le code JavaScript, le décoder, etc. Plus votre page est complexe, plus vous avez de code à récupérer et à décoder (et donc, plus votre page se chargera lentement). Les navigateurs modernes sont très puissants, mais ne peuvent pas toujours tout charger en même temps. Certains éléments doivent se charger dans un ordre spécifique et ralentissent le processus de chargement de la page. C’est parfois le cas de certains éléments CSS.
Pour charger beaucoup plus rapidement ces éléments CSS, il est possible l’incorporer directement dans le code.
C’est par exemple une des possibilités qu’offre le plugin WP Rocket , qui vous aide à optimiser la manière dont vos éléments CSS sont chargés et qui contribue ainsi à optimiser le temps de chargement des pages de votre site internet. Attention cependant, il arrive parfois que cela ‘casse’ la page. Il est donc important de tester plusieurs configurations et de vérifier à chaque fois si vos pages sont OK.
Quasiment tous les sites modernes incluent des éléments externes, que le site va ‘chercher’ ailleurs. Par exemple une police d’écriture Google Font, ou encore des éléments de tracking Google Analytics ou tout simplement des intégrations de posts Facebook, Instagram, etc.
Lorsque c’est le cas, la vitesse de votre site sera dépendante de la façon dont ces éléments externes sont codés. S’ils sont ‘mal’ codés, cela va ralentir votre site, mais vous ne pourrez rien y faire car n’avez aucun contrôle sur ce code externe.
Lorsque cela arrive, vous n’avez pas d’autre choix que d’évaluer l’importance de ces scripts externes, et la façon dont ils sont intégrés à votre site : par exemple, ai-je vraiment besoin d’afficher des posts Facebook sur mon site ? Si oui, puis-je le faire d’une façon différente que la façon actuelle qui ralentit mon site ?
Il est parfois possible d’héberger certains scripts externes directement sur son site. De cette façon, vous contrôlez un peu plus le processus de chargement. Pour y arriver, il vous faire un peu de recherche sur votre moteur de recherche préféré pour trouver une solution propre aux scripts qui posent problème (solution qui n’existera pas forcément).
Lorsque ce n’est pas le cas, assurez-vous alors au moins de charger les scripts de manière asynchrone ou de les reporter au dernier moment. De cette façon, le navigateur peut d’abord créer la page avant d’obtenir et d’exécuter le script externe. Sur WordPress, certains plugins offrent cette possibilité, comme par exemple Async Javascript.
Améliorez le chargement des scripts externes
Quasiment tous les sites modernes incluent des éléments externes, que le site va ‘chercher’ ailleurs. Par exemple une police d’écriture Google Font, ou encore des éléments de tracking Google Analytics ou tout simplement des intégrations de posts Facebook, Instagram, etc.
Lorsque c’est le cas, la vitesse de votre site sera dépendante de la façon dont ces éléments externes sont codés. S’ils sont ‘mal’ codés, cela va ralentir votre site, mais vous ne pourrez rien y faire car n’avez aucun contrôle sur ce code externe.
Lorsque cela arrive, vous n’avez pas d’autre choix que d’évaluer l’importance de ces scripts externes, et la façon dont ils sont intégrés à votre site : par exemple, ai-je vraiment besoin d’afficher des posts Facebook sur mon site ? Si oui, puis-je le faire d’une façon différente que la façon actuelle qui ralentit mon site ?
Il est parfois possible d’héberger certains scripts externes directement sur son site. De cette façon, vous contrôlez un peu plus le processus de chargement. Pour y arriver, il vous faire un peu de recherche sur votre moteur de recherche préféré pour trouver une solution propre aux scripts qui posent problème (solution qui n’existera pas forcément).
Lorsque ce n’est pas le cas, assurez-vous alors au moins de charger les scripts de manière asynchrone ou de les reporter au dernier moment. De cette façon, le navigateur peut d’abord créer la page avant d’obtenir et d’exécuter le script externe. Sur WordPress, certains plugins offrent cette possibilité, comme par exemple Async Javascript.