Performance Timeline: Átfogó útmutató a metrikák gyűjtéséhez

A mai rohanó digitális világban a webhelyek teljesítménye kulcsfontosságú. A felhasználók elvárják, hogy a webhelyek gyorsan betöltődjenek és azonnal reagáljanak. Egy lassú webhely frusztrációhoz, elhagyott munkamenetekhez és végső soron bevételkieséshez vezethet. Szerencsére a modern webböngészők hatékony eszközöket kínálnak a webhelyek teljesítményének mérésére és elemzésére. Ezen eszközök közül az egyik legértékesebb a Performance Timeline API.

Ez az átfogó útmutató részletesen bemutatja a Performance Timeline API-t, lefedve mindent az alapvető fogalmaktól a teljesítménymérők gyűjtésének és elemzésének haladó technikáiig. Elmélyedünk a különböző teljesítménybejegyzés-típusokban, bemutatjuk, hogyan használható hatékonyan az API, és gyakorlati példákkal segítünk webhelye teljesítményének optimalizálásában.

Mi az a Performance Timeline API?

A Performance Timeline API egy JavaScript interfészekből álló készlet, amely hozzáférést biztosít a böngésző által gyűjtött teljesítménnyel kapcsolatos adatokhoz. Lehetővé teszi a fejlesztők számára, hogy a webhely teljesítményének különböző aspektusait mérjék, mint például:

• Oldalbetöltési idő
• Erőforrások betöltési ideje (képek, szkriptek, stíluslapok)
• Felhasználói időzítési mérések
• Képkockasebesség és renderelési teljesítmény
• Memóriahasználat

Ezen adatok gyűjtésével és elemzésével a fejlesztők azonosíthatják a teljesítmény szűk keresztmetszeteit és optimalizálásokat hajthatnak végre a felhasználói élmény javítása érdekében. Az API szabványosított módot biztosít a teljesítményadatokhoz való hozzáférésre, megkönnyítve a böngészőfüggetlen teljesítményfigyelő eszközök létrehozását.

Kulcsfontosságú fogalmak és interfészek

A Performance Timeline API néhány kulcsfontosságú fogalom és interfész köré épül:

• Performance Timeline: Egy weboldal élettartama alatt bekövetkezett teljesítményesemények idővonalát képviseli. Ez a központi pont a teljesítményadatok eléréséhez.
• Performance Entry: Egyetlen teljesítményeseményt képvisel, például egy erőforrás-betöltési eseményt vagy egy felhasználó által definiált időzítési mérést.
• Performance Observer: Lehetővé teszi a fejlesztők számára, hogy figyeljék a Performance Timeline-t az új teljesítménybejegyzésekre, és valós időben reagáljanak rájuk.
• `performance` objektum: A globális objektum (`window.performance`), amely hozzáférést biztosít a Performance Timeline-hoz és a kapcsolódó metódusokhoz.

A `performance` objektum

A `performance` objektum a kiindulópont a Performance Timeline API-val való interakcióhoz. Metódusokat biztosít a teljesítménybejegyzések lekérdezéséhez, az idővonal törléséhez és a teljesítményfigyelők létrehozásához. Néhány a leggyakrabban használt metódusok közül:

• `performance.getEntries()`: Visszaadja az idővonalon lévő összes teljesítménybejegyzést egy tömbben.
• `performance.getEntriesByName(name, entryType)`: Visszaadja a megadott névvel és bejegyzéstípussal rendelkező teljesítménybejegyzéseket egy tömbben.
• `performance.getEntriesByType(entryType)`: Visszaadja a megadott típusú teljesítménybejegyzéseket egy tömbben.
• `performance.clearMarks(markName)`: Törli a megadott nevű teljesítményjelölőket (mark).
• `performance.clearMeasures(measureName)`: Törli a megadott nevű teljesítményméréseket (measure).
• `performance.now()`: Nagy felbontású időbélyeget ad vissza, általában ezredmásodpercben, amely a navigáció kezdete óta eltelt időt jelöli. Ez kulcsfontosságú az időtartamok méréséhez.

