Mesurer l’effet des optimisations

Une optimisation HTML n’est utile que si elle améliore le chargement sans retarder une ressource importante. Un score Lighthouse isolé ne suffit pas pour conclure : vous devez comparer des mesures prises dans des conditions proches et vérifier que le changement testé est bien la seule différence pertinente.

Dans les leçons précédentes, vous avez ajouté un preload pour l’affiche de la Soirée des cultures et conservé ses dimensions ainsi que sa priorité élevée. Aucun élément actuel ne justifie loading="lazy" : ne l’ajoutez pas artificiellement pour créer un avant/après. Vous pouvez mesurer l’effet du preload en comparant une version de référence sans cette déclaration à la version actuelle, puis analyser le chargement différé dans une page qui comporte réellement des images hors écran.

Construire une comparaison exploitable

Commencez par conserver une version de référence, puis modifiez un seul facteur à la fois. Pour évaluer le preload, comparez la page sans le lien de préchargement et la page avec ce lien, sans modifier simultanément l’image, la feuille de style, le contenu ou les réglages du serveur. Pour le chargement différé, le scénario doit inclure une image située plus bas dans la page, en plus d’une image prioritaire qui reste chargée normalement.

Lancez Lighthouse dans le même navigateur et utilisez le même mode, le même appareil simulé et les mêmes conditions réseau pour chaque version. Fermez les onglets et activités inutiles, puis répétez les essais plusieurs fois. Le cache, la charge de la machine et les variations du réseau peuvent faire fluctuer les résultats ; une seule mesure ne permet donc pas d’attribuer sûrement une différence au changement HTML.

Notez les valeurs brutes de chaque essai, pas seulement le score global, et comparez les tendances observées. Les indicateurs de vitesse et de stabilité de l’affichage sont plus utiles pour comprendre l’effet d’une ressource que le score agrégé, qui combine plusieurs catégories. Si les essais se dispersent fortement, augmentez leur nombre ou recommencez dans des conditions plus stables avant de tirer une conclusion.

Lire l’effet d’un preload

Le lien de préchargement demande au navigateur de commencer plus tôt le téléchargement de l’affiche, ressource visible et prioritaire dans le projet. Dans les résultats, examinez si l’image est découverte et affichée plus tôt, ainsi que l’évolution du rendu du contenu principal. Un gain n’est pas garanti : le navigateur peut déjà découvrir rapidement l’image dans le document, ou le réseau peut être limité par une autre ressource.

Vérifiez également que le fichier demandé par le preload est bien celui utilisé par l’image. Un lien erroné ou un preload inutile peut consommer de la bande passante sans accélérer l’affichage ; des téléchargements répétés ou des avertissements dans les outils du navigateur constituent des indices à examiner. Si les mesures restent équivalentes, ne présentez pas le preload comme une amélioration démontrée : conservez-le seulement si la ressource est réellement critique et que son coût est acceptable.

Évaluer le chargement différé

Le chargement différé peut éviter de télécharger immédiatement des images qui ne sont pas encore proches de la zone affichée. Il peut ainsi réduire les ressources transférées au début, mais il ne rend pas nécessairement plus rapide l’image principale. Si une image visible dès l’ouverture est différée, elle risque au contraire d’apparaître tardivement ; le contrôle doit donc porter à la fois sur le chargement initial et sur l’arrivée à l’image lorsqu’on fait défiler la page.

Pour une page de test contenant plusieurs images, observez dans le panneau réseau lesquelles sont demandées au chargement initial, puis faites défiler la page et vérifiez que les images différées arrivent avant de devenir nécessaires à la lecture. Comparez le transfert initial et le rendu, sans confondre une diminution des octets reçus au départ avec une amélioration de tous les indicateurs. Une image qui n’est jamais atteinte peut ne pas être téléchargée, ce qui est cohérent avec l’objectif du mécanisme.

À retenir

• Comparez une version de référence et une version modifiée en ne changeant qu’un facteur à la fois.
• Répétez les mesures Lighthouse dans des conditions identiques et interprétez les tendances, pas une valeur isolée.
• Pour le preload, vérifiez que l’image prioritaire est découverte plus tôt et que le fichier préchargé est bien utilisé.
• Pour le chargement différé, contrôlez le transfert initial et l’arrivée des images au défilement ; ne différez pas l’affiche prioritaire.
• Ne revendiquez aucun gain que les mesures ne confirment pas.

Dans la prochaine leçon, vous préparerez la structure complète de la page événement avant d’assembler ses composants et ses ressources.