Sådan bruges HAR-filer til at analysere ydeevne over tid

Når jeg overvejer udførelsen af ​​et websted, kommer der flere ting til at tænke på. Jeg tænker på at se på anmodningerne fra en side, forstå, hvilke ressourcer der indlæses, og hvor lang tid disse ressourcer tager, før de er tilgængelige for brugerne.

Fanen Chrome-netværk

Fanen Netværk giver dig en tabel, der indeholder alle aktiver, der er indlæst på siden. Det viser dig også relevante oplysninger om oprindelsen af ​​disse aktiver (domæne, HTTP-statuskode, størrelse), der startede anmodningen, og i hvilken rækkefølge de blev indlæst i en vandfaldsrepræsentation.

Du kan tilføje flere oplysninger til denne tabel ved at højreklikke på en af ​​tabeloverskrifterne og vælge andre kolonner.

Kolonnerne for størrelse, tid og vandfald er afgørende for at forstå en sides ydeevne. Størrelsesværdien viser ressourceens gzippede størrelse (når det er relevant), mens tidskolonnen viser den samlede varighed fra starten af ​​anmodningen til modtagelsen af ​​den sidste byte i svaret.

Sidst, men ikke mindst, viser vandfaldssøjlen, hvornår aktivet indlæses sammen med de andre anmodninger.

Ydelsesforbedringer kan mærkes af ændringer i din kode / dit miljø. Så hvordan holder vi styr på, hvad der analyseres af fanen Netværk? Ved at eksportere siden i HAR-format.

Hvad er en HAR-fil?

En HAR-fil (forkortelse for HTTP Archive) er en JSON-fil, der indeholder alle oplysninger om en browsers interaktion med en side. Det indeholder HTML-dokumentet og dets respektive JS- og CSS-filer.

Sammen med dette indhold indeholder en HAR-fil også alle overskriftsoplysninger og browserens metadata (det vil sige tidspunktet for hver anmodning).

Det er vigtigt at nævne her, at cookies og formulardata også vil blive logget i filen, så pas på ikke at medtage følsomme oplysninger (personlige oplysninger, adgangskoder, kreditkortnumre) under revision af sider.

Du skal også revidere sider i private vinduer, hvilket undgår browserudvidelser. Det er vigtigt at undgå en browsers udvidelser, da de kan ændre indlæsningstiderne på en side.

Generering af HAR-filer

Google Chrome

  • Luk alle inkognitovinduer i Google Chrome.
  • Åbn et nyt inkognitovindue i Google Chrome.
  • Gå til Vis> Udvikler> Udviklerværktøjer.
  • I fanen Udviklerværktøjer skal du vælge fanen Netværk.
  • Marker afkrydsningsfelterne Bevar log og Deaktiver cache for at registrere alle interaktioner.
  • Opdater siden.
  • Klik på Eksporter HAR (ikonet pil ned) for at eksportere HAR-filen.
  • Gem HAR-filen.

Firefox

  • Luk alle private vinduer i Firefox.
  • Åbn et nyt privat vindue i Firefox.
  • Gå til Værktøjer> Udvikler> Netværk eller ctrl-shift-E.
  • Opdater siden.
  • I Gem tandhjulsikonet (øverst til højre på siden) skal du vælge Gem alt som Har.
  • Gem HAR-filen.
Fanen Firefox-netværk

Safari

  • Sørg for, at afkrydsningsfeltet Vis udviklingsmenu i menulinjen er markeret under Safari> Indstillinger> Avanceret.
  • Vælg Filer> Åbn nyt privat vindue.
  • Besøg den webside, hvor problemet opstår.
  • Vælg Udvikl> Vis webinspektør. Webinspektørvinduet vises.
  • Opdater siden.
  • Klik på Eksporter øverst til højre i ruden.
  • Gem HAR-filen.
Fanen Safari-netværk

Læsning af HAR-filer

Når du har en HAR-fil, kan du prøve et par HAR-seere online. Min personlige favorit er den, der er oprettet af Jan Odavarko.

HAR Viewer

Det, jeg især kan lide ved denne seer, er, at du kan have flere filer åbne på samme tid, hvilket gør det lettere at sammenligne dem.

Brug af HAR-filer til at analysere ydeevnen på en side

HAR-filer kan være nyttige til at indsamle oplysninger om en sides aktiver. Da du har detaljerede oplysninger om deres indhold, kan du sammenligne, hvad der er forbedret (eller i nogle tilfælde ikke forbedret), efter at en ny funktion er lanceret, eller f.eks. Et redesign er afsluttet.

I løbet af min arbejdsgang kan jeg holde øje med den endelige størrelse / tidsværdi for et par sider af det produkt, som jeg arbejder på.

Mere information

  • Mål ressourceindlæsningstider
  • HAR Viewer kildekode

Også sendt på min blog. Hvis du kan lide dette indhold, skal du følge mig på Twitter og GitHub. Forsidebillede af William Daigneault / Unsplash