Teljesítménybejegyzés-típusok

A Performance Timeline API többféle teljesítménybejegyzés-típust határoz meg, amelyek mindegyike egy adott típusú teljesítményeseményt képvisel. A legfontosabb bejegyzéstípusok közül néhány:

• `navigation`: Az oldalbetöltés navigációs időzítését képviseli, beleértve a DNS-lekérdezést, a TCP-kapcsolatot, a kérés és a válasz idejét.
• `resource`: Egy adott erőforrás, például kép, szkript vagy stíluslap betöltését képviseli.
• `mark`: Egy felhasználó által definiált időbélyeget képvisel az idővonalon.
• `measure`: Egy felhasználó által definiált időtartamot képvisel az idővonalon, amelyet két jelölő (mark) között számítanak ki.
• `paint`: Azt az időt képviseli, amíg a böngésző megjeleníti az első tartalmat a képernyőn (First Paint) és az első jelentéssel bíró tartalmat (First Contentful Paint).
• `longtask`: Azokat a feladatokat képviseli, amelyek hosszabb ideig (jellemzően 50 ms-nál tovább) blokkolják a fő szálat, ami a felhasználói felület akadozását okozhatja.
• `event`: Egy böngészőeseményt képvisel, például egérkattintást vagy billentyűlenyomást.
• `layout-shift`: Az oldal elrendezésében bekövetkező váratlan elmozdulásokat képviseli, amelyek megzavarhatják a felhasználói élményt (Cumulative Layout Shift).
• `largest-contentful-paint`: Azt az időt képviseli, amíg a nézetablakban lévő legnagyobb tartalmi elem láthatóvá válik.

Teljesítménymérők gyűjtése

Többféle módon gyűjthetünk teljesítménymérőket a Performance Timeline API segítségével. A leggyakoribb megközelítések a következők:

• Bejegyzések közvetlen lekérdezése az idővonalról: A `performance.getEntries()`, `performance.getEntriesByName()` vagy `performance.getEntriesByType()` használatával konkrét teljesítménybejegyzések lekérése.
• Performance Observer használata: Az idővonal figyelése új bejegyzésekre és azokra való valós idejű reagálás.

Bejegyzések közvetlen lekérdezése

A legegyszerűbb módja a teljesítménymérők gyűjtésének a bejegyzések közvetlen lekérdezése az idővonalról. Ez hasznos adatok gyűjtésére egy adott esemény bekövetkezése után, például az oldal betöltődése vagy egy felhasználói interakció után.

Itt egy példa arra, hogyan lehet lekérdezni az összes erőforrás bejegyzést az idővonalról:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Ez a kód lekérdezi az összes "resource" típusú bejegyzést, és kiírja minden erőforrás nevét és időtartamát a konzolra.

Performance Observer használata

A Performance Observer lehetővé teszi, hogy valós időben figyelje a Performance Timeline-t új teljesítménybejegyzésekre és reagáljon rájuk. Ez különösen hasznos az adatok gyűjtésére, amint elérhetővé válnak, anélkül, hogy ismételten le kellene kérdezni az idővonalat.

Itt egy példa arra, hogyan használjunk Performance Observert az új erőforrás bejegyzések figyelésére:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Ez a kód létrehoz egy Performance Observert, amely a "resource" típusú új bejegyzéseket figyeli. Amikor egy új erőforrás bejegyzés kerül az idővonalra, az observer visszahívási funkciója lefut, és kiírja az erőforrás nevét és időtartamát a konzolra. Az `observer.observe()` metódus határozza meg, hogy az observer mely bejegyzéstípusokat figyelje.

Felhasználói időzítés mérése

A Performance Timeline API lehetővé teszi saját egyéni teljesítménymérők definiálását a `mark` és `measure` bejegyzéstípusok segítségével. Ez hasznos az alkalmazás specifikus részeinek végrehajtási idejének mérésére, például egy komponens renderelése vagy felhasználói bevitel feldolgozása.

A felhasználói időzítés méréséhez először létrehoz egy `mark`-ot a mérni kívánt szakasz kezdetének és végének jelölésére. Ezután létrehoz egy `measure`-t a két jelölő közötti időtartam kiszámításához.

