Jõudluse ajajoon: põhjalik juhend mõõdikute kogumiseks

Tänapäeva kiires digitaalses maailmas on veebisaidi jõudlus ülimalt oluline. Kasutajad eeldavad, et veebisaidid laadivad kiiresti ja reageerivad koheselt. Aeglane veebisait võib põhjustada pettumust, poolelijäetud seansse ja lõppkokkuvõttes kaotatud tulu. Õnneks pakuvad kaasaegsed veebibrauserid võimsaid tööriistu veebisaidi jõudluse mõõtmiseks ja analüüsimiseks. Üks väärtuslikumaid neist tööriistadest on Performance Timeline API.

See põhjalik juhend uurib Performance Timeline API-d üksikasjalikult, käsitledes kõike alates selle põhimõistetest kuni täiustatud tehnikateni jõudlusmõõdikute kogumiseks ja analüüsimiseks. Süveneme erinevatesse jõudluskirjete tüüpidesse, demonstreerime, kuidas API-d tõhusalt kasutada, ja toome praktilisi näiteid, mis aitavad teil oma veebisaidi jõudlust optimeerida.

Mis on Performance Timeline API?

Performance Timeline API on JavaScripti liideste komplekt, mis pakub juurdepääsu brauseri kogutud jõudlusega seotud andmetele. See võimaldab arendajatel mõõta veebisaidi jõudluse erinevaid aspekte, näiteks:

• Lehe laadimisaeg
• Ressursside laadimisaeg (pildid, skriptid, stiililehed)
• Kasutaja ajastuse mõõtmised
• Kaadrisagedus ja renderdamise jõudlus
• Mälukasutus

Neid andmeid kogudes ja analüüsides saavad arendajad tuvastada jõudluse kitsaskohti ja rakendada optimeerimisi kasutajakogemuse parandamiseks. API pakub standardiseeritud viisi jõudlusandmetele juurdepääsemiseks, muutes brauseriteüleste jõudluse monitooringu tööriistade loomise lihtsamaks.

Põhimõisted ja liidesed

Performance Timeline API põhineb mõnel olulisel mõistel ja liidesel:

• Performance Timeline: Esindab veebilehe eluea jooksul toimunud jõudlussündmuste ajajoont. See on keskne punkt jõudlusandmetele juurdepääsemiseks.
• Performance Entry: Esindab ühte jõudlussündmust, näiteks ressursi laadimise sündmust või kasutaja määratud ajastuse mõõtmist.
• Performance Observer: Võimaldab arendajatel jälgida jõudluse ajajoonel uusi jõudluskirjeid ja neile reaalajas reageerida.
• performance objekt: Globaalne objekt (window.performance), mis pakub juurdepääsu jõudluse ajajoonele ja sellega seotud meetoditele.

performance objekt

performance objekt on lähtepunkt Performance Timeline API-ga suhtlemiseks. See pakub meetodeid jõudluskirjete hankimiseks, ajajoone tühjendamiseks ja jõudluse jälgijate loomiseks. Mõned kõige sagedamini kasutatavad meetodid on järgmised:

• performance.getEntries(): Tagastab massiivi kõigist ajajoonel olevatest jõudluskirjetest.
• performance.getEntriesByName(name, entryType): Tagastab massiivi kindla nime ja kirje tüübiga jõudluskirjetest.
• performance.getEntriesByType(entryType): Tagastab massiivi kindlat tüüpi jõudluskirjetest.
• performance.clearMarks(markName): Kustutab kindla nimega jõudlusmärgid.
• performance.clearMeasures(measureName): Kustutab kindla nimega jõudlusmõõtmised.
• performance.now(): Tagastab kõrge resolutsiooniga ajatempli, tavaliselt millisekundites, mis esindab navigeerimise algusest möödunud aega. See on kestuste mõõtmiseks ülioluline.

Jõudluskirjete tüübid

Performance Timeline API defineerib mitu erinevat tüüpi jõudluskirjet, millest igaüks esindab kindlat tüüpi jõudlussündmust. Mõned kõige olulisemad kirjetüübid on järgmised:

