Table des matières de l'article :
Concernant l'importance de L'expérience utilisateur et les nouveaux critères et métriques d'évaluation de Google appelé Google Vitaux Web de base nous en avons beaucoup parlé.
Nous avons également parlé de l'importance de fournir des valeurs bonnes et valides au véritable utilisateur final et ne trompez pas le test Pagespeed de Google.
Aujourd'hui, nous avons eu la vraie confirmation d'un modus operandi hautement délétère et négatif, qui cause des dommages à ceux qui l'utilisent pour tromper Google et obtenir un meilleur score PageSpeed , ou du moins meilleur des tests LABS.
Nous voulions écrire un article pour démontrer une fois de plus comment ne pas connaître un sujet ne peut que vous nuire.
Le cas spécifique à examiner et le score PageSpeed.
Tout est parti du commentaire d'une personne sur Facebook à propos de son site Recettes qui a toujours eu du mal à décoller. Nous avons déjà dit dans d'autres articles que nous gérons de grandes marques et des sites de recettes de cuisine avec plus de 60 millions de pages vues par mois et donc gérant trois des six premiers sites en Italie, nous nous permettons de dire que nous savons peut-être quelque chose.
L'interlocuteur est informé que son site ne prend en charge la compression Brotli, une fonctionnalité très productive de nos jours, de la même manière qu'elle ne prend pas en charge BBR TCP très important pour les connexions 3G lentes ou même 4G avec une perte de paquets élevée et une latence élevée.
De son côté, on reçoit une réponse plutôt égocentrique et discutable, précisant que son site est une fusée sol-air et qu'elle est même supérieure à Giallo Zafferano.
Concentrons donc notre attention sur le rapport de test PSI PageSpeed Insight nous laissant à première vue plutôt abasourdi car en fait, il a toutes les valeurs optimales et dépasse toutes les métriques Google PageSpeed Insight.
Bref, selon le propriétaire nous sommes face à un site qui dépasse les valeurs de Giallo Zafferano, mais Giallo Zafferano fait plusieurs dizaines de millions de visiteurs par mois, et ce site peut-être quelques milliers, si peu de visites qu'il est même pas estimé par des services comme SimilarWeb Sites.
Nous commençons à voir ces valeurs en détail et nous sommes confrontés à un usage/abus de l'utilisation de la propriété CSS background-image
En fait, ce site ne charge pas les images en HTML en utilisant la balise img mais en utilisant un div avec la propriété background-images qui charge l'image en arrière-plan.
Et ici commencent les douleurs et les critiques sévères non pas tant du propriétaire du site, animé par les meilleures intentions, mais des dangers encourus en essayant à tout prix d'obtenir un score PageSpeed élevé dans la zone verte et donc supérieur à 90. , sacrifiant des caractéristiques et fonctionnalités importantes qui impactent irrémédiablement dans ce cas sur le référencement et le positionnement.
IMG vs Background-image voyons la différence entre les deux.
Il va de soi que l'énorme erreur qui a été commise dans ce cas est de sacrifier l'utilisation de la balise HTML img pour la remplacer par l'image d'arrière-plan non bloquante qui a été créée à d'autres fins et avec des fonctionnalités et des avantages et inconvénients relatifs , certainement pas adapté à l'usage qui en a été fait sur un blog de recettes en ligne qui vise à se positionner et à être recherché sur les moteurs de recherche.
Définition de la balise HTML IMG
La balise img di HTML il est utilisé pour inclure des images dans une page Web. Cette balise nécessite deux attributs obligatoires : src e alt.
La balise <img> est utilisé pour intégrer une image dans une page HTML.
Les images ne sont pas techniquement insérées dans une page Web ; les images sont liées à des pages Web. La balise <img> crée un espace de maintien pour l'image de référence.
La balise <img> possède deux attributs obligatoires :
- src - Spécifie le chemin vers l'image
- alt - Spécifie le texte alt pour l'image, si l'image pour une raison quelconque ne peut pas être affichée
Observation: aussi, spécifiez toujours la largeur et la hauteur d'une image. Si la largeur et la hauteur ne sont pas spécifiées, la page peut scintiller lors du chargement de l'image.
Définition de la propriété CSS background-image
La propriété background-image définir une ou plusieurs images d'arrière-plan pour un élément.
Par défaut, une image d'arrière-plan est placée dans le coin supérieur gauche d'un élément et répétée à la fois verticalement et horizontalement.
Google n'indexe pas les images déclarées et téléchargées via background.image
John Mueller de Google a déclaré dans un hangout de webmaster que la recherche d'images de Google n'indexe pas et ne classe pas les images à partir du code d'arrière-plan CSS. Il a déclaré que si vous souhaitez que vos images soient classées dans la recherche d'images de Google, il est préférable d'utiliser la balise d'image normale avec l'attribut source pointant vers l'image.
La référence est publique depuis 2018 et peut être visionnée à 20h55 de la vidéo ci-dessous.
Si vous préférez accéder à une documentation alternative fiable vous pouvez comprendre la même chose en lisant les mêmes notions à cette URL : https://www.seroundtable.com/google-image-search-css-25068.html
Utilisez une balise img. C'est mieux pour diverses raisons.
Quand utiliser
- Quand ton image doit être indexé par le moteur de recherche
- S'il a un rapport avec le contenu, pas avec le design.
- Si votre image n'est pas trop petite (images non iconiques).
- Photos où vous pouvez ajouter
altetitleattribut qui ont des implications SEO très positives.
Quand utiliser le CSS d'image d'arrière-plan
- Images utilisées exclusivement pour la conception.
- Aucun rapport avec le contenu et qui n'ont pas besoin d'être indexés.
- Petites images que nous pouvons charger avec CSS3.
- Images répétées (dans l'icône de l'auteur du blog, l'icône de la date sera répétée pour chaque article, etc.).
- Images dont l'indexation côté SEO n'est pas attendue.
Sur la base de la liste ci-dessus et de certaines observations, nous avons ces raisons d'utiliser un imgtag:
- Une image de logo a une signification sémantique et a une relation avec le contenu. C'est donc la bonne chose à faire d'un point de vue sémantique.
- Google n'indexe pas automatiquement les images d'arrière-plansinon, les résultats de la recherche d'images seraient remplis de sprites d'image. Google n'a pas officiellement publié de déclaration à ce sujet, mais cela ajoutera très probablement plus de valeur à la div avec une étiquette aérienne, bien qu'une image ait très probablement encore plus de valeur. (Bing ne fait probablement rien avec cela cependant)
Donc : très probablement, il est préférable d'utiliser un imgÉtiquette
Si quelqu'un pense que l'accès à la documentation et aux références de 2018 est erroné et trompeur, rappelez-vous que John Muller est récemment revenu sur le sujet dans ce Tweet du 14 avril 2021 avec une réponse très claire qui laisse peu de place à l'interprétation.
Que pouvons-nous apprendre de cette expérience ?
Cette expérience nous aide à comprendre comment l'objectif d'avoir un site web rapide et performant nous a mis en position de perdre de vue quels sont les fondamentaux du SEO par exemple.
Nous avons toujours décrit notre travail (celui d'ingénieurs système rapides et performants pour l'Hébergement) comme celui d'un excellent rouage parmi de nombreux engrenages qui constituent le cœur battant d'un projet éditorial réussi.
Chaque département et chaque branche du projet et les différents départements doivent pouvoir s'exprimer au mieux sans invalider le travail des autres départements et sans renoncer aux compromis en gérant les priorités dues.
Dans ce cas précis nous avons vu à quel point il est contre-productif et peu logique pour atteindre des objectifs commerciaux, de sacrifier le référencement et la fonctionnalité offerte par la balise html, uniquement dans le but d'avoir un site qui passe brillamment un test PageSpeed Insight en trichant sur le type d'élément choisi pour le téléchargement d'image.
La vitesse de page est très importante, mais le référencement est plus.
Soyez toujours scrupuleux dans l'évaluation du pour et du contre de toute modification que vous apportez à votre site, en veillant avant tout à en comprendre les véritables raisons et les effets secondaires qui pourraient survenir même irrémédiablement.
