så här mäter du webbplatsprestanda med hjälp av Google Chrome Developer Tools

den här artikeln beskrivs hur du använder Google Chrome Developer Tools för att mäta och övervaka en webbplats prestanda.

använda Chrome Developer Tools

Google Chrome-webbläsaren innehåller Utvecklarverktyg, en funktion som hjälper webbutvecklare att felsöka problem med HTML, CSS och JavaScript:

• för att komma åt Utvecklarverktyg på Microsoft Windows eller Linux, tryck Ctrl + Skift + I.
• för att komma åt Utvecklarverktyg på Apple Mac OS X, Tryck på Alternativ + Kommando + I.

följande bild visar Utvecklarverktyg öppna på Googles startsida:

på fliken Nätverk i fönstret Utvecklarverktyg visas alla anslutningar för den aktuella sidan. Om du vill testa en viss sida öppnar du utvecklarverktyg och navigerar till den sida du vill testa. Alternativt, om du vill testa den aktuella sidan, uppdaterar du bara sidan.

Chrome visar information för varje sidresurs och dess begäran:

namn: namnet eller webbadressen till den begärda resursen.

metod: HTTP-metoden (GET eller POST).

Status: HTTP-statuskoden som returneras av servern.

Typ: resursens MIME-typ.

Initiator: referenten som skickas till servern; detta är vanligtvis webbadressen till sidan du tittar på.

storlek: Storleken på resursen som mottagits av webbläsaren (om sidan komprimerades av servern är detta värde mindre än den faktiska filstorleken).

tid: den totala tiden för att hämta resursen, inklusive DNS-sökning och nedladdningstid.

tidslinje: tidslinjen är en “vattenfall” time-lapse vy av varje begäran. Om du håller muspekaren över en stapel på vattenfallet visas ett verktygstips med en detaljerad uppdelning av nedladdningstiden:

• blockering: detta inkluderar tid för DNS-sökning, SSL-handskakning och anslutning till servern.
• skicka: Detta inkluderar tid att skicka begäran med all begärningsdata till servern och att få bekräftelse från servern att den har tagit emot begäran.
• väntar: detta inkluderar tid för servern att återge innehållet som ska serveras och börja skicka det till webbläsaren.
• mottagning: detta inkluderar den tid det tar att ladda ner innehållet.

kombinationen av väntetider och mottagningstider är den viktigaste faktorn för att bestämma platshastighet. Internetanslutningshastigheten kan dock också påverka prestanda, så du bör alltid jämföra tider från samma plats när du fastställer riktmärken för webbplatsprestanda.

längst ner på fliken Nätverk finns en sammanfattning av sidladdningsprocessen. Den här sammanfattningen innehåller det totala antalet förfrågningar, den totala storleken på hela sidan inklusive dess resurser och en uppdelning av den tid som används för att göra sidan i webbläsaren.

första gången värdet är den totala tiden som läggs på allt innehåll på sidan. Detta värde inkluderar innehåll som laddats av JavaScript efter att sidan har gjorts; som ett resultat kan detta nummer ändras om förfrågningar uppstår i bakgrunden.

de två tidsvärdena inom parenteserna är händelser som är viktiga för webbplatsoptimering:

• ladda: Den här händelsen är dags att ladda sidan, inklusive alla JavaScript -, CSS-och bildfiler som finns i det ursprungliga HTML-dokumentet. Denna händelse tar i allmänhet längre tid än händelsen DOMContentLoaded.
• DOMContentLoaded: den här händelsen representerar den upplevda tiden av en användare att ladda sidan. Det är dags att återge sidan som beskrivs i originaldokumentet innan JavaScript begär ytterligare resurser. Den här tiden lagras när webbläsaren avfyrar DOMContentLoaded-händelsen i JavaScript. (Ett exempel på en resurs som begärs utanför DOM är Google Analytics.)