Comment mesurer si une requête a un impact important sur les performances d’une page Web ?

Comment évaluer rapidement si une requête a un impact important sur ses performances et, surtout, si ça vaut bien le coup de s’embêter à enlever la ressource. Gain de temps énorme.

1. Ouvrir Chrome Dev Tools avec clic droit > Inspecter ou F12 ou ctrl+shift+I
   
2. Cliquer sur l’onglet Network
   
   
   
3. Sélectionner une ressource listée que l’on aimerait éventuellement enlever (si c’est vide, recharger la page). Dans cet exemple, c’est une requête externe vers chartbeat.
   
   
   
4. Effectuer un clic droit sur la ressource et sélectionner « Block Request URL ».
   
   
   
5. L’onglet « Network Request Blocking » s’ouvre alors. Assurez-vous que « Enable Request Blocking » soit bien coché.
   
   
   
6. Rechargez la page et monitorez les performances (en lançant un test Lighthouse par exemple), maintenant que cette ressource n’est plus chargée.
   
   La requête bloquée apparaît en rouge dans l’onglet Network, accompagnée de « (blocked:devtools).
   
   
   
7. Vos performances augmentent sans que bloquer la requête impacte quoi que ce soit d’autre ?
   
   Bingo, la ressource peut être retirée sereinement.
   

Fin de l’histoire !