• navigation: Esindab lehe laadimise navigeerimisajastust, sealhulgas DNS-päringu, TCP-ühenduse, päringu ja vastuse aegu.
• resource: Esindab konkreetse ressursi, näiteks pildi, skripti või stiililehe laadimist.
• mark: Esindab kasutaja määratud ajatemplit ajajoonel.
• measure: Esindab kasutaja määratud kestust ajajoonel, mis on arvutatud kahe märgi vahel.
• paint: Esindab aega, mis kulub brauseril esimese sisu (First Paint) ja esimese tähendusliku sisu (First Contentful Paint) ekraanile kuvamiseks.
• longtask: Esindab ülesandeid, mis blokeerivad põhilõime pikemaks ajaks (tavaliselt kauem kui 50 ms), põhjustades potentsiaalselt kasutajaliidese hangumist.
• event: Esindab brauseri sündmust, näiteks hiireklõpsu või klahvivajutust.
• layout-shift: Esindab ootamatuid nihete lehe paigutuses, mis võivad häirida kasutajakogemust (Cumulative Layout Shift).
• largest-contentful-paint: Esindab aega, mis kulub vaateaknas suurima sisuelemendi nähtavaks muutumiseks.

Jõudlusmõõdikute kogumine

Performance Timeline API abil on jõudlusmõõdikute kogumiseks mitu viisi. Kõige levinumad lähenemisviisid on järgmised:

• Kirjete otse hankimine ajajoonelt: Kasutades performance.getEntries(), performance.getEntriesByName() või performance.getEntriesByType() konkreetsete jõudluskirjete hankimiseks.
• Performance Observeri kasutamine: Ajajoone jälgimine uute kirjete suhtes ja neile reaalajas reageerimine.

Kirjete otse hankimine

Lihtsaim viis jõudlusmõõdikute kogumiseks on hankida kirjed otse ajajoonelt. See on kasulik andmete kogumiseks pärast konkreetse sündmuse toimumist, näiteks pärast lehe laadimist või pärast seda, kui kasutaja on suhelnud konkreetse elemendiga.

Siin on näide, kuidas hankida kõik ressursikirjed ajajoonelt:

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

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

            

              
                Copy
              
            
          

See kood hangib kõik "resource" tüüpi kirjed ja logib iga ressursi nime ja kestuse konsooli.

Performance Observeri kasutamine

Performance Observer võimaldab teil jälgida jõudluse ajajoont uute jõudluskirjete osas ja neile reaalajas reageerida. See on eriti kasulik andmete kogumiseks nende kättesaadavaks muutumisel, ilma et peaks ajajoont korduvalt küsitlema.

Siin on näide, kuidas kasutada Performance Observerit uute ressursikirjete jälgimiseks:

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

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

            

              
                Copy
              
            
          

See kood loob Performance Observeri, mis kuulab uusi "resource" tüüpi kirjeid. Kui ajajoonele lisatakse uus ressursikirje, käivitatakse jälgija tagasikutsumisfunktsioon, mis logib ressursi nime ja kestuse konsooli. Meetod observer.observe() määrab, milliseid kirjetüüpe jälgija peaks jälgima.

Kasutaja ajastuse mõõtmine

Performance Timeline API võimaldab teil määratleda ka oma kohandatud jõudlusmõõdikuid, kasutades mark ja measure kirjetüüpe. See on kasulik rakenduse konkreetsete osade täitmiseks kuluva aja mõõtmiseks, näiteks komponendi renderdamiseks või kasutaja sisendi töötlemiseks.

Kasutaja ajastuse mõõtmiseks loote esmalt mark-i, et märkida mõõdetava jaotise algus ja lõpp. Seejärel loote measure-i, et arvutada kestus kahe märgi vahel.

Siin on näide, kuidas mõõta komponendi renderdamiseks kuluvat aega:

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

// Kood komponendi renderdamiseks

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(`Komponendi renderdamise aeg: ${measure.duration}ms`);

            

              
                Copy
              
            
          

