Veebi jõudluse avamine: põhjalik ülevaade Performance Observer API-st

Tänapäeva kiire tempoga digimaailmas ei ole veebi jõudlus luksus, vaid vajadus. Aeglane või reageerimatu veebisait võib põhjustada kasutajate frustratsiooni, kõrgemat põrkemäära ja otsest negatiivset mõju ärieesmärkidele, olgu selleks müük, reklaamitulu või kasutajate kaasamine. Aastaid on arendajad tuginenud tööriistadele, mis mõõdavad jõudlust ühel ajahetkel, tavaliselt lehe esialgsel laadimisel. Kuigi see on kasulik, jätab see lähenemisviis vahele loo olulise osa: kasutaja kogu kogemuse lehega suhtlemisel. Siin tuleb mängu reaalajas jõudluse jälgimine ja selle kõige võimsam tööriist on Performance Observer API.

Traditsioonilised meetodid hõlmavad sageli jõudlusandmete küsimist funktsioonidega nagu performance.getEntries(). See võib olla ebatõhus, võib vahele jätta olulisi sündmusi, mis toimuvad küsitluste vahel, ja võib isegi lisada jõudluse üldkulusid, mida see proovib mõõta. Performance Observer API muudab selle protsessi revolutsiooniliselt, pakkudes asünkroonset, madala üldkuluga mehhanismi jõudlussündmustele tellimiseks nende toimumisel. See juhend viib teid põhjalikult selle olulise API-ga tutvuma, näidates teile, kuidas kasutada selle võimsust Core Web Vitalsi jälgimiseks, kitsaskohtade tuvastamiseks ja lõppkokkuvõttes kiiremate ja nauditavamate veebikogemuste loomiseks ülemaailmsele publikule.

Mis on Performance Observer API?

Oma olemuselt on Performance Observer API liides, mis pakub võimalust jälgida ja koguda jõudlusmõõtmise sündmusi, mida tuntakse jõudluskirjetena. Mõelge sellele kui spetsiaalsele kuularile jõudlusega seotud tegevuste jaoks brauseris. Selle asemel, et teie aktiivselt brauserilt küsida: "Kas midagi on juba juhtunud?", ütleb brauser teile ennetavalt: "Just toimus uus jõudlussündmus! Siin on üksikasjad."

See saavutatakse vaatleja mustri kaudu. Loote vaatleja eksemplari, ütlete talle, millist tüüpi jõudlussündmustest olete huvitatud (nt suured värvid, kasutaja sisendid, paigutuse muutused) ja esitate tagasihelistamisfunktsiooni. Kui brauseri jõudluse ajaskaalal registreeritakse uut tüüpi sündmus, kutsutakse teie tagasihelistamisfunktsioon välja uute kirjete loendiga. See asünkroonne, tõukepõhine mudel on palju tõhusam ja usaldusväärsem kui vanem tõmbepõhine mudel, kus korduvalt kutsutakse performance.getEntries().

Vana viis vs. uus viis

Performance Observeri uuenduslikkuse hindamiseks võrrelgem kahte lähenemisviisi:

• Vana viis (küsitlemine): Võite kasutada setTimeout või requestAnimationFrame, et perioodiliselt kutsuda performance.getEntriesByName('my-metric'), et näha, kas teie mõõdik on registreeritud. See on problemaatiline, sest võite kontrollida liiga hilja ja sündmusest ilma jääda või kontrollida liiga sageli ja raisata CPU tsükleid. Samuti riskite brauseri jõudluse puhvri täitmisega, kui te kirjeid regulaarselt ei kustuta.
• Uus viis (vaatlemine): Sa seadistad PerformanceObserver üks kord. See istub vaikselt taustal, tarbides minimaalselt ressursse. Niipea, kui registreeritakse asjakohane jõudluskirje – olgu see siis üks millisekund pärast lehe laadimist või kümme minutit kasutaja sessiooni –, teavitatakse teie koodi kohe. See tagab, et te ei jäta kunagi ühtegi sündmust vahele ja teie jälgimiskood on võimalikult tõhus.

Miks peaksite kasutama Performance Observerit

