slik måler du nettstedytelse Ved Hjelp Av Google Chrome Utviklerverktøy

Denne artikkelen beskriver hvordan Du bruker Google Chrome Utviklerverktøy til å måle og overvåke ytelsen til et nettsted.

Bruke Chrome-Utviklerverktøy

Google Chrome-nettleseren inneholder Utviklerverktøy, en funksjon som hjelper webutviklere med å feilsøke PROBLEMER MED HTML, CSS og JavaScript:

• For å få Tilgang Til Utviklerverktøy På Microsoft Windows eller Linux, trykk Ctrl+Skift+I.
• for å få tilgang Til Utviklerverktøy På Apple Mac OS X, trykk Tilvalg+Kommando+I.

følgende bilde viser Utviklerverktøy som er åpne på Googles startside:

I Kategorien Nettverk i Utviklerverktøy-ruten viser Chrome alle tilkoblinger for gjeldende side. Hvis du vil teste En bestemt side, åpner Du Utviklerverktøy og navigerer til siden du vil teste. Alternativt, hvis du ønsker å teste den aktuelle siden, bare oppdatere siden.

Chrome viser informasjon for hver side ressurs og dens forespørsel:

Navn: navnet Eller NETTADRESSEN til den forespurte ressursen.

METODE: HTTP-metoden(GET eller POST).

Status: HTTP-statuskoden som returneres av serveren.

Type: mime-typen for ressursen.

Initiator: referenten som sendes til serveren; dette er VANLIGVIS NETTADRESSEN til siden du ser på.

Størrelse: Størrelsen på ressursen som mottatt av nettleseren(hvis siden ble komprimert av serveren, er denne verdien mindre enn den faktiske filstørrelsen).

Tid: den totale tiden for å hente ressursen, inkludert DNS-oppslag og nedlastingstid.

Tidslinje: tidslinjen er en” foss ” time-lapse visning av hver forespørsel. Hvis du holder musepekeren over en bar på fossen, vises et verktøytips med en detaljert oversikt over nedlastingstiden:

• Blokkering: dette inkluderer TID FOR DNS-oppslag, SSL-håndtrykk og tilkobling til serveren.
• Sende: Dette inkluderer tid til å sende forespørselen med alle forespørselsdata til serveren, og å motta bekreftelse fra serveren om at den har mottatt forespørselen.
• Venter: dette inkluderer tid for serveren til å gjengi innholdet som skal serveres, og for å begynne å sende det til nettleseren.
• Mottak: Dette inkluderer tiden det tar å laste ned innholdet.

kombinasjonen av vente-og mottakstider er den viktigste faktoren for å bestemme hastigheten på nettstedet. Internett-tilkoblingshastigheten kan imidlertid også påvirke ytelsen, så du bør alltid sammenligne tider fra samme sted når du etablerer ytelsesstandarder for nettsted.

nederst I Kategorien Nettverk er et sammendrag av sideinnlastingsprosessen. Dette sammendraget inneholder totalt antall forespørsler, den totale størrelsen på hele siden, inkludert ressursene, og en oversikt over tiden som brukes til å gjengi siden i nettleseren.

verdien for første gang er den totale tiden som er brukt på å laste inn alt innholdet på siden. Denne verdien inkluderer Innhold lastet Av JavaScript etter at siden har gjengitt; som et resultat kan dette nummeret endres hvis forespørsler oppstår i bakgrunnen.

de to tidsverdiene I parentesene er hendelser som er viktige for nettstedoptimalisering:

• last inn: Denne hendelsen er på tide å laste inn siden, inkludert Alle JavaScript -, CSS-og bildefilene som er i det opprinnelige HTML-dokumentet. Denne hendelsen tar vanligvis lengre tid enn DOMContentLoaded hendelsen.
• DOMContentLoaded: denne hendelsen representerer brukerens oppfattede tid til å laste siden. Det er på tide å gjengi siden som beskrevet i originaldokumentet før JavaScript ber om flere ressurser. Denne tiden lagres når nettleseren starter domcontentloaded-hendelsen I JavaScript. (Et eksempel på en ressurs som er forespurt utenfor DOM er Google Analytics.)