a webhely teljesítményének mérése a Google Chrome Developer Tools használatával

ez a cikk azt ismerteti, hogyan lehet A Google Chrome Fejlesztői eszközeivel mérni és figyelemmel kísérni a webhely teljesítményét.

a Chrome Developer Tools használata

a Google Chrome webböngészője fejlesztői eszközöket tartalmaz, amelyek segítenek a webfejlesztőknek a HTML, CSS és JavaScript hibakeresésében:

• a Microsoft Windows vagy Linux fejlesztői eszközeinek eléréséhez nyomja meg a Ctrl+Shift+I billentyűkombinációt.
• az Apple Mac OS X fejlesztői eszközeinek eléréséhez nyomja meg az Option+Command+I billentyűkombinációt.

az alábbi képen a Google kezdőlapján megnyitott fejlesztői eszközök láthatók:

A Fejlesztői eszközök ablaktábla hálózat lapján a Chrome felsorolja az aktuális oldal összes kapcsolatát. Egy adott oldal teszteléséhez nyissa meg a fejlesztői eszközöket, és keresse meg a tesztelni kívánt oldalt. Alternatív megoldásként, ha tesztelni szeretné az aktuális oldalt, egyszerűen frissítse az oldalt.

a Chrome megjeleníti az egyes oldalforrásokra vonatkozó információkat és azok kérését:

név: a kért erőforrás neve vagy URL-címe.

módszer: a HTTP módszer (GET vagy POST).

állapot: a szerver által visszaadott HTTP állapotkód.

típus: az erőforrás MIME típusa.

kezdeményező: a szerverre küldött hivatkozó; ez általában a megtekintett oldal URL-je.

méret: A böngésző által kapott erőforrás mérete (ha az oldalt a szerver tömörítette, ez az érték kisebb, mint a tényleges fájlméret).

idő: az erőforrás letöltésének teljes ideje, beleértve a DNS-keresést és a letöltési időt.

idővonal: az idővonal az egyes kérelmek “vízesés” gyorsított nézete. Ha az egérmutatót a vízesés egyik sávja fölé viszi, megjelenik egy eszköztipp a letöltési idő részletes lebontásával:

• blokkolás: ez magában foglalja a DNS-keresés idejét, az SSL kézfogást és a kiszolgálóval való kapcsolat létrehozását.
• Küldés: Ez magában foglalja azt az időt, hogy a kérést az összes kérési adattal együtt elküldjük a szervernek, valamint hogy megerősítést kapjunk a szervertől arról, hogy megkapta a kérést.
• várakozás: ez magában foglalja azt az időt, amíg a szerver megjeleníti a kiszolgálandó tartalmat, és elkezdi elküldeni a böngészőnek.
• fogadás: ez magában foglalja a tartalom letöltéséhez szükséges időt.

a várakozási idő és a fogadási idő kombinációja a legfontosabb tényező a helyszín sebességének meghatározásában. Az internetkapcsolat sebessége azonban befolyásolhatja a teljesítményt is, ezért a webhely teljesítmény-referenciaértékeinek létrehozásakor mindig hasonlítsa össze az ugyanazon helyről származó időket.

a Hálózat lap alján található az oldalbetöltési folyamat összefoglalása. Ez az összefoglaló tartalmazza a kérelmek teljes számát, A teljes oldal teljes méretét, beleértve az erőforrásokat, valamint az oldal böngészőben történő megjelenítésével töltött idő lebontását.

az első időérték az oldal teljes tartalmának betöltésével töltött teljes idő. Ez az érték magában foglalja a JavaScript által az oldal megjelenítését követően betöltött tartalmat; ennek eredményeként ez a szám megváltozhat, ha a kérések a háttérben fordulnak elő.

a zárójelben lévő két időérték a webhely optimalizálása szempontjából fontos események:

• terhelés: Ez az esemény az idő az oldal betöltésére, beleértve az összes JavaScript, CSS és képfájlt, amelyek az eredeti HTML dokumentumban vannak. Ez az esemény általában hosszabb ideig tart, mint a DOMContentLoaded esemény.
• DOMContentLoaded: ez az esemény a felhasználó által az oldal betöltésére észlelt időt jelenti. Itt az ideje, hogy az oldalt az eredeti dokumentumban leírtak szerint rendereljük, mielőtt a JavaScript további erőforrásokat kérne. Ez az idő akkor tárolódik, amikor a böngésző elindítja a Domcontentloaded eseményt JavaScript-ben. (A DOM-on kívül kért erőforrásokra példa a Google Analytics.)