miten verkkosivuston suorituskykyä mitataan Google Chromen Kehittäjätyökaluilla

tässä artikkelissa kuvataan, miten Google Chromen kehittäjätyökaluja käytetään verkkosivuston suorituskyvyn mittaamiseen ja seurantaan.

Chromen kehittäjätyökalujen käyttäminen

Google Chrome-selain sisältää kehittäjätyökalut, ominaisuuden, joka auttaa web-kehittäjiä debug-ongelmissa HTML: n, CSS: n ja JavaScriptin kanssa:

• jos haluat käyttää kehittäjän työkaluja Microsoft Windowsissa tai Linuxissa, paina Ctrl + Shift + I.
• päästäksesi kehittäjän työkaluihin Apple Mac OS X: ssä, paina Option + Command + I.

seuraava kuva näyttää Kehittäjän työkalut avoinna Googlen kotisivulla:

kehittäjätyökalut-ruudun Verkko-välilehdessä Chrome listaa kaikki nykyisen sivun yhteydet. Jos haluat testata tietyn sivun, avaa Kehittäjän työkalut ja siirry sivulle, jonka haluat testata. Vaihtoehtoisesti, jos haluat testata nykyisen sivun, yksinkertaisesti päivittää sivun.

Chrome näyttää tiedot jokaisesta sivuresurssista ja sen pyynnöstä:

nimi: pyydetyn resurssin nimi tai URL.

Method: the HTTP method (GET or POST).

Status: palvelimen palauttama HTTP-tilakoodi.

Tyyppi: resurssin MIME-tyyppi.

initiaattori: palvelimelle lähetetty viite; tämä on yleensä katselemasi sivun URL.

koko: Selaimen vastaanottaman resurssin koko (Jos palvelin pakasi sivun, tämä arvo on pienempi kuin varsinainen tiedostokoko).

aika: kokonaisaika resurssin hakemiseen, mukaan lukien DNS-haku ja latausaika.

Aikajana: aikajana on “vesiputous”-aikanäkymä jokaisesta pyynnöstä. Jos viet hiiren osoitinta vesiputouksen palkin päälle, ilmestyy työkaluvihje, jossa on yksityiskohtainen erittely latausajasta:

• esto: tämä sisältää aikaa DNS-etsintään, SSL-kättelyyn ja yhteyden muodostamiseen palvelimeen.
• lähettäminen: Tähän sisältyy aika lähettää pyyntö kaikkine pyyntötietoineen palvelimelle ja saada palvelimelta vahvistus siitä, että se on vastaanottanut pyynnön.
• odottaminen: Tähän sisältyy aika, jolloin palvelin voi renderoida tarjottavan sisällön ja aloittaa sen lähettämisen selaimeen.
• vastaanottaminen: tämä sisältää sisällön lataamiseen kuluvan ajan.

odotus-ja vastaanottoaikojen yhdistelmä on tärkein tekijä työmaan nopeuden määrittämisessä. Internet-yhteyden nopeus voi kuitenkin vaikuttaa myös suorituskykyyn, joten kannattaa aina vertailla aikoja samasta paikasta, kun olet määrittämässä sivuston suorituskykyvertailuja.

Verkko-välilehden alareunassa on yhteenveto sivun lataamisprosessista. Tämä yhteenveto sisältää pyyntöjen kokonaismäärän, koko sivun kokonaiskoon resursseineen sekä erittelyn siitä ajasta, jonka sivun tekeminen selaimessa on kulunut.

ensimmäinen aika-arvo on koko sivun sisällön lataamiseen käytetty aika. Tämä arvo sisältää JavaScriptin lataaman sisällön sen jälkeen, kun sivu on renderöity; tämän seurauksena tämä numero voi muuttua, jos taustalla on pyyntöjä.

suluissa olevat kaksi aika-arvoa ovat tapahtumapaikan optimoinnin kannalta tärkeitä tapahtumia:

• lataa: Tämä tapahtuma on aika ladata sivu, mukaan lukien kaikki JavaScript -, CSS-ja kuvatiedostot, jotka ovat alkuperäisessä HTML-dokumentissa. Tämä tapahtuma kestää yleensä kauemmin kuin DOMContentLoaded tapahtuma.
• DOMContentLoaded: tämä tapahtuma kuvaa käyttäjän havaitsemaa aikaa sivun lataamiseen. Se on aika tehdä sivun kuvattu alkuperäisessä asiakirjassa ennen JavaScript pyytää lisäresursseja. Tämä aika tallennetaan, kun selain ampuu Domcontloaded-tapahtuman Javascriptissä. (Esimerkki resurssista, jota pyydetään DOM: n ulkopuolella, on Google Analytics.)