L'optimisation des performances web va bien au-delà de l'ajout de quelques lignes de code ou de l'augmentation du taux de compression des images ; c'est un effort exhaustif pour garantir le confort à chaque étape où l'utilisateur perçoit et interagit avec le site web. Dans ce parcours, les développeurs négligent souvent un attribut HTML incroyablement simple, mais dont les effets sont inimaginables. Il s'agit de la déclaration des attributs <img> `width` et `height`. Nous allons examiner de près comment ces attributs jouent un rôle déterminant dans l'amélioration des performances web, notamment des métriques LCP (Largest Contentful Paint) et CLS (Cumulative Layout Shift) de Core Web Vitals.

Core Web Vitals : de nouveaux standards pour mesurer l'expérience utilisateur

Les Core Web Vitals introduits par Google sont un ensemble d'indicateurs clés pour mesurer la qualité de l'expérience utilisateur sur un site web. Ces métriques impactent également le classement dans les moteurs de recherche, donc tout développeur doit les comprendre et les optimiser.

  • LCP (Largest Contentful Paint) : C'est une métrique qui mesure la performance du chargement des pages. Elle indique le temps nécessaire au rendu du plus grand élément de contenu dans le viewport. Cet élément est généralement le contenu principal de la page (par exemple, une image héro, un grand bloc de texte, une vidéo de présentation, etc.), et plus le LCP est rapide, plus l'utilisateur a l'impression que la page se charge vite. L'objectif est de moins de 2,5 secondes.

  • CLS (Cumulative Layout Shift) : C'est une métrique qui mesure la stabilité visuelle de la page. Elle représente la somme totale des décalages de mise en page qui se produisent sans avertissement pour l'utilisateur. Un exemple typique est lorsque l'image se charge soudainement et pousse les textes ou les boutons environnants, ce qui peut entraîner des erreurs de clic ou de la confusion pour l'utilisateur. L’objectif doit être inférieur à 0,1.

  • FID (First Input Delay) : C'est une métrique qui mesure l'interaction d'une page. Elle mesure le temps que met le navigateur à commencer à répondre à la première interaction de l'utilisateur avec la page (clic sur un bouton, touche d'un lien, etc.). L'objectif est de moins de 100 ms.

Parmi ces métriques, les attributs width et height impactent directement le LCP et le CLS.

Problèmes causés par l'absence des attributs width et height

Si les attributs width et height ne sont pas déclarés dans la balise d'image, le navigateur ne peut pas savoir quel espace sera occupé par cette image avant de la télécharger. Cela entraîne les problèmes suivants :

  1. Retard du LCP : Le navigateur doit télécharger et analyser l'image pour connaître sa taille. Cela bloque le thread principal, retardant le calcul de la mise en page, ce qui augmente finalement le LCP. Le contenu que l'utilisateur trouve le plus important apparaît avec retard.

  2. Apparition du CLS (décalage de mise en page) : Lorsque l'image est chargée tardivement, le navigateur doit réserver de l'espace pour l'image. Dans ce processus, l'espace vide que l'image occupait est soudainement rempli et tout le contenu environnant — texte, boutons, autres images — est poussé vers le bas, provoquant un 'décalage de mise en page'. Cela compromet gravement l'expérience utilisateur et peut entraîner des clics involontaires. Par exemple, si vous lisez un article et qu'une image se charge, la page fait défiler vers le bas, ou lorsque vous essayez de cliquer sur un bouton, un autre élément apparaît soudainement et vous cliquez sur le mauvais.

L'effet magique de la déclaration des attributs width et height

Déclarer les attributs width et height dans la balise <img> peut sembler très simple, mais cela entraîne un changement fondamental dans la manière dont le navigateur rend les images.

<img src="your-image.jpg" alt="Description de votre image" width="800" height="600">

En ajoutant ces attributs, vous pouvez obtenir les effets d'optimisation suivants :

  1. Amélioration du LCP : Le navigateur peut prédire la taille finale de l'image basée sur les valeurs width et height avant de la télécharger et réserve cet espace à l'avance. Cela permet au calcul de mise en page de progresser sans attendre que l'image soit téléchargée. En conséquence, le navigateur peut gérer plus efficacement le processus de rendu de la page et afficher plus rapidement le contenu principal, y compris les éléments LCP, à l'utilisateur.

  2. Prévention du CLS : Étant donné que l'espace pour l'image est réservé à l'avance, le décalage de mise en page lors du chargement de l'image ne se produit pas. Cela offre à l'utilisateur une expérience visuellement stable et agréable, améliorant ainsi considérablement le score CLS.

Exploitation du calcul du rapport d'aspect par le navigateur :

Les navigateurs modernes calculent en interne le rapport d'aspect de l'image basé sur les attributs width et height, offrant la possibilité de régler automatiquement la hauteur lorsque seule la largeur est spécifiée en CSS pour maintenir le rapport d'aspect. Cela est d'une grande aide pour gérer les images de manière flexible dans le design réactif tout en prévenant le CLS. Bien que vous puissiez utiliser des propriétés CSS comme width: 100%; height: auto;, il est essentiel de déclarer width et height en HTML.

Conseils pratiques d’application

  • Appliquer à toutes les balises <img> : Faites de la déclaration des attributs width et height une règle pour toutes les balises <img> utilisées sur les pages web. Cela doit s'appliquer sans exception, des avatars des utilisateurs aux grandes images héro. Dans un environnement de rendu côté serveur (SSR) comme Django, vous pouvez facilement mettre en œuvre cela en utilisant une bibliothèque de traitement d'image comme Pillow pour lire la largeur et la hauteur de l'image dans la fonction de vue, puis transmettre ces valeurs à votre modèle pour les refléter dynamiquement dans le HTML.

  • Utiliser la taille réelle de l'image : Les valeurs width et height que vous déclarez doivent être basées sur la taille pixel d'origine du fichier image. Même si vous modifiez cette taille via CSS, les attributs HTML eux-mêmes suivent les valeurs réelles en pixels.

  • Harmoniser avec le design réactif : Utilisez des propriétés CSS comme max-width: 100%; height: auto; pour que l'image s'ajuste de manière réactive à l'élément parent. Dans ce cas, les attributs HTML width et height fournissent les informations sur le rapport d'origine nécessaires pour que le navigateur réserve l'espace.

<style>
  .responsive-image {
    max-width: 100%;
    height: auto; /* Maintien du rapport d'aspect lorsque utilisé avec width/height */
  }
</style>
<body>
  <img src="responsive-example.jpg" alt="Image réactive" width="1200" height="800" class="responsive-image">
</body>
  • Utilisation avec la balise <picture> : Lorsque vous utilisez srcset et la balise <picture> pour fournir des images dans différentes résolutions et formats, il est également essentiel de déclarer les attributs width et height dans la balise interne <img loading="lazy">.

Conclusion : Petit effort, grande amélioration de la performance

Déclarer les attributs width et height dans les balises d'image est l'un des moyens d'atteindre 'le plus grand effet avec le moindre effort' en matière d'optimisation des performances web. Cette simple habitude améliore le LCP de votre site web et prévient des décalages de mise en page inutiles, réduisant ainsi le CLS, pour finalement offrir une expérience plus rapide et visuellement stable à l'utilisateur. Si, en tant que développeur, vous souhaitez améliorer les indicateurs Core Web Vitals et augmenter la satisfaction des utilisateurs, faites de l'ajout des attributs width et height à toutes vos balises <img> votre priorité absolue.