⭐ 0
🔍
Teksti Kuva PDF & Docs Ääni Musiikki Elektroniikka Aika Apuohjelmat Validaattorit Esoteerinen Pelit

HAR-tiedoston ajoituskaavioanalyysi

Lataa selaimen DevTools-työkaluista viety .har-tiedosto nähdäksesi todellisen pyyntöjen ajoituskaavion, joka perustuu jokaisen pyynnön omiin ajoitustietoihin, sekä tarkistukset puuttuvien välimuistiasetusten, pakkaamattomien vastausten ja renderöinnin estävien skriptien varalta.

🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.

Vedä ja pudota tiedosto tähän tai selaa napsauttamalla

Vie HAR-tiedosto selaimesi DevTools-työkalujen Verkko-välilehdeltä (napsauta pyyntöluetteloa hiiren kakkospainikkeella → "Tallenna kaikki HAR-muodossa sisältöineen") ja pudota se tähän. Kaikki jäsennetään ja renderöidään paikallisesti — tiedostoa ei koskaan lähetetä minnekään.

Käsitellään... 0%
Jäsennetään HAR-tiedostoa
Rakennetaan ajoituskaaviota
Analysoidaan pyyntöjä
Valmis

Tulos

HAR-tiedosto (HTTP Archive) on JSON-muotoinen vienti kaikesta, mitä selaimen DevTools-työkalujen Verkko-välilehti tallensi sivun latauksen aikana: jokaisen pyynnön ja vastauksen otsikot, kunkin vastauksen tarkka koko ja MIME-tyyppi sekä pyyntökohtainen ajoituksen erittely. Voit luoda sellaisen Chromella, Firefoxilla, Edgellä tai Safarilla avaamalla DevTools-työkalut, lataamalla sivun uudelleen Verkko-välilehdellä ja napsauttamalla hiiren kakkospainikkeella pyyntöluetteloa ja valitsemalla "Tallenna kaikki HAR-muodossa sisältöineen". Tämä työkalu lukee kyseisen tiedoston suoraan — mitään ei haeta tai pyydetä uudelleen.

Ajoituskaavio rakennetaan täysin tiedoston sisältämästä datasta: kunkin kohteen ajoitusobjekti jakaa pyynnön vaiheisiin: esto, DNS-haku, yhteys, SSL/TLS-neuvottelu, lähetys, odotus (ensimmäisen tavun aika) ja vastaanotto. Jokainen vaihe piirretään omana väritettynä segmenttinä. HAR-määrittelyn mukaisesti SSL-aika sisältyy yhteysvaiheeseen, joten se vähennetään ensin pois — muuten TLS-osuus laskettaisiin kahteen kertaan, eivätkä palkkien leveydet vastaisi pyynnön todellista kestoa. Katkoviivaiset pystymerkit näyttävät DOMContentLoaded- ja Load-ajankohdat, jotka luetaan suoraan tiedoston omista sivun ajoitustiedoista, joten näet tarkalleen, mitkä pyynnöt valmistuivat ennen kuin sivu oli vuorovaikutteinen.

Kaavion lisäksi työkalu suorittaa kolme löydössääntöä kentille, jotka HAR-muoto jo tallentaa. Se merkitsee välimuistiin sopivat vastaukset (tilakoodit 200, 203 tai 206), joista puuttuu sekä Cache-Control- että Expires-otsikko, mikä tarkoittaa, että ne on ladattava uudelleen tyhjästä seuraavalla vierailulla. Se merkitsee tekstipohjaiset vastaukset — kuten HTML, CSS, JavaScript, JSON, SVG ja vastaavat — jotka ovat yli 1 kt ja jotka on lähetetty ilman Content-Encoding-otsikkoa, mikä on helppo pakkausmahdollisuus, jonka useimmat palvelimet voivat ottaa käyttöön yhdellä asetusrivillä. Lisäksi se merkitsee CSS- tai JavaScript-pyynnöt, jotka alkoivat ennen sivun omaa DOMContentLoaded-ajankohtaa — klassinen merkki renderöinnin estävästä resurssista.

Kaikki tämä tapahtuu datalla, joka on jo lataamassasi tiedostossa — ei verkkoyhteyttä, ei ulkoista hakupalvelua eikä alkuperäisen sivun uudelleenhakua. HAR-tiedosto luetaan, jäsennetään ja renderöidään täysin selaimen välilehdellä, eikä sitä koskaan lähetetä minnekään.

Nautitko tästä työkalusta? Onko tämä tuote mielestäsi hyödyllinen? Näetkö siinä potentiaalia ja haluat tukea sitä?

🛡️
Suoritetaan selaimessa

Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely tapahtuu täysin offline-tilassa. 100 % turvallista.

Hyväksytyt muodot ja säännöt

  • Canvas-pohjainen pyyntöjen ajoituskaavio, väritettynä ajoitusvaiheittain. Mukana DOMContentLoaded- ja Load-merkinnät.
  • Kolme sääntöpohjaista löydösryhmää: puuttuvat välimuistiasetukset, pakkaamattomat tekstivastaukset ja renderöinnin estävät ehdokkaat.
  • Täysin offline: ladattu .har-tiedosto jäsennetään ja analysoidaan täysin selaimessasi — mitään ei lähetetä minnekään.

Keskeiset hyödyt

✓ Aito ajoituskaavio todellisista mittauksista: jokainen palkki piirretään suoraan pyynnön omista vaiheista — esto, DNS, yhteys, SSL, lähetys, odotus ja vastaanotto. Mitään ei arvioida tai mitata uudelleen.
✓ Puuttuvien välimuistiasetusten tunnistin: merkitsee vastaukset tilakoodeilla 200, 203 ja 206, jotka lähetettiin ilman Cache-Control- tai Expires-otsikkoa, jolloin ne haetaan turhaan uudestaan toistuvilla vierailuilla.
✓ Pakkaamattomien vastausten löytäjä: merkitsee yli 1 kt:n tekstipohjaiset vastaukset, jotka on lähetetty ilman Content-Encoding-otsikkoa — yleinen ja helppo pakkaushyöty.
✓ Renderöinnin estävät ehdokkaat: ristiin vertaa CSS- ja JavaScript-pyyntöjä sivun omaan DOMContentLoaded-ajankohtaan ja merkitsee tyylitiedostot ja skriptit, jotka haettiin ennen sivun renderöitymistä.

Käyttötapaukset

  • • Selvitä, miksi sivu tuntuu hitaalta lataamalla sen .har-vientitiedosto ja tarkastelemalla todellisia pyyntökohtaisia ajoitustietoja ruuduntallenteesta arvaamisen sijaan.
  • • Tarkista sivuston välimuististrategia etsimällä kaikki vastaukset, joista puuttuu Cache-Control- tai Expires-otsake ja jotka ladataan uudelleen jokaisella toistuvalla käynnillä.
  • • Paikanna hahmontamisen estävä CSS tai JavaScript ennen täysimittaista suorituskykyauditointia tarkistamalla, mitkä pyynnöt käynnistyivät ennen DOMContentLoaded-tapahtumaa tallennetussa HAR-tiedostossa.