See kood loob kaks märki, component-render-start ja component-render-end, enne ja pärast koodi, mis renderdab komponendi. Seejärel loob see mõõtmise nimega component-render-time, et arvutada kestus kahe märgi vahel. Lõpuks hangib see mõõtmiskirje ajajoonelt ja logib kestuse konsooli.

Jõudlusmõõdikute analüüsimine

Kui olete jõudlusmõõdikud kogunud, peate neid analüüsima, et tuvastada jõudluse kitsaskohad ja rakendada optimeerimisi. Selleks otstarbeks saate kasutada mitmeid tööriistu ja tehnikaid:

• Brauseri arendaja tööriistad: Enamik kaasaegseid veebibrausereid pakub sisseehitatud arendaja tööriistu, mis võimaldavad teil jõudlusandmeid visualiseerida ja analüüsida. Need tööriistad sisaldavad tavaliselt jõudluspaneeli, mis näitab jõudlussündmuste ajajoont, samuti tööriistu JavaScripti koodi profileerimiseks ja mälukasutuse analüüsimiseks.
• Jõudluse monitooringu tööriistad: On palju kolmandate osapoolte jõudluse monitooringu tööriistu, mis aitavad teil jõudlusandmeid koguda, analüüsida ja visualiseerida. Need tööriistad pakuvad sageli täiustatud funktsioone, nagu reaalajas monitooring, anomaaliate tuvastamine ja automatiseeritud aruandlus. Näideteks on New Relic, Datadog ja Sentry.
• Web Vitals: Google'i Web Vitals algatus pakub mõõdikute komplekti, mida peetakse kasutajakogemuse mõõtmiseks hädavajalikuks. Nende mõõdikute hulka kuuluvad Largest Contentful Paint (LCP), First Input Delay (FID) ja Cumulative Layout Shift (CLS). Nende mõõdikute jälgimine aitab teil tuvastada ja lahendada levinud jõudlusprobleeme.

Brauseri arendaja tööriistade kasutamine

Brauseri arendaja tööriistad on võimas ja kergesti kättesaadav ressurss jõudluse analüüsimiseks. Siin on, kuidas saate kasutada Chrome'i arendaja tööriistade jõudluspaneeli (teistel brauseritel on sarnased funktsioonid):

1. Avage arendaja tööriistad: Paremklõpsake veebilehel ja valige "Inspekteeri" või vajutage F12.
2. Liikuge jõudluspaneelile: Klõpsake vahekaardil "Performance".
3. Alustage salvestamist: Klõpsake salvestusnuppu (tavaliselt ringikujuline), et alustada jõudlusandmete kogumist.
4. Suhelge lehega: Tehke toiminguid, mida soovite analüüsida, näiteks lehe laadimine, nuppudele klõpsamine või kerimine.
5. Lõpetage salvestamine: Salvestamise lõpetamiseks klõpsake stopp-nuppu.
6. Analüüsige ajajoont: Jõudluspaneel kuvab jõudlussündmuste ajajoone, sealhulgas laadimisajad, JavaScripti täitmise, renderdamise ja kuvamise.

Ajajoon pakub üksikasjalikku teavet iga sündmuse kohta, sealhulgas selle kestust, algusaega ja seost teiste sündmustega. Saate sisse ja välja suumida, sündmusi tüübi järgi filtreerida ja üksikuid sündmusi täpsema teabe saamiseks uurida. Vahekaardid "Bottom-Up", "Call Tree" ja "Event Log" pakuvad andmetele erinevaid vaatenurki, võimaldades teil tuvastada jõudluse kitsaskohti ja optimeerida oma koodi.

Web Vitals: kasutajakogemuse mõõtmine

Web Vitals on Google'i määratletud mõõdikute komplekt veebisaidi kasutajakogemuse mõõtmiseks. Nendele mõõdikutele keskendumine võib oluliselt parandada kasutajate rahulolu ja SEO-järjestust.

