web-dev-qa-db-fra.com

Temps de chargement de la page dans Google Chrome ou Mozilla Firefox

Existe-t-il un moyen de vérifier le temps de chargement de la page?

MODIFIER:

Je vais étendre un peu la question. Supposons que vous travaillez sur un projet ASP.NET et lorsque vous exécutez votre projet dans Visual Studio, il y a un certain temps de chargement avant que vous puissiez voir votre page de démarrage rendue à l'écran et prête à l'emploi.

Si ce site Web était en ligne, le temps de chargement devrait être différent du temps de chargement lors du démarrage de votre projet à partir de Visual Studio.

Ce que j'aimerais voir, c'est quel serait le temps de chargement réel si le site Web était sur un serveur.

EDIT 2: Réponse

Chrome -> Clic droit -> Inspecter l'élément -> onglet Réseau. Lorsque vous chargez une page, il y a un bon rapport pour la chronologie de la page indiquant le temps de chargement réel de la page, css, js, etc. Il existe un outil similaire dans Mozilla sous l'onglet Net.

google-chromemozillapage-load-time
26
Anton Belev

Quant à Firefox, l'op a déjà répondu à sa propre question (Menu - Développeur Web - Réseau ou Ctrl + Shift + K - Réseau ou Ctrl + Shift + Q), mais je voudrais mentionner le "app.telemetry Page Speed ​​Monitor "module complémentaire, qui ne vous oblige pas à ouvrir la console Web en premier. Il affichera simplement le temps de chargement en ms dans la barre d'état (il affichera même les détails lorsque vous cliquez dessus).
https://addons.mozilla.org/en-US/firefox/addon/apptelemetry/
Le seul inconvénient semble être le bouton Facebook/Twitter.

Quant à Chrome/Chromium, j'appuie la suggestion d'Andy Davies, le Plugin de temps de chargement de la page est génial, il montre le temps de chargement à côté de la barre d'emplacement et il fournit également des détails.

12
basic6

Notez également que vous pouvez désormais l'obtenir via javascript via le window.performance objet (Chrome, Firefox et IE9 +).

Essaye ça:

window.onload = function(){
  setTimeout(function(){
    var t = performance.timing;
    console.log(t.loadEventEnd - t.responseEnd);
  }, 0);
}

Plus d'informations ici: http://www.html5rocks.com/en/tutorials/webperformance/basics/

7
lambinator

Comme @ nick-rtz j'utilise webpagetest pour des tests sérieux, si vous voulez un aperçu rapide du temps de chargement et que vous ne voulez pas utiliser le dev, utilisez ceci Chrome aidera - - https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig

3
Andy Davies

J'utilise cet outil: http://www.webpagetest.org/ Mais c'est pour les sites en direct. Si vous souhaitez comparer des fichiers locaux qui ne seraient pas représentatifs de l'utilisation réelle, mais vous pourriez vouloir mesurer les temps de rendu et pas seulement les temps de transport. Notez que les temps de chargement dépendent de l'emplacement géographique sur la planète où l'utilisateur se trouve par rapport au serveur.

2
Niklas Rosencrantz