Les images et / ou vidéos qui n’ont pas d’attributs de largeur et de hauteur explicites peuvent entraîner grands changements de mise en page au fur et à mesure que votre page se charge.
Les changements de mise en page peuvent être frustrants pour les visiteurs de votre page, car les éléments peuvent se déplacer, ce qui peut rendre votre page visuellement discordante.
Éviter de grands changements de mise en page est essentiel pour offrir une expérience fluide et rationalisée à vos visiteurs.
Comment les éléments d’image et / ou vidéo sans largeur et hauteur explicites affectent-ils les performances de la page?
Les éléments d’image et / ou vidéo qui ne sont pas explicitement déclarés avec des attributs de hauteur et de largeur sont généralement redimensionnés à l’aide de CSS (soit sur l’image elle-même, soit sur le conteneur parent).
Lorsque cela se produit, le navigateur ne peut déterminer leurs dimensions et leur allouer de l’espace qu’une fois qu’il a commencé à télécharger le ‘images non dimensionnées‘et / ou des vidéos.
Vous remarquerez peut-être que lorsque le navigateur récupère ces images, le contenu de votre page est constamment poussé vers le bas ou déplacé par rapport à sa position d’origine (c’est-à-dire, les changements de mise en page) lorsque le navigateur redimensionne les images et les positionne sur votre page.
Les changements de mise en page causés par les images et / ou les vidéos non dimensionnées affectent la façon dont les utilisateurs interagissent avec votre page Web.
Au fur et à mesure que la page se charge, les images sans taille prédéfinie provoquent le déplacement, l’ajustement et le déplacement d’autres éléments, ce qui contribue à un mauvais score CLS. Cela se traduit par un mauvais score CLS (Cumulative Layout Shift), qui indique que votre page est visuellement instable ou instable, en particulier sur les appareils mobiles.
De plus, le navigateur doit faire plus de travail pour recalculer la mise en page, ce qui peut affecter les performances de votre page.
En déclarant explicitement les attributs de largeur et de hauteur pour votre image et / ou vos éléments vidéo, vous pouvez vous assurer que le navigateur calculera et réserve suffisamment d’espace pour les images et / ou les vidéos.
Les images avec des dimensions prédéfinies ont leurs largeurs et hauteurs définies pour assurer un affichage stable et prévisible de votre site Web lors du chargement, minimisant ainsi le décalage de mise en page.
Cela peut minimiser le travail du thread principal, éviter de grands changements de mise en page et créer une expérience fluide pour vos visiteurs.
Comment GTmetrix déclenche-t-il cet audit?
Cet audit est déclenché si tout des conditions suivantes sont remplies:
- Il manque la hauteur ou la largeur des éléments d’image et / ou vidéo, ou tous les deux les attributs.
- Ces attributs de hauteur et / ou de largeur sont non déclaré nulle part c’est-à-dire dans le HTML, dans le CSS, des feuilles de style spécifiques, etc.
- Les attributs de hauteur et de largeur n’ont pas de vraies valeurs par exemple, un nombre différent de zéro, auto en CSS, etc.
Cliquer sur l’audit révèle les images qui n’ont pas d’attributs de largeur et / ou de hauteur explicites.
Lire Aussi : Comment savoir si votre site est optimisé pour le SEO ?
Comment modifier les images pour avoir un site qui charge plus rapidement ?
Pour résoudre cet audit, spécifiez simplement à la fois la largeur et la hauteur des éléments image et vidéo de votre page Web.
Cela garantit que l’espacement correct est utilisé pour les images et les vidéos.
Notez que les navigateurs modernes calculent automatiquement le rapport hauteur / largeur d’une image / vidéo en fonction des attributs de largeur et de hauteur déclarés.