• Largest Contentful Paint (LCP): Mõõdab aega, mis kulub vaateaknas suurima sisuelemendi nähtavaks muutumiseks. Hea LCP skoor on 2,5 sekundit või vähem.
• First Input Delay (FID): Mõõdab aega, mis kulub brauseril esimesele kasutaja interaktsioonile reageerimiseks (nt nupule klõpsamine või lingile koputamine). Hea FID skoor on 100 millisekundit või vähem.
• Cumulative Layout Shift (CLS): Mõõdab lehel toimuvate ootamatute paigutuse nihete hulka. Hea CLS skoor on 0,1 või vähem.

Web Vitals mõõdikuid saate mõõta erinevate tööriistade abil, sealhulgas:

• Chrome User Experience Report (CrUX): Pakub reaalmaailma jõudlusandmeid veebisaitide kohta, mis põhinevad anonüümsetel Chrome'i kasutajaandmetel.
• Lighthouse: Automatiseeritud tööriist, mis auditeerib veebilehtede jõudlust, ligipääsetavust ja SEO-d.
• Web Vitals Extension: Chrome'i laiendus, mis kuvab Web Vitals mõõdikuid reaalajas veebi sirvimise ajal.
• PerformanceObserver API: Jäädvustage Web Vitals andmeid otse brauserist sündmuste toimumise hetkel.

Praktilised näited ja kasutusjuhud

Siin on mõned praktilised näited ja kasutusjuhud, kuidas saate Performance Timeline API-d oma veebisaidi jõudluse optimeerimiseks kasutada:

• Aeglaselt laadivate ressursside tuvastamine: Kasutage resource kirjetüüpi, et tuvastada pilte, skripte ja stiililehti, mille laadimine võtab kaua aega. Optimeerige neid ressursse, tihendades neid, kasutades sisuedastusvõrku (CDN) või laadides neid laisalt (lazy-loading). Näiteks paljud e-kaubanduse platvormid nagu Shopify, Magento või WooCommerce tuginevad toodete müümisel piltidele. Piltide laadimise optimeerimine jõudluse ajajoone andmete abil parandab kliendikogemust, eriti mobiilikasutajate jaoks.
• JavaScripti täitmisaja mõõtmine: Kasutage mark ja measure kirjetüüpe, et mõõta aega, mis kulub konkreetsete JavaScripti funktsioonide täitmiseks. Tuvastage aeglaselt töötavad funktsioonid ja optimeerige neid, kasutades tõhusamaid algoritme, vahemällu salvestamist või täitmise edasilükkamist hilisemale ajale.
• Pikkade ülesannete tuvastamine: Kasutage longtask kirjetüüpi, et tuvastada ülesandeid, mis blokeerivad põhilõime pikemaks ajaks. Jagage need ülesanded väiksemateks osadeks või viige need taustalõimele, et vältida kasutajaliidese hangumist.
• First Contentful Paint (FCP) ja Largest Contentful Paint (LCP) monitooring: Kasutage paint ja largest-contentful-paint kirjetüüpe, et jälgida aega, mis kulub esimese sisu ja suurima sisu ekraanile ilmumiseks. Nende mõõdikute parandamiseks optimeerige kriitilist renderdamisteed.
• Cumulative Layout Shift (CLS) analüüsimine: Kasutage layout-shift kirjetüüpi, et tuvastada elemente, mis põhjustavad ootamatuid paigutuse nihete. Reserveerige nendele elementidele ruumi või kasutage transform omadust nende animeerimiseks ilma paigutuse niheteta.

Täiustatud tehnikad

Kui teil on Performance Timeline API põhitõed selged, saate uurida mõningaid täiustatud tehnikaid oma veebisaidi jõudluse edasiseks optimeerimiseks:

