Czas ładowania strony w przeglądarce Google Chrome lub Mozilla Firefox

Question

Czy istnieje sposób sprawdzenia, ile czasu zajmuje załadowanie strony?

EDYTOWANIE:

Będę nieco przedłużyć pytanie. Załóżmy, że pracujesz nad projektem ASP.NET, a po uruchomieniu projektu w Visual Studio jest trochę czasu ładowania, zanim zobaczysz swoją stronę początkową wyświetlaną na ekranie i gotową do użycia.

Jeśli ta strona internetowa była dostępna, czas ładowania powinien się różnić od czasu ładowania podczas uruchamiania projektu z programu Visual Studio.

Co chciałbym zobaczyć, to byłby faktyczny czas ładowania, gdyby strona była na serwerze.

EDIT 2: Odpowiedź

Chrome -> Right Click -> Zbadaj element -> karta sieciowa. Po załadowaniu strony znajduje się ładny raport dotyczący osi czasu strony pokazujący rzeczywisty czas wczytywania strony, czasy ładowania css, js itp. W Mozilli istnieje podobne narzędzie w zakładce Net.

Answer 1

chodzi o Firefox, op odpowiedział już na własne pytanie (Menu - Web Developer - Sieć lub Ctrl + Shift + K - Sieć lub Ctrl + Shift + Q), ale chciałbym wspomnieć o dodatku "app.telemetry Page Speed ​​Monitor" , co nie wymaga wcześniejszego otwierania konsoli internetowej. Pokaże tylko czas ładowania w ms na pasku stanu (wyświetli nawet szczegóły po kliknięciu).
https://addons.mozilla.org/en-US/firefox/addon/apptelemetry/
Jedynym minusem wydaje się być przycisk Facebook/Twitter.

Jeśli chodzi o Chrome/Chromium, podsuwam sugestię Andy'ego Daviesa, Page load time plugin jest niesamowita, pokazuje czas ładowania obok paska adresu, a także szczegóły.

Answer 2

Używam tego narzędzia: http://www.webpagetest.org/ Ale jest to na żywo witryn. Jeśli chcesz porównywać pliki lokalne, które nie są reprezentatywne dla rzeczywistego użycia, ale możesz chcieć zmierzyć czas renderowania, a nie tylko czas transportu. Zwróć uwagę, że czasy ładowania zależą od tego, gdzie geograficznie na świecie znajduje się użytkownik względem serwera.

Answer 3

Jako @ nick-RTZ nie używam WebPageTest do poważnego testu, jeśli chcesz rzucić okiem na czas ładowania i nie chcą korzystać z dev, narzędzia to rozszerzenie Chrome pomoże - https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig

Answer 4

Pamiętaj, że możesz teraz uzyskać to za pośrednictwem javascript poprzez obiekt window.performance (Chrome, Firefox i IE9 +).

Spróbuj tego:

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

Więcej informacji tutaj: http://www.html5rocks.com/en/tutorials/webperformance/basics/

Answer 5

Dla loadtime w miejscu, które jest na żywo, chciałbym również zajrzeć do Realu monitorowanie użytkowników (aka RUM), aby uzyskać wydajność dane od rzeczywistych użytkowników w produkcji. Możesz to zrobić samodzielnie, korzystając z projektów Open Source, takich jak Boomerang i Bucky, lub z dostawcą. Dane są nieocenione! Narzędzie wymienione przez @vikramvi pomaga śledzić wydajność strony w dev/test i pomaga zapobiec regresji wydajności na wczesnym etapie cyklu deweloperskiego.