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 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 ?
Membres Public

Comment récupérer les URLs d'un sitemap XML avec Screaming Frog (sans les crawler) ?

Il y a quelques semaines, j'ai découvert dans cet article une astuce toute bête mais très pratique pour extraire les URLs d'un sitemap XML avec Screaming Frog. L'idée c'est d'utiliser le mode liste de Screaming Frog de la façon suivante : * cliquer sur Download XML Sitemap * coller l'URL du sitemap * lancer

Comment récupérer les URLs d'un sitemap XML avec Screaming Frog (sans les crawler) ?
Membres Public

Comment sauvegarder ses extractions personnalisées (XPath, regex) dans Screaming Frog ?

Le tips du jour fait suite à une question très intéressante que m'a posée Christophe aka @stonetatara au sujet de Screaming Frog. La question est la suivante : est-il possible d'enregistrer une collection de requêtes XPath dans une librairie permanente, de manière à pouvoir les réutiliser à chaque crawl, peu importe

Comment sauvegarder ses extractions personnalisées (XPath, regex) dans Screaming Frog ?