Áttekintés
A következő böngésző időzítéseket átszerveztük a GTmetrix jelentések Teljesítmény lapjára.
Korábban ezek az időzítések a régi jelentések Időzítések lapján voltak megtalálhatók (a PageSpeed/YSlow fokozatokkal).
Ebben a cikkben megtalálja az egyes böngésző-időzítések definícióit, valamint azt, hogy ezek hogyan kapcsolódnak az oldal teljesítményéhez.
Átirányítás időtartama
![](https://i0.wp.com/gtmetrix.com/blog/wp-content/uploads/2020/09/gtmetrix-browser-timing-redirect-duration-min.png?resize=520%2C250&ssl=1)
Ez az URL-ek átirányításával töltött idő a végső HTML-oldal betöltése előtt. A gyakori átirányítások a következők:
- Átirányítás nem www-ről www-re (pl. example.com a www.example.com oldalra)
- Átirányítás egy biztonságos URL-re (pl. http://-ről https://-re)
- Átirányítás a cookie-k beállításához
- Átirányítás a webhely mobil verziójára
Egyes webhelyek akár több átirányítási láncot is végrehajthatnak (pl. nem www-ről www-re, majd biztonságos URL-re). Ez az időzítés az átirányítással eltöltött összes idő összege, vagy 0, ha nem történt átirányítás.
A Waterfall Chart-ban az átirányítási időtartam a teszt kezdetétől az utolsó HTML-oldal kérésének megkezdéséig tartó időből áll (amikor megkapjuk az első 200 OK választ).
Ez idő alatt a böngésző képernyője üres! Ügyeljen arra, hogy ez az időtartam rövid legyen az átirányítások lehető legkisebbre csökkentésével.
További információ az átirányításokról az ellenőrzési dokumentációban található .
Csatlakozás időtartama
![](https://i0.wp.com/gtmetrix.com/blog/wp-content/uploads/2020/09/gtmetrix-browser-timing-connect-duration-min.png?resize=520%2C250&ssl=1)
Ha az átirányítások befejeződtek, a rendszer méri a kapcsolat időtartamát. Ez az az idő, ameddig a szerverhez csatlakozva kérést küld az oldalra.
Technikailag ez az időtartam a blokkolási idő, a DNS-idő, a csatlakozási idő és a kérés küldési idejének kombinációja (nem csak a csatlakozási idő).
Ezeket az összetevőket egyetlen kapcsolati időtartamban egyesítettük a dolgok egyszerűsítése érdekében (mivel ezek az idők általában kicsik).
A Waterfall Chart-ban a kapcsolat időtartama mindent tartalmaz, egészen az utolsó HTML-oldal kérés „Küldés” idejéig (az első 200 OK válasz).
Ez idő alatt a böngésző képernyője továbbra is üres! Különféle okok közrejátszhatnak ebben, például a tesztszerver és a hely közötti lassú/problémás kapcsolat, vagy a webhely lassú válaszideje.
Háttérrendszer időtartama
![](https://i0.wp.com/gtmetrix.com/blog/wp-content/uploads/2020/09/gtmetrix-browser-timing-backend-duration.png?resize=520%2C250&ssl=1)
Miután a kapcsolat létrejött és a kérés megtörtént, a szervernek választ kell generálnia az oldalhoz. A válasz generálásához szükséges időt háttérrendszer időtartamának nevezzük.
A vízesés diagramon a háttér időtartama az oldalkérés lila várakozási idejéből áll.
Számos oka lehet annak, hogy a háttérprogram időtartama lassú lehet. Ezt a „ Miért lassú az oldalam? ” cikk.
Idő az első bájtig (TTFB)
![](https://i0.wp.com/gtmetrix.com/blog/wp-content/uploads/2020/09/gtmetrix-browser-timing-ttfb-min-1.png?resize=520%2C250&ssl=1)
Az első bájtig eltelt idő (TTFB) a kérés kezdetétől a válasz első bájtjának kézhezvételéig eltelt teljes időtartam.
Ez az „Átirányítási időtartam” + „Kapcsolat időtartama” + „Háttéridőtartam” összege. Ez a mutató a webes teljesítmény egyik legfontosabb mutatója.
A vízesés diagramon a teszt kezdetétől az oldalkérelem beérkezéséig mérik, és a narancssárga vonal jelzi.
A TTFB fejlesztésének néhány módja: az alkalmazáskód optimalizálása, a gyorsítótárazás megvalósítása, a webszerver konfigurációjának finomhangolása vagy a szerver hardverének frissítése.
Tudjon meg többet erről az időzítésről az ellenőrzési dokumentációnkban .
Első festék
![](https://i0.wp.com/gtmetrix.com/blog/wp-content/uploads/2020/09/gtmetrix-browser-timing-first-paint-min-1.png?resize=520%2C250&ssl=1)
A First Paint az első pont, ahol a böngésző bármilyen megjelenítést végez az oldalon.
Az oldal szerkezetétől függően ez a First Paint csak a háttérszínt jeleníti meg (beleértve a fehéret is), vagy az oldal nagy részét is megjelenítheti.
A vízesés diagramon a zöld vonal jelöli.
Ennek az időzítésnek azért van jelentősége, mert eddig a pontig a böngésző csak egy üres oldalt jelenített meg, és ez a változás jelzi a felhasználónak, hogy az oldal betöltődik.
Azt azonban nem tudjuk, hogy az oldal mekkora részét jelenítették meg ezzel a festékkel, így a korai First Paint nem feltétlenül jelenti az oldal gyors betöltését.
Ha a böngésző nem végez festést (azaz a html üres oldalt eredményez), akkor előfordulhat, hogy a festési időzítések hiányoznak.
Végül a First Paint nem túl hasznos a gyors teljesítmény jelzéseként, mivel a First Paint gyakran egy háttérszín vagy grafikus elem, amely nem nyújt hasznosságot a felhasználó számára.
Jobb időzítés a First Contentful Paint , amikor a tartalom első eleme (jellemzően szöveg, címsor, kép) megfestésre kerül.
DOM interaktív idő
![](https://i0.wp.com/gtmetrix.com/blog/wp-content/uploads/2020/09/gtmetrix-browser-timing-dom-interactive-min-1.png?resize=520%2C250&ssl=1)
A DOM interaktív ideje az a pont, amikor a böngésző befejezte a HTML betöltését és elemzését, és elkészült a DOM (Document Object Model) fa.
A DOM az, ahogyan a böngésző belsőleg strukturálja a HTML-t, hogy képes legyen megjeleníteni.
A DOM interaktív ideje nincs megjelölve a vízesés diagramon, mivel általában nagyon közel van a DOM tartalom betöltésének idejéhez.
DOM-tartalom betöltésének ideje
![](https://i0.wp.com/gtmetrix.com/blog/wp-content/uploads/2020/09/gtmetrix-browser-timing-dom-loaded.png?resize=520%2C250&ssl=1)
A DOM tartalom betöltési ideje (röviden DOM betöltött vagy DOM Ready) az a pont, amikor a DOM készen áll (azaz DOM interaktív), és nincsenek stíluslapok, amelyek blokkolják a JavaScript végrehajtását.
Ha nincsenek stíluslapok, amelyek blokkolják a JavaScript végrehajtását, és nincs értelmező, amely blokkolja a JavaScriptet, akkor ez megegyezik a DOM interaktív idővel.
A vízesés diagramon a kék vonal jelöli.
A zárójelben lévő idő a DOM Content Loaded esemény által kiváltott JavaScript végrehajtásával eltöltött idő.
Mivel ezt az eseményt sok JavaScript-keretrendszer gyakran használja kiindulópontként, és az esemény késései késleltetést jelenthetnek a megjelenítésben, fontos, hogy megbizonyosodjon arról, hogy a stílus és a szkriptek sorrendje optimalizálva van, és a JavaScript elemzését elhalasztja.
Betöltési idő
![](https://i0.wp.com/gtmetrix.com/blog/wp-content/uploads/2020/09/gtmetrix-browser-timing-onload-min-1.png?resize=520%2C250&ssl=1)
Betöltési idő akkor következik be, amikor az oldal feldolgozása befejeződött, és az oldalon lévő összes erőforrás (képek, CSS stb.) letöltése befejeződött.
Ez egyben az idő, amikor a DOM befejeződik, és a JavaScript window.onload
esemény aktiválódik.
Vegye figyelembe, hogy előfordulhat olyan JavaScript, amely további erőforrásokra vonatkozó kéréseket kezdeményez, ezért a Fully Load Time előnyben részesítendő.
A vízesés diagramon a piros vonal jelöli.
A zárójelben lévő idő az Onload esemény által kiváltott JavaScript végrehajtásával töltött idő.
Ne feledje, hogy a Betöltési idő volt a korábbi alapértelmezett érték arra vonatkozóan, hogy mikor kell leállítani a tesztet 2017. február 8. előtt.
Teljesen betöltött idő
![](https://i0.wp.com/gtmetrix.com/blog/wp-content/uploads/2020/09/gtmetrix-browser-timing-fully-loaded-min.png?resize=520%2C250&ssl=1)
A Teljesen betöltött idő az a pont, amikor a következők megtörténtek:
- Az első Contentful Paint kirúgott
- Az Onload kirúgott
- A hálózat és a CPU tétlen (5,25 s)
A régi jelentések esetében a Teljesen betöltött idő mérése akkor történik, ha:
- Az Onload kirúgott
- A hálózat tétlen (2 mp)
Az Onload kirúgása után nehéz idők járnak a 30-as évekből.
Végül, ha a fenti feltételek teljesülnek, akkor a maximális időzítést vesszük:
- Első festék
- Az első tartalmas festék
- Betöltési idő
- A legnagyobb tartalmat tartalmazó festék
- Összes interaktív idő
- Az utolsó kérés rögzítve
Lényegében a GTmetrix megvárja, amíg az oldal leállítja az adatátvitelt, mielőtt elvégezné a tesztet, ami egyenletesebb oldalbetöltési időt eredményez.
A vízesés diagramon a lila vonal jelöli.
Lehetséges problémák merülhetnek fel az esemény használatával kapcsolatban, többek között:
- Várakozás az oldalkérések teljes leállítására, beleértve a hirdetéseket és a hajtás alatti elemeket is.
- Várakozás, amíg egy oldal befejezi a JavaScript végrehajtását.
Előfordulhat, hogy webhelye gyorsan betöltött a hajtás feletti tartalmat; mivel azonban az elemzés arra vár, hogy a teljes webhely leállítsa az adatok betöltését vagy a JavaScript futtatását, a jelentett Teljes betöltési idő hosszabb lehet.
Ez az oka annak, hogy a Teljes betöltési idő nem feltétlenül a legjobb mutatója a felhasználó által észlelt teljesítménynek, és inkább a 6 teljesítménymutató mutatójának optimalizálására kell összpontosítania .
Teljesen betöltött idő az örökölt jelentések számára
A régebbi jelentések másképpen határozzák meg a Teljes betöltési időt, mivel nem mérik az Interaktívig eltelt idő mutatót. A Fully Loaded Time itt azt a pontot jelenti, amely az Onload esemény aktiválása és 2 másodperces hálózati inaktivitás után következik be .
A különböző definíciók miatt észreveheti, hogy az örökölt jelentésben szereplő Teljes betöltési idő nem egyezik meg az új GTmetrix jelentésben szereplő Teljes betöltési idővel.
0 hozzászólás