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.


Articles Similaires

Membres Public

Comment faire une analyse rapide du maillage interne d'une page avec Screaming Frog ?

La semaine dernière, en lisant la newsletter de Soumettre, je suis tombé sur cet excellent article de Cyrus Shepard sur les ancres de liens. L'auteur y dévoile les résultats de plusieurs tests qu'il a menés pour déterminer quelles sont les ancres de liens prises en compte par Google quand une

Comment faire une analyse rapide du maillage interne d'une page avec Screaming Frog ?
Membres Public

Vérification du contenu dupliqué avec Screaming Frog : attention au contenu "boilerplate"

La semaine derrière, j'ai suivi quelques unes des conférences de la SEO Garden Party organisée par Linksgarden. J'ai notamment écouté avec beaucoup d'attention l'intervention de Sylvain Peyronnet sur le sujet de l'audit algorithmique. Sylvain a évoqué la question de la duplication interne et a expliqué pourquoi il était judicieux de

Vérification du contenu dupliqué avec Screaming Frog : attention au contenu "boilerplate"
Membres Public

Comment identifier les ancres de liens génériques avec Screaming Frog ?

Screaming Frog dispose, depuis la version 17.0, d'une fonctionnalité permettant d'identifier les liens internes utilisant des ancres génériques, aka non-descriptive anchor text. Plutôt cool pour corriger/améliorer son maillage interne. Le hic, c'est que par défaut, les ancres de liens définies comme "non descriptives" sont en anglais. Tu peux

Comment identifier les ancres de liens génériques avec Screaming Frog ?