Jak měřit výkon webu pomocí Google Chrome Nástroje pro Vývojáře

Tento článek popisuje, jak používat Google Chrome Nástroje pro Vývojáře měřit a sledovat webové stránky výkon.

Pomocí Nástrojů pro Vývojáře Chrome

webový prohlížeč Google Chrome obsahuje Vývojářské Nástroje, funkce, která pomáhá webové vývojáře ladění problémů s HTML, CSS a JavaScript:

• přístup K Vývojářské Nástroje v systému Microsoft Windows nebo Linux, stiskněte kombinaci kláves Ctrl+Shift+I.
• pro přístup K Nástroje pro Vývojáře na Apple Mac OS X, stiskněte Option+Command+I.

následující obrázek ukazuje Nástroje pro Vývojáře otevřít na domovskou stránku Google:

Na Síťové kartě Vývojář Nástroje podokně, Chrome obsahuje seznam všech spojení pro aktuální stránku. Vyzkoušet konkrétní stránku, otevřete Nástroje pro Vývojáře a přejděte na stránku, kterou chcete otestovat. Pokud chcete otestovat aktuální stránku, jednoduše ji obnovte.

Chrome zobrazuje informace pro každý zdroj stránky a jeho požadavek:

název: název nebo adresa URL požadovaného zdroje.

metoda: metoda HTTP (GET nebo POST).

Status: stavový kód HTTP vrácený serverem.

typ: typ MIME zdroje.

iniciátor: referer odeslaný na server; toto je obvykle adresa URL stránky, kterou si prohlížíte.

Velikost: Velikost zdroje přijatého prohlížečem (pokud byla stránka komprimována serverem, je tato hodnota menší než skutečná velikost souboru).

čas: Celkový čas na načtení zdroje, včetně vyhledávání DNS a času stahování.

Časová osa: časová osa je “vodopád” časosběrný pohled na každý požadavek. Pokud podržíte ukazatel myši nad pruh na vodopád, tooltip se zobrazí se podrobný rozpis ke stažení čas:

• Blokování: To zahrnuje čas pro vyhledávání DNS, SSL handshake, a připojení k serveru.
• odeslání: To zahrnuje čas odeslání požadavku se všemi údaji o požadavku na server a obdržení potvrzení ze serveru, že žádost obdržel.
• Čekání: To zahrnuje čas na serveru k vykreslení obsahu se podává, a začít odesláním do prohlížeče.
• příjem: To zahrnuje čas potřebný ke stažení obsahu.

kombinace čekacích a přijímacích časů je nejdůležitějším faktorem při určování rychlosti webu. Rychlost připojení k internetu však může také ovlivnit výkon, takže byste měli vždy porovnávat časy ze stejného místa, když stanovujete měřítka výkonu webu.

v dolní části karty síť je shrnutí procesu načítání stránky. Tento souhrn zahrnuje celkový počet žádostí, celková velikost celé stránky, včetně jejích zdrojů, a rozdělení času stráveného vykreslování stránky v prohlížeči.

první hodnota času je celkový čas strávený načítání veškerého obsahu na stránce. Tato hodnota zahrnuje Obsah načtený JavaScriptem po vykreslení stránky; v důsledku toho se toto číslo může změnit, pokud se na pozadí vyskytnou požadavky.

dvě časové hodnoty uvnitř závorek jsou události důležité pro optimalizaci webu:

• zatížení: Tato událost je čas načíst stránku, včetně všech souborů JavaScript, CSS a obrázků, které jsou v původním dokumentu HTML. Tato událost obvykle trvá déle než událost DOMContentLoaded.
• DOMContentLoaded: tato událost představuje vnímaný čas uživatele načíst stránku. Je čas vykreslit stránku tak, jak je popsáno v původním dokumentu, než JavaScript požádá o další zdroje. Tato doba je uložena, když prohlížeč spustí událost DOMContentLoaded v JavaScriptu. (Příkladem zdroje, který je požadován mimo DOM, je Google Analytics.)