Performance Observer API integreerimine oma arendustöövoogu pakub hulgaliselt eeliseid, mis on kriitilised kaasaegsetele veebirakendustele, mis sihivad ülemaailmset haaret.

• Mittepealetükkiv jälgimine: Vaatleja tagasihelistamine toimub tavaliselt tühjaperioodidel, tagades, et teie jõudluse jälgimise kood ei häiri kasutajakogemust ega blokeeri peamist lõime. See on loodud olema kerge ja sellel on tühine jõudluse jalajälg.
• Põhjalikud reaalajas andmed: Veeb on dünaamiline. Jõudlusprobleemid ei teki ainult laadimisajal. Kasutaja võib käivitada keeruka animatsiooni, laadida kerides rohkem sisu või suhelda raske komponendiga kaua pärast lehe esialgset lahendamist. Performance Observer jäädvustab need reaalajas sündmused, andes teile täieliku pildi kogu kasutaja seansist.
• Tulevikukindel ja standardiseeritud: See on W3C soovitatav standard jõudlusandmete kogumiseks. Uued jõudlusmõõdikud ja API-d on loodud sellega integreerimiseks, muutes selle jätkusuutlikuks ja tulevikku suunatud valikuks teie projektide jaoks.
• Real User Monitoring (RUM) alus: Et tõeliselt mõista, kuidas teie sait toimib kasutajate jaoks erinevates riikides, seadmetes ja võrgutingimustes, vajate andmeid tegelikest seanssidest. Performance Observer on ideaalne tööriist tugeva RUM-lahenduse loomiseks, võimaldades teil koguda olulisi mõõdikuid ja saata need analüüsiteenusesse agregeerimiseks ja analüüsiks.
• Kõrvaldab võidujooksud: Küsitlemisel võite proovida pääseda jõudluskirjele enne, kui see on registreeritud. Vaatleja mudel kõrvaldab selle võidujooksu täielikult, kuna teie kood käivitub alles pärast kirje kättesaadavaks muutumist.

Alustamine: Performance Observeri põhitõed

API kasutamine on lihtne. Protsess hõlmab kolme peamist sammu: vaatleja loomine, tagasihelistamise määratlemine ja vaatlejale öeldes, mida jälgida.

1. Vaatleja loomine tagasihelistamisega

Esiteks loote PerformanceObserver objekti, edastades sellele tagasihelistamisfunktsiooni. See funktsioon käivitatakse alati, kui tuvastatakse uusi kirjeid.

const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('Kirje tüüp:', entry.entryType); console.log('Kirje nimi:', entry.name); console.log('Algusaeg:', entry.startTime); console.log('Kestus:', entry.duration); } });

Tagasihelistamine saab PerformanceObserverEntryList objekti. Saate sellel loendil kutsuda getEntries() meetodi, et saada massiiv kõigist äsja vaadeldud jõudluskirjetest.

2. Konkreetsete kirjete tüüpide vaatlemine

Vaatleja ei tee midagi, kuni te talle ei ütle, mida jälgida. Sa teed seda .observe() meetodi abil. See meetod võtab objekti, millel on entryTypes omadus (või mõnel kaasaegsel juhul lihtsalt type ühe tüübi jaoks), mis on stringide massiiv, mis esindab jõudluskirje tüüpe, millest olete huvitatud.

// Alusta kahe tüüpi kirje vaatlemist observer.observe({ entryTypes: ['mark', 'measure'] });

Mõned kõige levinumad kirje tüübid on:

• 'resource': Üksikasjad võrgupäringute kohta varade jaoks, nagu skriptid, pildid ja stiililehed.
• 'paint': Ajastus esimese värvi ja esimese sisuka värvi jaoks.
• 'largest-contentful-paint': Core Web Vitali mõõdik tajutava laadimiskiiruse jaoks.
• 'layout-shift': Core Web Vitali mõõdik visuaalse stabiilsuse jaoks.
• 'first-input': Teave esimese kasutaja interaktsiooni kohta, mida kasutatakse First Input Delay Core Web Vitali jaoks.
• 'longtask': Tuvastab peamise lõime ülesanded, mis võtavad kauem kui 50 millisekundit, mis võib põhjustada reageerimatust.
• 'mark' & 'measure': Kohandatud markerid ja mõõtmised, mille määratlete oma koodis User Timing API abil.

