Il est facile de trouver tout un tas de conseils pour améliorer le SEO de votre blog ou de votre site en effectuant une simple recherche sur internet. Certains d’entre eux sont aisément applicable (utiliser des URL courtes, spécifier l’attribut « alt » pour les images, …) et d’autres demandes plus de temps et/ou de compétences (format et compression des images, balises « meta », …).
Les astuces de référencement auxquelles nous allons nous intéresser peuvent nécessiter quelques connaissances de CSS et de HTML. Il s’adresse donc plus aux développeurs qu’aux rédacteurs (ou personnes en charge de rédiger le contenu des articles).
Plusieurs astuces que nous allons voir ici nécessitent un passage par un outil d’analyse de pages web comme PageSpeed Insights de Google. Je vous conseille donc de choisir un blog (ou de prendre le vôtre si vous en avez un) et de commencer par passer la page qui vous intéresse dans l’analyseur. Pour cela, saisissez l’URL dans le champ prévu à cet effet, puis cliquez sur « Analyser ».
1. Visibilité du texte pendant le chargement des polices
Lorsque vous passez la page qui vous intéresse dans PageSpeed Insights, un problème qui ressort très régulièrement est celui de la visibilité du texte pendant le chargement des polices sur le site. Il se présente de cette façon :
En effet, lorsque votre page web charge, le texte ne s’affichera que lorsque la police d’écriture qu’utilise ce texte sera entièrement chargée.
Pour résoudre ce problème, vous devez préciser dans la feuille de style qui charge la police qu’il faut utiliser une police « système » (Arial, Tahoma, Times New Roman, …) en attendant que la véritable police soit chargée.
Si vous avez accès au CSS, il vous suffira d’ajouter cette ligne dans l’instruction @font-face que vous utilisez pour ajouter une police d’écriture :
font-display: swap;Si vous chargez une police d’écriture depuis Google Fonts, ajoutez simplement « &display=swap» à la fin de l’attribut « href ».
<link href="https://fonts.googleapis.com/css?family=Roboto:400&display=swap" rel="stylesheet">
2. Limiter les charges utiles de réseau
Afin de favoriser la vitesse de chargement des pages et de diminuer la charge sur le serveur où est hébergé votre site, il faut, dans la mesure du possible, charger un minimum de ressources.
Voici quelques techniques que vous pouvez utiliser :
– Réduire la taille des images au stricte nécessaire
Évitez de charger une image de 1920px si vous l’affichez en 800x600px. Assurez-vous que la compression soit adaptée et que son poids soit acceptable. Préférez le format .jpg au .png si vous n’avez pas besoin de la transparence. Le format WebP offrira un meilleur rapport qualité/poids, mais il n’est pas encore intégralement supporté par tous les navigateurs à l’heure actuelle. Vous pouvez utiliser Squoosh pour convertir vos images dans ce format. Si vous utilisez WordPress, je vous recommande de lire notre guide ultime des images dans WordPress.
– Limiter le nombre de fichiers JavaScript et CSS et préférer le code minifié
Veillez à limiter le nombre de fichiers chargés en compilant les fichiers CSS et/ou JS ensemble puis en les minifiant (suppression des caractères inutiles à l’interprétation du code par le navigateur, comme les commentaires, les espaces, …). Vous pouvez utiliser des outils comme Gulp si vous souhaitez le faire proprement durant le développement, ou plus simplement des outils en ligne comme Clean CSS. Si vous voulez aller plus loin, utilisez Webpack qui vous aidera à gérer cela très proprement.
– Réduire le contenu gourmand en ressource de la page
Le texte n’est pas vraiment problématique, car c’est une ressource qui reste modeste en termes de poids. Veillez tout de même à rester aux alentours des 2000 mots pour un article de blog, car un article plus long est perçu comme allant plus en profondeur dans le sujet (et donc plus qualitatif) par les moteurs de recherche. Si vous chargez de nombreuses images dans votre page et que votre article est suffisamment long, vous devriez envisager de le répartir en deux pages différentes, ou de faire un second article afin de limiter le contenu à charger par page.
3. Réduire l’impact du code tiers
Votre page web charge peut-être des scripts provenant de services externes permettant de faire fonctionner, par exemple, des boutons de partage sur les réseaux sociaux. Voici quelques exemples :
Toujours dans un souci de performance, il est important de limiter ces codes tiers au maximum. En effet chaque script va augmenter le temps de chargement de votre page ce qui péjore le référencement.
Pour les scripts tiers qui vous sont indispensable, chargez-les avec l’attribut « async » si vous avez besoins du script dès le début du processus d’affichage de la page (par exemple pour Google Analytics).
<script async src=…></script>Pour les ressources moins critiques, utiliser l’attribut « defer ».
<script defer src=…></script>Les deux attributs chargent les scripts de manière asynchrone, mais « async » bloquera l’interprétation du HTML pour exécuter le script, alors que « defer » ne lancera le script qu’une fois l’interprétation terminée.
Conclusion
La plupart des conseils relayés ici ont un rapport avec la vitesse de chargement de votre page. C’est peut-être le paramètre relatif au référencement qui demande le plus de connaissances techniques.
Si Google apprécie les pages qui se chargent rapidement, c’est surtout parce que cela permet de diminuer le taux de rebond (utilisateurs qui quittent le site après quelques secondes), mais aussi d’augmenter le taux de conversion (demande de devis, inscription à une newsletter, vente en ligne, etc.).
Toutefois, n’oubliez pas de mettre la priorité sur les améliorations de base que vous pouvez faire au niveau de votre contenu avant de vous attaquer aux détails que nous avons parcourus ici. Le ratio efforts/résultat sera beaucoup plus avantageux.
Mais si vous vous êtes mis en tête de prendre la première place sur Google sans passer par Google Ads, alors cette démarche pourrait contribuer à atteindre votre ambitieux objectif
Source : Kblog