Lighthouse indique le nombre de requêtes réseau effectuées et la quantité de données transférées lors du chargement de votre page:
- Les valeurs Requests (Requêtes) et Transfer Size (Taille du transfert) de la ligne Total sont calculées en ajoutant les valeurs des lignes Image, Script, Font, Stylesheet, Other, Document et Media.
- La colonne Tiers ne prend pas en compte les valeurs de la ligne Total. Son objectif est de vous indiquer le nombre total de requêtes et la taille totale du transfert provenant de domaines tiers. Les requêtes tierces peuvent être une combinaison de n'importe quel autre type de ressource.
Réduire le nombre de ressources et la taille des transferts
L'impact d'un nombre élevé de ressources ou de tailles de transfert importantes sur les performances de chargement dépend du type de ressource demandé.
CSS et JavaScript
Par défaut, les requêtes de fichiers CSS et JavaScript bloquent l'affichage. En d'autres termes, les navigateurs ne peuvent pas afficher de contenu à l'écran tant que toutes les requêtes CSS et JavaScript ne sont pas terminées. Si l'un de ces fichiers est hébergé sur un serveur lent, ce serveur lent peut retarder l'ensemble du processus de rendu. Pour savoir comment envoyer uniquement le code dont vous avez réellement besoin, consultez les pages Optimiser JavaScript, Optimiser vos ressources tierces et Optimiser votre code CSS.
Métriques concernées: Toutes
Images
Les requêtes d'images ne bloquent pas l'affichage, comme avec CSS et JavaScript, mais elles peuvent tout de même avoir un impact négatif sur les performances de chargement. Un problème fréquent est lorsqu'un utilisateur mobile charge une page et constate que le chargement des images a commencé, mais que l'opération prend un certain temps. Consultez la section Optimiser vos images pour découvrir comment charger les images plus rapidement.
Métriques concernées: First Contentful Paint, First Meaningful Paint et Speed Index
Polices
Un chargement inefficace des fichiers de police peut rendre du texte invisible pendant le chargement de la page. Consultez Optimiser vos polices pour découvrir comment utiliser par défaut une police disponible sur l'appareil de l'utilisateur, puis passer à votre police personnalisée une fois le téléchargement terminé.
Métriques concernées: First Contentful Paint
Documents
Si votre fichier HTML est volumineux, le navigateur doit consacrer plus de temps à l'analyse du code HTML et à la construction de l'arborescence DOM à partir du code HTML analysé.
Métriques concernées: First Contentful Paint
Multimédia
Les fichiers GIF animés sont souvent très volumineux. Consultez Remplacer les GIF par des vidéos pour découvrir comment charger des animations plus rapidement.
Métriques concernées: First Contentful Paint
Utiliser des budgets de performances pour éviter les régressions
Une fois que vous avez optimisé votre code pour réduire le nombre de requêtes et la taille des transferts, consultez la section Définir des budgets de performances pour savoir comment éviter les régressions.
Ressources
Code source pour l'audit "Maintenir un nombre de requêtes faible" et une taille de transfert réduite