3. Vaatleja peatamine

Kui teil pole enam vaja andmeid koguda, on hea tava vaatleja lahti ühendada, et ressursse vabastada.

observer.disconnect();

Praktilised kasutusjuhud: Core Web Vitalsi jälgimine

Core Web Vitals on rühm spetsiifilisi tegureid, mida Google peab veebilehe üldises kasutajakogemuses oluliseks. Nende jälgimine on Performance Observer API üks võimsamaid rakendusi. Vaatame, kuidas igaüht mõõta.

Largest Contentful Paint (LCP) jälgimine

LCP mõõdab laadimisjõudlust. See märgistab punkti lehe laadimise ajaskaalal, kui põhisisu on tõenäoliselt laaditud. Hea LCP skoor on 2,5 sekundit või vähem.

LCP element võib lehe laadimisel muutuda. Algselt võib pealkiri olla LCP element, kuid hiljem võib suurem pilt laadida ja saada uueks LCP elemendiks. Seetõttu on Performance Observer ideaalne – see teavitab teid igast potentsiaalsest LCP kandidaadist, kui see renderdatakse.

// Vaatle LCP-d ja logi lõplik väärtus let lcpValue = 0; const lcpObserver = new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); // Viimane kirje on kõige ajakohasem LCP kandidaat const lastEntry = entries[entries.length - 1]; lcpValue = lastEntry.startTime; console.log(`LCP uuendatud: ${lcpValue.toFixed(2)}ms`, lastEntry.element); }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); // Hea tava on vaatleja lahti ühendada pärast kasutaja suhtlemist, // kuna interaktsioonid võivad peatada uute LCP kandidaatide saatmise. // window.addEventListener('beforeunload', () => lcpObserver.disconnect());

Pange tähele buffered: true kasutamist. See on oluline valik, mis käsib vaatlejal lisada kirjed, mis olid salvestatud *enne*, kui kutsuti observe() meetodit. See hoiab teid varajase LCP sündmuse vahelejätmisest.

First Input Delay (FID) ja Interaction to Next Paint (INP) jälgimine

Need mõõdikud mõõdavad interaktiivsust. Nad kvantifitseerivad kasutaja kogemust, kui nad esimest korda proovivad lehega suhelda.

First Input Delay (FID) mõõdab aega, mis kulub alates sellest, kui kasutaja esmakordselt lehega suhtleb (nt klõpsab nuppu), kuni ajani, mil brauser saab tegelikult hakata sellele interaktsioonile vastuseks sündmuste käsitlejaid töötlema. Hea FID on 100 millisekundit või vähem.

Interaction to Next Paint (INP) on uuem ja põhjalikum mõõdik, mis on 2024. aasta märtsis asendanud FIDi kui Core Web Vitali. Kui FID mõõdab ainult *viivitust* *esimese* interaktsiooni puhul, siis INP hindab *kogu latentsust* *kõigi* kasutaja interaktsioonide puhul kogu lehe elutsükli jooksul, teatades kõige halvemast. See annab parema pildi üldisest reageerimisvõimest. Hea INP on 200 millisekundit või vähem.

Saate jälgida FIDi, kasutades kirje tüüpi 'first-input':

// Vaatle FIDi const fidObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { const fid = entry.processingStart - entry.startTime; console.log(`FID: ${fid.toFixed(2)}ms`); // Ühenda lahti pärast esimese sisendi teatamist fidObserver.disconnect(); } }); fidObserver.observe({ type: 'first-input', buffered: true });

INP jälgimine on veidi keerulisem, kuna see vaatab sündmuse kogu kestust. Sa vaatled kirje tüüpi 'event' ja arvutad kestuse, pidades arvestust kõige pikema kohta.

// Lihtsustatud INP jälgimise näide let worstInp = 0; const inpObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // INP on sündmuse kestus const inp = entry.duration; // Meid huvitavad ainult interaktsioonid, mis on pikemad kui praegune halvim if (inp > worstInp) { worstInp = inp; console.log(`Uus halvim INP: ${worstInp.toFixed(2)}ms`); } } }); inpObserver.observe({ type: 'event', durationThreshold: 16, buffered: true }); // durationThreshold aitab välja filtreerida väga lühikesed, tõenäoliselt ebaolulised sündmused.

