Dans un épisode récent De la recherche de Google hors du podcast d’enregistrement, Martin Splitt et John Mueller ont discuté lorsque le chargement paresseux aide et quand il peut ralentir les pages.
Splitt a utilisé un exemple du monde réel sur Developers.google.com pour illustrer un modèle commun: rendre chaque image paresseuse par défaut peut retarder la plus grande peinture de contenu (LCP) s’il inclut des visuels ci-dessus.
Split a dit:
«Le système de gestion de contenu que nous utilisons pour les développeurs.google.com… par défaut toutes les images à un chargement paresseux, ce qui n’est pas génial.»
Splitt a utilisé l’exemple pour expliquer pourquoi les images de héros à chargement paresseux sont risquées: vous dites au navigateur d’attendre sur l’élément le plus visible, ce qui peut repousser LCP et provoquer des changements de mise en page si les dimensions ne sont pas définies.
Split a dit:
« Si vous utilisez un chargement paresseux sur une image qui est immédiatement visible, cela aura probablement un impact sur votre plus grosse peinture de contenu. C’est comme presque garanti. »
Comment le chargement paresseux retarde LCP
LCP mesure le moment où le plus grand texte ou l’image de la fenêtre initiale est peint.
Normalement, le scanner de précharge du navigateur trouve cette image de héros tôt et le récupére avec une grande priorité afin qu’il puisse peindre rapidement.
Lorsque vous ajoutez loading="lazy" À ce même héros, vous modifiez la planification du navigateur:
- L’image est traitée comme une priorité inférieure, donc d’autres ressources commencent en premier.
- Le navigateur attend jusqu’à la mise en page et d’autres progrès du travail avant qu’il ne demande l’image du héros.
- Le héros concourt ensuite la bande passante après que les scripts, les styles et autres actifs aient déjà fait la queue.
Ce retard change le temps de peinture du plus grand élément plus tard, ce qui augmente votre LCP.
Sur les réseaux lents ou les appareils limités au processeur, l’effet est plus visible. Si la largeur et la hauteur sont manquantes, l’image tardive peut également pousser la disposition et se sentir «choquante».
Risque de référencement avec certaines bibliothèques
Les navigateurs prennent désormais en charge un loading Attribut pour les images et les iframes, qui supprime le besoin de JavaScript lourd dans les scénarios standard. WordPress a adopté le chargement paresseux natif par défaut, l’aidant à se propager.
Split a dit:
« Les navigateurs ont obtenu un attribut natif pour les images et les iframes, l’attribut de chargement… ce qui fait que le navigateur s’occupe du chargement paresseux pour vous. »
Les bibliothèques de chargement paresseux plus anciennes ou personnalisées peuvent masquer les URL de l’image dans les attributs non standard. Si la véritable URL n’atterrit jamais src ou srcset Dans le HTML Google rende, les images peuvent ne pas être récupérées pour l’indexation.
Split a dit:
« Nous avons vu plusieurs bibliothèques de chargement paresseuses … qui utilisent une sorte d’attribut de source de données plutôt que de l’attribut source … si ce n’est pas dans l’attribut source, nous ne le ramasserons pas s’il est dans un attribut personnalisé. »
Comment vérifier vos pages
Utilisez l’inspection de l’URL de la console de recherche pour examiner le Html rendu et confirmer que les images ci-dessus et les modules chargés de paresseux résolvent aux attributs standard. Évitez de compter sur la capture d’écran.
Splitt a conseillé:
« Si le HTML rendu semble contenir toutes les URL de l’image dans l’attribut source d’une balise d’image… alors tout ira bien. »
Impact de classement
Les effets de classement encadrés divisés comme modestes. Les vitaux du Web de base contribuent au classement, mais il l’a qualifié de «facteur minuscule dans la plupart des cas».
Ce que tu devrais faire ensuite
- Gardez le héros et d’autres images ci-dessus désireuses avec une largeur et un ensemble de hauteur.
- Utiliser Native
loading="lazy"pour les images et les iframes inférieurs. - Si vous comptez sur une bibliothèque pour les aperçus, les vidéos ou les sections dynamiques, assurez-vous que le balisage final expose les URL réelles dans les attributs standard et confirmez dans le HTML rendu.
En avant
Le chargement paresseux est utile lorsqu’il est appliqué sélectivement. Traitez-le comme un opt-in pour un contenu non critique.
Vérifiez votre implémentation avec HTML rendu et regardez comment vos tendances LCP au fil du temps.
Image en vedette: Capture d’écran de YouTube.com/googlesearchCentral, août 2025.
Commentaires