Itt egy példa arra, hogyan mérjük meg egy komponens renderelési idejét:

            
performance.mark("component-render-start");

// Code to render the component

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Component render time: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Ez a kód két jelölőt, `component-render-start` és `component-render-end`, hoz létre a komponenst renderelő kód előtt és után. Ezután létrehoz egy `component-render-time` nevű mérést a két jelölő közötti időtartam kiszámításához. Végül lekéri a mérés bejegyzését az idővonalról, és kiírja az időtartamot a konzolra.

Teljesítménymérők elemzése

Miután összegyűjtötte a teljesítménymérőket, elemeznie kell őket a teljesítmény szűk keresztmetszeteinek azonosítása és az optimalizálások végrehajtása érdekében. Erre a célra több eszközt és technikát is használhat:

• Böngésző fejlesztői eszközök: A legtöbb modern webböngésző beépített fejlesztői eszközökkel rendelkezik, amelyek lehetővé teszik a teljesítményadatok vizualizálását és elemzését. Ezek az eszközök általában tartalmaznak egy Performance panelt, amely megmutatja a teljesítményesemények idővonalát, valamint eszközöket a JavaScript kód profilozásához és a memóriahasználat elemzéséhez.
• Teljesítményfigyelő eszközök: Számos harmadik féltől származó teljesítményfigyelő eszköz létezik, amelyek segíthetnek a teljesítményadatok gyűjtésében, elemzésében és vizualizálásában. Ezek az eszközök gyakran kínálnak haladó funkciókat, mint például valós idejű monitorozás, anomáliadetektálás és automatizált jelentéskészítés. Példák: New Relic, Datadog és Sentry.
• Web Vitals: A Google Web Vitals kezdeményezése olyan metrikákat határoz meg, amelyek elengedhetetlenek a felhasználói élmény méréséhez. Ezek a metrikák magukban foglalják a Largest Contentful Paint (LCP), First Input Delay (FID) és Cumulative Layout Shift (CLS) mutatókat. Ezen metrikák figyelése segíthet az általános teljesítményproblémák azonosításában és kezelésében.

Böngésző fejlesztői eszközök használata

A böngésző fejlesztői eszközei hatékony és könnyen elérhető erőforrások a teljesítmény elemzéséhez. Így használhatja a Performance panelt a Chrome Fejlesztői Eszközökben (más böngészőkben is vannak hasonló funkciók):

1. Fejlesztői Eszközök megnyitása: Kattintson jobb gombbal a weboldalon, és válassza az "Inspect" (Vizsgálat) lehetőséget, vagy nyomja meg az F12 billentyűt.
2. Navigálás a Performance panelre: Kattintson a "Performance" fülre.
3. Felvétel indítása: Kattintson a felvétel gombra (általában egy kör) a teljesítményadatok rögzítésének megkezdéséhez.
4. Interakció az oldallal: Végezze el az elemezni kívánt műveleteket, például az oldal betöltését, gombokra kattintást vagy görgetést.
5. Felvétel leállítása: Kattintson a stop gombra a felvétel befejezéséhez.
6. Idővonal elemzése: A Performance panel megjeleníti a teljesítményesemények idővonalát, beleértve a betöltési időket, a JavaScript végrehajtást, a renderelést és a festést.

Az idővonal részletes információkat nyújt minden eseményről, beleértve annak időtartamát, kezdési idejét és más eseményekkel való kapcsolatát. Nagyíthat és kicsinyíthet, szűrhet eseménytípus szerint, és megvizsgálhatja az egyes eseményeket további információkért. A "Bottom-Up", "Call Tree" és "Event Log" fülek különböző nézőpontokat kínálnak az adatokra, lehetővé téve a teljesítmény szűk keresztmetszeteinek azonosítását és a kód optimalizálását.

Web Vitals: A felhasználói élmény mérése

A Web Vitals a Google által meghatározott metrikák összessége, amelyek a webhely felhasználói élményét mérik. Ezen metrikákra való összpontosítás jelentősen javíthatja a felhasználói elégedettséget és a SEO rangsorolást.

