Trouvez les images qui bloquent le premier rendu

Les responsables performance et SEO s’en servent quand le premier affichage tarde et que certaines images semblent en être la cause.

Trouvez les images qui bloquent le premier rendu. Vous obtenez une base claire à utiliser aussitôt, directement dans votre navigateur.

Mode d’emploi

  1. Collez le code HTML de la page à auditer.
  2. Lancez l’audit pour repérer les images présentes dès le premier rendu.
  3. Examinez la liste des images qui ne devraient pas être chargées immédiatement.
  4. Ajoutez un chargement différé aux images situées hors de l’écran initial.

Exemple

Un responsable SEO constate que la page d’accueil met du temps à afficher son contenu. Il colle le code HTML, lance l’audit et repère les images de bas de page chargées trop tôt. Il les passe ensuite en chargement différé avant de retester. Il vérifie aussi que l’image principale reste prioritaire pour ne pas dégrader l’affichage initial.

Entrée

<img src="hero.jpg" alt="Hero">
<img src="icon.png" alt="Icon">

Résultat

2 balise(s) img ou iframe

Avec loading="lazy"  : 0
Sans                 : 2 — n° 1, 2
En eager explicite   : 0
Sans width ET height : 2 — n° 1, 2
Images sans alt      : 0

Les DEUX premieres images visibles ne doivent PAS etre en lazy : le navigateur retarderait ce que l utilisateur voit en premier. Toutes les suivantes, si. Une balise sans width ni height fait sauter la mise en page pendant le chargement, lazy ou pas.

Limites et formats

Où le traitement a lieu

Le code HTML collé est analysé dans votre navigateur. Aucune requête n’est faite vers l’extérieur et la page auditée n’est pas visitée par le service. Le rapport reste local jusqu’à ce que vous quittiez la page.

Questions fréquentes

L’outil visite-t-il mon site ?

Non, il ne charge pas votre page depuis une adresse. Vous devez coller le HTML vous-même. L’audit se limite donc au balisage que vous fournissez, sans exécuter les scripts de la page.

Quelles images faut-il charger en différé ?

Concentrez-vous sur les images qui se trouvent plus bas dans la page et qui ne sont pas nécessaires au premier affichage. Les images de l’en-tête ou du produit principal doivent souvent rester immédiates. Testez le résultat sur un écran réel.

Pourquoi une image manque-t-elle dans le rapport ?

Elle peut être ajoutée par JavaScript, placée en arrière-plan CSS ou chargée par un composant tiers. L’audit ne voit que le HTML collé. Complétez l’analyse avec les outils de votre navigateur si besoin.

Outils de la même catégorie