Aller au contenu

Comment extraire les images sans attributs width et height avec Screaming Frog ?

Antoine Brisset
Antoine Brisset
Temps de lecture : 2 min
Comment extraire les images sans attributs width et height avec Screaming Frog ?
Photo by Jonas Dücker / Unsplash

Table des matières

Aujourd'hui, je vais te partager une petite astuce qui, je l'espère, te fera gagner du temps lors de tes audits webperf.

En matière de vitesse de chargement, l'optimisation des images est souvent un des premiers chantiers à mettre en place : compression, lazyloading, images adaptatives (en fonction de la taille d'écran du visiteur), etc.

Un élément important à contrôler également est le setting des attributs width et height.

En effet, si la largeur (width) ou la hauteur (height) d'une image n'est pas définie, alors le navigateur n'a aucune idée de l'espace qu'il doit allouer à cet élément lors du chargement de la page, ce qui peut dégrader le CLS (Cumulative Layout Shift), l'un des 3 indicateurs des Core Web Vitals.

Cela fait d'ailleurs partie des points de contrôle de l'outil Lighthouse.

Warning concernant width et height

OK. Du coup, comment faire pour extraire, sur un site, l'ensemble des images qui n'ont pas d'attributs width et/ou height définis ?

Et bien, comme tu l'as deviné à la lecture du titre, en utilisant Screaming Frog !

Si tu es familier de l'outil, tu vas sûrement me dire : euh... ouais facile, suffit de brancher Screaming Frog à l'API PageSpeed Insights et le tour est joué !

Alors oui... mais non.

Oui, il est possible d'obtenir ce résultat en connectant Screaming Frog à l'API PageSpeed Insights. Une fois le crawl terminé, le rapport sera disponible dans PageSpeed > Image Elements Do Not Have Explicit Width & Height.

Problème : c'est (beaucoup) trop lent.

En effet, il faut attendre la récupération des résultats de l'API pour chaque URL crawlée. Sur des milliers d'URLs, cela représente un coût non négligeable.

Bref, si tu as besoin d'une analyse rapide, ce n'est clairement pas adapté.

Pour aller plus vite, il faudrait plutôt être en mesure de récupérer les résultats lors du crawl, en une seule passe.

On va donc faire différemment et utiliser la fonctionnalité "Custom Extraction", par le biais d'une requête XPath.

La voici :

//img[not(@src=preceding::img/@src) and (not(@width) or not(@height))]

L'idée ici, c'est de trouver toutes les images concernées par le problème d'attribut(s) manquant(s), en prenant soin de les dédoublonner.

Explications :

  • //img : je cherche dans la page toutes les images
  • not(@src=preceding::img/@src) : dont l'attribut src n'est pas égal à celui d'une image déjà rencontrée dans un noeud précédent (c'est ici que je filtre les doublons)
  • and (not(@width) or not(@height)) : et, c'est le principal, qui n'ont pas d'attribut width ou d'attribut height

Dans Screaming Frog, rends-toi dans le menu Configuration > Custom > Extraction.

Clique sur Add.

Donne un nom à ton extraction (exemple Missing width/height attributes).

Sélectionne "XPath" puis colle la requête affichée plus haut.

Choisis "Extract HTML element" puis valide.

Une fois le crawl lancé, les balises <img> sans largeur ou sans hauteur s'afficheront dans l'onglet "Custom Extraction".

Démo Screaming Frog

Et voilà !

Screaming Frog

Antoine Brisset Twitter

Consultant SEO depuis 2010. Je traque les clics inutiles et automatise les tâches répétitives pour gagner du temps dans mon quotidien de travailleur du web.

Commentaires


Articles Similaires

Membres Public

Comment identifier des mentions sans lien avec Screaming Frog ?

Aujourd'hui, j'aimerais te partager une petite astuce pour identifier facilement les mentions sans lien avec Screaming Frog. La recherche de ces "unbranded brand mentions" figure parmi les premiers quick wins à aller chercher en matière de netlinking. C'est plutôt adapté aux sites ayant déjà une certaine notoriété, c'est vrai, mais

Comment identifier des mentions sans lien avec Screaming Frog ?
Membres Public

Comment enrichir le rapport liens externes de la Search Console avec Screaming Frog ?

La Search Console est vraiment un super outil. Pourtant, certains rapports sont à mon sens peu exploités. C'est le cas notamment de celui sur les liens externes (Liens > Exporter les liens externes > Liens les plus récents). Alors, c'est vrai, il a plusieurs inconvénients : * il est long à se mettre à

Comment enrichir le rapport liens externes de la Search Console avec Screaming Frog ?
Membres Public

Comment détecter les liens multiples avec Screaming Frog ?

Si tu t'intéresses de près au SEO, tu dois savoir qu'une des recommandations en matière de maillage interne est d'éviter, sur une page, de faire plusieurs liens vers la même page cible. D'après les derniers tests de la communauté SEO (je n'ai pas testé de mon côté), il semblerait que,

Comment détecter les liens multiples avec Screaming Frog ?