Comment utiliser le Network Waterfall de Google Chrome pour réduire le nombre de requêtes et la taille de transfert ?

Comme nous l’évoquions ici dans notre guide complet “100% sur PageSpeed”, lorsqu’on a appliqué toutes les recommandations proposées par PageSpeed Insights dans ses Avertissements / Opportunités, en bas du test PageSpeed, le meilleur moyen d’améliorer encore son score est de « Réduire le Nombre de Requêtes et la Taille de Transferts » de la page.

Pour identifier les requêtes et ressources superflues devant être supprimées ou optimisées, votre meilleur allié est le Network Waterfall présent dans les Outils pour développeurs de votre navigateur Google Chrome !

Voici comment procéder pour accéder au Network Waterfall et détecter les requêtes pouvant être éliminées afin de réduire la taille de transfert d’une page.

Analysez la capture d’écran ci-dessous pour voir où cliquer !

• Ouvrez Google Chrome
• Fichier  1  > Nouvelle fenêtre de navigation privée (Shift + CTRL + N)
• Rendez-vous sur la page Web à analyser en entrant l’URL dans la barre d’adresse
• Afficher  2  > Options pour développeurs (Alt + CTRL + i )
• Activez la vue “Mobile”  3  en cliquant sur l’icône en forme de Smartphone + Tablette 
• Rendez-vous dans l’onglet Network  4  (comme illustré ci-dessous)
• Activez l’option “Disable cache”… et de préférence passez le “Throttling” sur “Slow 3G”   5  pour simuler une connexion très lente
• Vérifiez que le voyant d’enregistrement 🔴 est actif  6  (vous devez voir un rond “rouge”)
• Maintenez Shift et cliquez sur l’icône  7  “Actualiser la page” 
• Attendez la fin du chargement de la page, sans survoler d’élément ni cliquer dans la page (tenez votre curseur loin des éléments de la page, pour ne pas déclencher d’exécution de JavaScript qui fausserait le résultat)
• Dès que le chargement est terminé (l’icône de l’onglet apparaît normalement sans animation de “chargement”), cliquez sur l’icône rouge  6  pour Stopper l’enregistrement 🔘

À ce stade, vous devez voir quelque chose de similaire à la capture jointe ci-dessous…

Vous pouvez maintenant lire la liste des ressources  8  chargées par la page et identifier :

• des Polices d’écriture ou Polices d’icônes superflues qui devraient être éliminées
• des Images qui seraient surdimensionnées ou non suffisamment compressées
• des fichiers JavaScript dont l’exécution devrait être retardée
• etc 

Pour en savoir plus sur l’Optimisation des Performances et du score PageSpeed, ne manquez pas ceci…