Cumulative Layout Shift (CLS) jälgimine

CLS mõõdab visuaalset stabiilsust. See aitab kvantifitseerida, kui sageli kogevad kasutajad ootamatuid paigutuse muutusi – frustreeriv kogemus, kus sisu liigub lehel ilma hoiatuseta. Hea CLS skoor on 0,1 või vähem.

Skoor on kõigi üksikute paigutuse nihke skooride agregeerimine. Performance Observer on siin hädavajalik, kuna see teatab igast nihkest selle toimumisel.

// Vaatle ja arvuta kogu CLS skoor let clsScore = 0; const clsObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // Me ei taha arvestada nihkeid, mis olid põhjustatud kasutaja sisendist if (!entry.hadRecentInput) { clsScore += entry.value; console.log(`Praegune CLS skoor: ${clsScore.toFixed(4)}`); } } }); clsObserver.observe({ type: 'layout-shift', buffered: true });

hadRecentInput omadus on oluline. See aitab teil välja filtreerida legitiimsed paigutuse muutused, mis toimuvad vastusena kasutaja tegevusele (nagu nupu klõpsamine, mis laiendab menüüd), mida ei tohiks CLS skoori arvesse võtta.

Peale Core Web Vitalsi: Muud võimsad kirje tüübid

Kuigi Core Web Vitals on suurepärane lähtepunkt, saab Performance Observer jälgida palju enamat. Siin on mõned muud uskumatult kasulikud kirje tüübid.

Pikkade ülesannete jälgimine (`longtask`)

Long Tasks API toob esile ülesanded, mis hõivavad peamist lõime 50 millisekundi või kauem. Need on problemaatilised, sest kui peamine lõim on hõivatud, ei saa leht kasutaja sisendile reageerida, mis viib loidu või külmunud kogemuseni. Nende ülesannete tuvastamine on INP parandamise võti.

// Vaatle pikki ülesandeid const longTaskObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log(`Pikk ülesanne tuvastatud: ${entry.duration.toFixed(2)}ms`); // Omadus 'attribution' võib mõnikord öelda teile, mis pika ülesande põhjustas console.log('Omistamine:', entry.attribution); } }); longTaskObserver.observe({ type: 'longtask', buffered: true });

Ressursi ajastuste analüüsimine (`resource`)

Varade laadimise mõistmine on jõudluse häälestamise alus. Kirje tüüp 'resource' annab teile üksikasjalikud võrgu ajastuse andmed iga ressursi kohta teie lehel, sealhulgas DNS otsing, TCP ühendus ja sisu allalaadimise ajad.

// Vaatle ressursi ajastusi const resourceObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // Leiame aeglaselt laadivad pildid if (entry.initiatorType === 'img' && entry.duration > 500) { console.warn(`Aeglane pilt tuvastatud: ${entry.name}`, `Kestus: ${entry.duration.toFixed(2)}ms`); } } }); // 'buffered: true' kasutamine on peaaegu alati vajalik ressursi ajastuste jaoks // et püüda varad, mis laaditi enne selle skripti käivitamist. resourceObserver.observe({ type: 'resource', buffered: true });

Kohandatud jõudlusmarkerite mõõtmine (`mark` ja `measure`)

Mõnikord peate mõõtma rakendusepõhise loogika jõudlust. User Timing API võimaldab teil luua kohandatud ajatempleid ja mõõta nende vahelist kestust.

• performance.mark('start-operation'): Loob ajatempli nimega 'start-operation'.
• performance.mark('end-operation'): Loob teise ajatempli.
• performance.measure('my-operation', 'start-operation', 'end-operation'): Loob mõõtmise kahe markeri vahel.

Performance Observer saab kuulata neid kohandatud kirjeid 'mark' ja 'measure', mis on ideaalsed ajastusandmete kogumiseks selliste asjade kohta nagu komponendi renderdamise ajad JavaScripti raamistikus või kriitilise API kutse ja sellele järgneva andmetöötluse kestus.