• Largest Contentful Paint (LCP): Azt az időt méri, amíg a nézetablakban lévő legnagyobb tartalmi elem láthatóvá válik. A jó LCP érték 2,5 másodperc vagy kevesebb.
• First Input Delay (FID): Azt az időt méri, amíg a böngésző reagál az első felhasználói interakcióra (pl. gombra kattintás vagy linkre koppintás). A jó FID érték 100 ezredmásodperc vagy kevesebb.
• Cumulative Layout Shift (CLS): Az oldalon bekövetkező váratlan elrendezés-elcsúszások mértékét méri. A jó CLS érték 0,1 vagy kevesebb.

A Web Vitals mutatókat különböző eszközökkel mérheti, többek között:

• Chrome User Experience Report (CrUX): Valós teljesítményadatokat szolgáltat webhelyekről anonimizált Chrome felhasználói adatok alapján.
• Lighthouse: Egy automatizált eszköz, amely auditálja a weboldalak teljesítményét, hozzáférhetőségét és SEO-ját.
• Web Vitals Extension: Egy Chrome bővítmény, amely valós időben jeleníti meg a Web Vitals metrikákat böngészés közben.
• PerformanceObserver API: Közvetlenül rögzítheti a web vitals adatokat a böngészőből, amint az események megtörténnek.

Gyakorlati példák és felhasználási esetek

Íme néhány gyakorlati példa és felhasználási eset, hogyan használhatja a Performance Timeline API-t webhelye teljesítményének optimalizálására:

• Lassan betöltődő erőforrások azonosítása: Használja a `resource` bejegyzéstípust a hosszú betöltési idővel rendelkező képek, szkriptek és stíluslapok azonosítására. Optimalizálja ezeket az erőforrásokat tömörítéssel, Content Delivery Network (CDN) használatával vagy lazy-loading (késleltetett betöltés) alkalmazásával. Például sok e-kereskedelmi platform, mint a Shopify, a Magento vagy a WooCommerce képekre támaszkodik a termékek eladásához. A képek betöltésének optimalizálása a performance timeline adatok alapján javítja a vásárlói élményt, különösen a mobil felhasználók számára.
• JavaScript végrehajtási idő mérése: Használja a `mark` és `measure` bejegyzéstípusokat a specifikus JavaScript függvények végrehajtási idejének mérésére. Azonosítsa a lassan futó függvényeket, és optimalizálja őket hatékonyabb algoritmusok használatával, eredmények gyorsítótárazásával vagy a végrehajtás későbbre halasztásával.
• Hosszú feladatok észlelése: Használja a `longtask` bejegyzéstípust azoknak a feladatoknak az azonosítására, amelyek hosszabb ideig blokkolják a fő szálat. Bontsa ezeket a feladatokat kisebb darabokra, vagy helyezze át őket egy háttérszálra a felhasználói felület akadozásának megelőzése érdekében.
• First Contentful Paint (FCP) és Largest Contentful Paint (LCP) monitorozása: Használja a `paint` és `largest-contentful-paint` bejegyzéstípusokat az első és a legnagyobb tartalom megjelenéséhez szükséges idő monitorozására. Optimalizálja a kritikus renderelési útvonalat ezen metrikák javítása érdekében.
• Cumulative Layout Shift (CLS) elemzése: Használja a `layout-shift` bejegyzéstípust a váratlan elrendezés-elcsúszásokat okozó elemek azonosítására. Foglaljon helyet ezeknek az elemeknek, vagy használja a `transform` tulajdonságot animálásukhoz anélkül, hogy elrendezés-elcsúszást okozna.

Haladó technikák

Miután szilárd alapokkal rendelkezik a Performance Timeline API használatában, felfedezhet néhány haladó technikát webhelye teljesítményének további optimalizálásához:

