Á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

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

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

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)

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

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ő

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

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ő

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.onloadesemé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ő

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.