// Teie rakenduse koodis: performance.mark('start-data-processing'); // ... mingi keeruline andmetöötlus ... performance.mark('end-data-processing'); performance.measure('data-processing-duration', 'start-data-processing', 'end-data-processing'); // Teie jälgimisskriptis: const customObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntriesByName('data-processing-duration')) { console.log(`Kohandatud mõõtmine '${entry.name}': ${entry.duration.toFixed(2)}ms`); } }); customObserver.observe({ entryTypes: ['measure'] });

Täiustatud kontseptsioonid ja parimad tavad

Performance Observer API tõhusaks kasutamiseks professionaalses tootmiskeskkonnas kaaluge neid parimaid tavasid.

• Kaaluge alati `buffered: true`: Kirje tüüpide puhul, mis võivad ilmneda lehe laadimise varases etapis (nagu 'resource', 'paint' või 'largest-contentful-paint'), on puhverdatud lipu kasutamine hädavajalik, et vältida nende vahelejätmist.
• Kontrollige brauseri tuge: Kuigi see on laialdaselt toetatud kaasaegsetes brauserites, on alati tark kontrollida selle olemasolu enne selle kasutamist. Saate kontrollida ka, milliseid kirje tüüpe konkreetne brauser toetab.
• if ('PerformanceObserver' in window && PerformanceObserver.supportedEntryTypes.includes('longtask')) { // PerformanceObserveri kasutamine pikkade ülesannete jaoks on ohutu }
• Saatke andmed analüüsiteenusesse: Andmete logimine konsooli on arenduse jaoks suurepärane, kuid reaalse maailma jälgimiseks peate need andmed agregeerima. Parim viis selle telemeetria kliendilt saatmiseks on kasutada navigator.sendBeacon() API-t. See on mitteblokeeriv mehhanism, mis on loodud väikese hulga andmete serverisse saatmiseks ja see töötab usaldusväärselt isegi siis, kui lehte lahti laaditakse.
• Rühmitage vaatlejad murede järgi: Kuigi saate kasutada ühte vaatlejat mitme kirje tüübi jaoks, on sageli puhtam luua eraldi vaatlejad erinevate murede jaoks (nt üks Core Web Vitalsi jaoks, üks ressursi ajastuste jaoks, üks kohandatud mõõdikute jaoks). See parandab koodi loetavust ja hooldatavust.
• Mõistke jõudluse üldkulusid: API on loodud olema väga madala üldkuluga. Kuid väga keeruline tagasihelistamisfunktsioon, mis teostab raskeid arvutusi, võib potentsiaalselt jõudlust mõjutada. Hoidke oma vaatleja tagasihelistamised lahjad ja tõhusad. Lükake igasugune raske töötlemine veebitöötajale või saatke toorandmed töötlemiseks oma taustaprogrammi.

Järeldus: Jõudlusele keskenduva kultuuri loomine

Performance Observer API on rohkem kui lihtsalt järjekordne tööriist; see on põhjalik muutus selles, kuidas me veebi jõudlusele läheneme. See viib meid reaktiivsetelt, ühekordsetelt mõõtmistelt ennetavale, pidevale jälgimisele, mis peegeldab meie kasutajate tõelist dünaamilist kogemust kogu maailmas. Pakkudes usaldusväärset ja tõhusat viisi Core Web Vitalsi, pikkade ülesannete, ressursi ajastuste ja kohandatud mõõdikute jäädvustamiseks, annab see arendajatele võimaluse tuvastada ja lahendada jõudluse kitsaskohti enne, kui need mõjutavad märkimisväärset hulka kasutajaid.

Performance Observer API kasutuselevõtt on kriitiline samm jõudlusele keskenduva kultuuri loomiseks igas arendusmeeskonnas. Kui saate mõõta seda, mis on oluline, saate parandada seda, mis on oluline. Alustage nende vaatlejate integreerimist oma projektidesse juba täna. Teie kasutajad – kus iganes nad maailmas ka poleks – tänavad teid kiirema, sujuvama ja nauditavama kogemuse eest.