• Reaalsete kasutajate monitooring (RUM): Koguge jõudlusandmeid reaalsetelt kasutajatelt, et saada täpsem pilt oma veebisaidi jõudlusest. Kasutage RUM-tööriista või rakendage oma kohandatud RUM-lahendus Performance Timeline API abil. Neid andmeid saab seejärel kasutada piirkondlike jõudluserinevuste kindlaksmääramiseks. Näiteks USA-s hostitud veebisait võib Aasias kogeda aeglasemaid laadimisaegu võrgu latentsuse tõttu.
• Sünteetiline monitooring: Kasutage sünteetilist monitooringut kasutaja interaktsioonide simuleerimiseks ja jõudluse mõõtmiseks kontrollitud keskkonnas. See aitab teil tuvastada jõudlusprobleeme enne, kui need mõjutavad reaalseid kasutajaid.
• Automatiseeritud jõudlustestid: Integreerige jõudlustestid oma pideva integratsiooni/pideva juurutamise (CI/CD) torustikku, et automaatselt tuvastada jõudluse regressioone. Selle protsessi automatiseerimiseks saab kasutada tööriistu nagu Lighthouse CI.
• Jõudluseelarved: Seadke võtmemõõdikutele, nagu lehe laadimisaeg, ressursi suurus ja JavaScripti täitmisaeg, jõudluseelarved. Kasutage automatiseeritud tööriistu nende eelarvete jälgimiseks ja teavitamiseks, kui need ületatakse.

Brauseriteülene ühilduvus

Performance Timeline API on laialdaselt toetatud kaasaegsete veebibrauserite poolt, sealhulgas Chrome, Firefox, Safari ja Edge. Siiski võib API rakendamisel ja käitumisel olla erinevates brauserites mõningaid erinevusi.

Brauseriteülese ühilduvuse tagamiseks on oluline testida oma koodi erinevates brauserites ja kasutada funktsioonide tuvastamist, et funktsionaalsust graatsiliselt vähendada, kui API-d ei toetata. Funktsioonide tuvastamisel võivad abiks olla teegid nagu `modernizr`.

Parimad praktikad

Siin on mõned parimad praktikad Performance Timeline API kasutamiseks:

• Kasutage Performance Observerseid reaalajas monitooringuks: Performance Observerid pakuvad tõhusamat viisi jõudlusandmete kogumiseks kui ajajoone korduv küsitlemine.
• Olge teadlik jõudlusandmete kogumise mõjust jõudlusele: Liiga paljude andmete kogumine võib teie veebisaidi jõudlust negatiivselt mõjutada. Koguge ainult vajalikke andmeid ja vältige kulukate operatsioonide teostamist Performance Observeri tagasikutsumisfunktsioonis.
• Kasutage märkide ja mõõtmiste jaoks tähendusrikkaid nimesid: See muudab andmete analüüsimise ja jõudluse kitsaskohtade tuvastamise lihtsamaks.
• Testige oma koodi erinevates brauserites: Tagage brauseriteülene ühilduvus, testides oma koodi erinevates brauserites ja kasutades funktsioonide tuvastamist.
• Kombineerige teiste optimeerimistehnikatega: Performance Timeline API aitab probleeme mõõta ja tuvastada. Kasutage seda koos väljakujunenud veebi optimeerimise parimate tavadega (piltide optimeerimine, minimeerimine, CDN-i kasutamine) terviklike jõudlusparanduste saavutamiseks.

Kokkuvõte

Performance Timeline API on võimas tööriist veebisaidi jõudluse mõõtmiseks ja analüüsimiseks. Mõistes API põhimõisteid ja liideseid, saate koguda väärtuslikke jõudlusmõõdikuid ja kasutada neid jõudluse kitsaskohtade tuvastamiseks ja optimeerimiste rakendamiseks. Keskendudes Web Vitals mõõdikutele ja rakendades täiustatud tehnikaid nagu RUM ja automatiseeritud jõudlustestid, saate pakkuda kiiremat, sujuvamat ja nauditavamat kasutajakogemust. Performance Timeline API omaksvõtmine ja jõudluse analüüsi integreerimine oma arendustöövoogu toob kaasa olulisi parandusi teie veebisaidi jõudluses ja kasutajate rahulolus tänapäeva jõudluspõhises veebikeskkonnas.