Les charges utiles des grands réseaux sont fortement corrélées aux longs temps de chargement. Elles coûtent également de l'argent aux utilisateurs ; par exemple, ils peuvent avoir à payer plus de données mobiles. Réduire la taille totale des requêtes réseau de votre page est donc bénéfique pour l'expérience des utilisateurs sur votre site et pour leurs portefeuilles.
Échec de l'audit de charge utile réseau Lighthouse
Lighthouse indique la taille totale en kibioctets (Kio) de toutes les ressources demandées par votre page. Les requêtes les plus importantes sont présentées en premier:
![Capture d'écran de l'audit sur Lighthouse "Éviter les charges utiles réseau volumineuses"](https://developer.chrome.com/static/docs/lighthouse/performance/total-byte-weight/image/a-screenshot-the-lightho-5edd6e4e68e25.png?authuser=6&hl=fr)
D'après les données d'archive HTTP, la charge utile réseau médiane est comprise entre 1 700 et 1 900 Kio. Pour vous aider à détecter les charges utiles les plus élevées, Lighthouse signale les pages dont le nombre total de requêtes réseau dépasse 5 000 Kio.
Réduire la taille de la charge utile
Essayez de ne pas dépasser 1 600 Kio au total. Cet objectif est basé sur la quantité de données pouvant être théoriquement téléchargée sur une connexion 3G tout en atteignant un délai avant interactivité de 10 secondes ou moins.
Voici quelques moyens de réduire la taille de la charge utile:
- Différez les requêtes jusqu'à ce qu'elles soient nécessaires. Reportez-vous au modèle PRPL pour voir une approche possible.
- Optimisez les demandes pour qu'elles soient aussi petites que possible. Voici les techniques possibles :
- Mettre les requêtes en cache pour éviter que la page ne télécharge à nouveau les ressources lors de visites répétées (Consultez la page de destination sur la fiabilité du réseau pour découvrir le fonctionnement de la mise en cache et comment la mettre en œuvre.)
Conseils spécifiques à la pile
Angular
Appliquez une division du code au niveau du routage pour réduire la taille de vos groupes JavaScript. Envisagez également d'effectuer la mise en cache préalable des éléments avec le service worker Angular.
Drupal
Pensez à utiliser des styles d'image responsifs pour réduire la taille des images chargées sur votre page. Si vous utilisez les vues pour afficher plusieurs éléments de contenu sur une page, envisagez d'implémenter la pagination pour limiter le nombre d'éléments de contenu affichés sur une page donnée.
Joomla
Envisagez d'afficher des extraits dans vos catégories d'articles (une solution populaire est le lien "En savoir plus"), de réduire le nombre d'articles affichés sur une page donnée, de répartir vos longs posts sur plusieurs pages ou d'utiliser un plug-in pour charger les commentaires de manière différée.
WordPress
Envisagez d'afficher des extraits dans vos listes d'articles (vous pouvez utiliser la balise "more"), de réduire le nombre d'articles affichés sur une page donnée, de répartir vos articles longs sur plusieurs pages ou d'utiliser un plug-in pour charger les commentaires de manière différée.
Ressources
Code source pour l'audit Éviter les charges utiles de réseau énormes