Pourquoi les images de mon site chargent-elles lentement ?

Commencez par une page lente

Ouvrez la page publiée sur téléphone et ordinateur. Repérez l’image qui apparaît tard, vérifiez si toute la page est lente et si le texte se déplace à l’arrivée des images.

1. Notez l’adresse de la page et l’image concernée.
2. Lancez un test dans PageSpeed Insights et conservez les observations concernant les images.
3. Si quelqu’un d’autre gère votre site, transmettez-lui l’adresse et le rapport. Demandez de vérifier cette image avant de modifier toute la bibliothèque.

Les sections suivantes vous aident à choisir la prochaine vérification. Pour une analyse plus précise, le panneau Network du navigateur montre les fichiers téléchargés par la page et la durée de chaque requête.

Relier le symptôme au contrôle suivant

Facultatif : examiner l’image dans le panneau Network

Sur ordinateur, ouvrez la page dans Chrome. Ouvrez les outils de développement avec Ctrl + Maj + J sous Windows ou Linux, ou Commande + Option + J sur Mac. Sélectionnez l’onglet Network, puis suivez ces étapes :

1. Sélectionnez le filtre d’images Img.
2. Activez Disable cache et rechargez la page en gardant le panneau ouvert. Vous examinez ainsi un nouveau téléchargement plutôt qu’une copie enregistrée par le navigateur.
3. Sélectionnez la requête de l’image concernée. Vérifiez l’aperçu pour confirmer qu’il s’agit de la bonne image.
4. Notez l’adresse de l’image et le poids du fichier.
5. Ouvrez Timing pour voir où la requête passe du temps, puis Initiator pour savoir ce qui l’a déclenchée.

Ce réglage du navigateur ne vide pas le cache du serveur du site ou du CDN. Un CDN distribue les fichiers d’un site depuis plusieurs serveurs et peut conserver ses propres copies.

Si la requête démarre tard, cherchez son déclencheur dans le HTML, un script ou le chargement différé. Si elle démarre tôt mais attend la réponse, comparez une autre image et le document HTML. Si le fichier arrive vite sans s’afficher, examinez CSS, animations et JavaScript. Corrigez la phase où le temps est réellement perdu.

Timing montre où la requête passe du temps, par exemple en attente du serveur ou en téléchargement. Initiator indique ce qui l’a déclenchée, comme le HTML ou un script. Cela distingue un fichier lourd d’un démarrage tardif.

documentation Network de Chrome

Dans Timing, distinguez Queueing ou Stalled, Waiting for server response (TTFB) et Content Download. Le temps avant l’envoi peut venir de l’ordonnancement du navigateur ou de l’établissement de la connexion ; ce n’est pas uniquement du traitement serveur. Le TTFB comprend aussi le trajet réseau : une attente longue ne prouve donc pas un défaut d’hébergement. Un téléchargement long invite à examiner le volume transféré et la vitesse de connexion. Comparez plusieurs requêtes dans les mêmes conditions.

Réduire les fichiers inutilement lourds

Si une petite carte télécharge une énorme photo, commencez par les dimensions. Créez une copie proportionnelle avec le redimensionneur, puis comparez WebP ou AVIF si votre système les prend en charge. Le guide des formats aide à choisir.

Regardez tout l’écran initial : des dizaines de petites vignettes simultanées peuvent transférer trop de données. Décidez lesquelles sont nécessaires immédiatement et lesquelles peuvent attendre que le visiteur s’en approche.

Corriger les délais plutôt que le poids

Vérifiez que le chargement différé ne retarde pas l’image principale. Si elle attend une animation ou un script, examinez la séquence avec votre développeur. Le guide LCP de Google distingue chargement et rendu.

Comparez plusieurs requêtes avant d’accuser le format. Si HTML et autres ressources attendent aussi, vérifiez hébergement et distribution. Réexporter dix fois ne corrigera probablement pas l’attente précédant la réponse du serveur.

Retester dans les mêmes conditions

Une nouvelle visite peut profiter du cache. Notez chargement neuf ou en cache et gardez appareil et réseau constants. Examinez un écran étroit : il peut révéler une variante mobile manquante.

1. Notez une URL lente et la requête d’image concernée.
2. Modifiez le fichier ou son chargement.
3. Vérifiez que la nouvelle version est servie.
4. Répétez la mesure et contrôlez la qualité visuelle.

Examinez l’ouverture d’une galerie dans son ensemble : image principale et vingt miniatures peuvent nécessiter des règles différentes. Priorisez le visible et différez si nécessaire le reste. Parcourez ensuite toute la galerie et revenez en arrière pour vérifier que les images apparaissent à temps, sans espaces vides.