• Valós Felhasználói Monitorozás (RUM - Real User Monitoring): Gyűjtsön teljesítményadatokat valós felhasználóktól, hogy pontosabb képet kapjon webhelye teljesítményéről. Használjon RUM eszközt, vagy implementáljon saját egyéni RUM megoldást a Performance Timeline API segítségével. Ezeket az adatokat aztán fel lehet használni a regionális teljesítménykülönbségek meghatározására. Például egy USA-ban hosztolt webhely lassabb betöltési időket tapasztalhat Ázsiában a hálózati késleltetés miatt.
• Szintetikus Monitorozás: Használjon szintetikus monitorozást a felhasználói interakciók szimulálására és a teljesítmény mérésére egy ellenőrzött környezetben. Ez segíthet a teljesítményproblémák azonosításában, mielőtt azok a valós felhasználókat érintenék.
• Automatizált Teljesítménytesztelés: Integrálja a teljesítménytesztelést a folyamatos integrációs/folyamatos telepítési (CI/CD) folyamatába a teljesítményregressziók automatikus észleléséhez. Az olyan eszközök, mint a Lighthouse CI, használhatók ennek a folyamatnak az automatizálására.
• Teljesítményköltségvetés (Performance Budgeting): Állítson be teljesítményköltségvetést a kulcsfontosságú metrikákra, mint például az oldalbetöltési idő, az erőforrásméret és a JavaScript végrehajtási idő. Használjon automatizált eszközöket ezen költségvetések figyelésére, és kapjon riasztást, ha túllépik őket.

Böngészők közötti kompatibilitás

A Performance Timeline API-t széles körben támogatják a modern webböngészők, beleértve a Chrome-ot, a Firefoxot, a Safarit és az Edge-et. Azonban lehetnek különbségek az API implementációjában és viselkedésében a különböző böngészők között.

A böngészők közötti kompatibilitás biztosítása érdekében fontos, hogy tesztelje a kódját különböző böngészőkben, és használjon funkciódetektálást a funkcionalitás kecses lerontásához, ha az API nem támogatott. Az olyan könyvtárak, mint a `modernizr`, segíthetnek a funkciódetektálásban.

Bevált gyakorlatok

Íme néhány bevált gyakorlat a Performance Timeline API használatához:

• Használjon Performance Observereket valós idejű monitorozáshoz: A Performance Observerek hatékonyabb módot kínálnak a teljesítményadatok gyűjtésére, mint az idővonal ismételt lekérdezése.
• Legyen tudatában a teljesítményadatok gyűjtésének teljesítményre gyakorolt hatásával: A túl sok adat gyűjtése negatívan befolyásolhatja webhelye teljesítményét. Csak a szükséges adatokat gyűjtse, és kerülje a költséges műveleteket a Performance Observer visszahívási funkciójában.
• Használjon értelmes neveket a jelölőkhöz és mérésekhez: Ez megkönnyíti az adatok elemzését és a teljesítmény szűk keresztmetszeteinek azonosítását.
• Tesztelje a kódját különböző böngészőkben: Biztosítsa a böngészők közötti kompatibilitást a kód tesztelésével különböző böngészőkben és funkciódetektálás használatával.
• Kombinálja más optimalizálási technikákkal: A Performance Timeline API segít a problémák mérésében és azonosításában. Használja együtt a bevált weboptimalizálási gyakorlatokkal (képoptimalizálás, minifikálás, CDN használat) a holisztikus teljesítményjavulás érdekében.

Összegzés

A Performance Timeline API egy hatékony eszköz a webhelyek teljesítményének mérésére és elemzésére. Az API kulcsfontosságú fogalmainak és interfészeinek megértésével értékes teljesítménymérőket gyűjthet, és felhasználhatja őket a teljesítmény szűk keresztmetszeteinek azonosítására és optimalizálások végrehajtására. A Web Vitalsra való összpontosítással és olyan haladó technikák, mint a RUM és az automatizált teljesítménytesztelés bevezetésével gyorsabb, zökkenőmentesebb és élvezetesebb felhasználói élményt nyújthat. A Performance Timeline API elsajátítása és a teljesítményelemzés integrálása a fejlesztési munkafolyamatba jelentős javulást eredményez webhelye teljesítményében és a felhasználói elégedettségben a mai teljesítményorientált webes környezetben.