Sådan måles hjemmesidens ydeevne ved hjælp af Google Chrome udviklerværktøjer

denne artikel beskriver, hvordan du bruger Google Chromes udviklerværktøjer til at måle og overvåge hjemmesidens ydeevne.

brug af Chrome-udviklerværktøjer

Google Chrome indeholder udviklerværktøjer, en funktion, der hjælper udviklere med at fejle problemer med HTML, CSS og JavaScript:

• tryk på Ctrl+Shift+I.
• for at få adgang til udviklerværktøjer på Apple Mac OS, Tryk på Option+Command+I.

følgende billede viser udviklerværktøjer, der er åbne på Googles startside:

på fanen Netværk i ruden udviklerværktøjer viser Chrome alle forbindelser for den aktuelle side. For at teste en bestemt side skal du åbne udviklerværktøjer og navigere til den side, du vil teste. Alternativt, hvis du vil teste den aktuelle side, skal du blot opdatere siden.

Chrome viser oplysninger for hver sideressource og dens anmodning:

navn: navnet eller URL ‘ en for den anmodede ressource.

metode: HTTP-metoden (GET eller POST).

Status: HTTP-statuskoden returneres af serveren.

Type: ressourcens MIME-type.

Initiator: refereren sendt til serveren; dette er normalt URL ‘ en for den side, du ser.

størrelse: Hvis siden blev komprimeret af serveren, er denne værdi mindre end den faktiske filstørrelse).

tid: den samlede tid til at hente ressourcen, inklusive DNS-opslag og hentningstid.

tidslinje: tidslinjen er en “vandfald” time-lapse visning af hver anmodning. Hvis du holder musemarkøren over en bjælke på vandfaldet, vises et værktøjstip med en detaljeret oversigt over overførselstiden:

• blokering: dette inkluderer tid til DNS-opslag, SSL-håndtryk og oprettelse af forbindelse til serveren.
• afsendelse: Dette inkluderer tid til at sende anmodningen med alle anmodningsdata til serveren og til at modtage bekræftelse fra serveren om, at den har modtaget anmodningen.
• venter: dette inkluderer tid til serveren til at gengive det indhold, der skal serveres, og til at begynde at sende det til bro.sereren.
• modtagelse: dette inkluderer den tid, det tager at hente indholdet.

kombinationen af ventetider og modtagetider er den vigtigste faktor til bestemmelse af stedets hastighed. Internetforbindelseshastighed kan dog også påvirke ydeevnen, så du bør altid sammenligne tider fra samme sted, når du opretter benchmarks for sidens ydeevne.

nederst på fanen Netværk er en oversigt over sideindlæsningsprocessen. Dette sammendrag inkluderer det samlede antal anmodninger, den samlede størrelse på hele siden inklusive dens ressourcer, og en oversigt over den tid, der bruges på at gengive siden i Bro.sereren.

første gangs værdi er den samlede tid, der bruges på at indlæse alt indholdet på siden. Denne værdi inkluderer indhold, der er indlæst af JavaScript, efter at siden har gengivet; som et resultat kan dette nummer ændres, hvis der opstår anmodninger i baggrunden.

de to tidsværdier inden for parenteserne er begivenheder, der er vigtige for site optimering:

• belastning: Denne begivenhed er tiden til at indlæse siden, inklusive alle JavaScript -, CSS-og billedfiler, der er i det originale HTML-dokument. Denne begivenhed tager normalt længere tid end den DOMContentLoaded begivenhed.
• DOMContentLoaded: denne begivenhed repræsenterer den opfattede tid af en bruger til at indlæse siden. Det er tid til at gengive siden som beskrevet i det originale dokument, før JavaScript anmoder om yderligere ressourcer. Denne gang gemmes, når du fyrer DOMContentLoaded-begivenheden i JavaScript. (Et eksempel på en ressource, der anmodes om uden for DOM er Google Analytics.)