Tīmekļa veiktspējas atklāšana: padziļināts ieskats Performance Observer API

Mūsdienu straujajā digitālajā pasaulē tīmekļa veiktspēja nav greznība; tā ir nepieciešamība. Lēna vai nereaģējoša vietne var izraisīt lietotāju neapmierinātību, augstākus atlēcienu rādītājus (bounce rates) un tiešu negatīvu ietekmi uz biznesa mērķiem, vai tie būtu pārdošanas apjomi, reklāmas ieņēmumi vai lietotāju iesaiste. Gadiem ilgi izstrādātāji ir paļāvušies uz rīkiem, kas mēra veiktspēju vienā noteiktā laika brīdī, parasti sākotnējās lapas ielādes laikā. Lai gan šī pieeja ir noderīga, tā neaptver kritisku stāsta daļu: lietotāja visu pieredzi, mijiedarbojoties ar lapu. Šeit spēlē ienāk izpildlaika veiktspējas monitorings, un tā jaudīgākais rīks ir Performance Observer API.

Tradicionālās metodes bieži ietver veiktspējas datu aptaujāšanu ar tādām funkcijām kā performance.getEntries(). Tas var būt neefektīvi, pakļauts riskam palaist garām svarīgus notikumus, kas notiek starp aptaujām, un pat var palielināt veiktspējas slogu, ko tas mēģina mērīt. Performance Observer API revolucionizē šo procesu, nodrošinot asinhronu, zema resursu patēriņa mehānismu, lai abonētu veiktspējas notikumus, tiklīdz tie notiek. Šī rokasgrāmata sniegs jums padziļinātu ieskatu šajā būtiskajā API, parādot, kā izmantot tā jaudu, lai uzraudzītu galvenos tīmekļa rādītājus (Core Web Vitals), identificētu vājās vietas un galu galā veidotu ātrāku, patīkamāku tīmekļa pieredzi globālai auditorijai.

Kas ir Performance Observer API?

Savā būtībā Performance Observer API ir saskarne, kas nodrošina veidu, kā novērot un apkopot veiktspējas mērījumu notikumus, kas pazīstami kā veiktspējas ieraksti (performance entries). Iedomājieties to kā īpašu klausītāju ar veiktspēju saistītām darbībām pārlūkprogrammā. Tā vietā, lai jūs aktīvi jautātu pārlūkprogrammai: "Vai kaut kas jau ir noticis?", pārlūkprogramma proaktīvi jums paziņo: "Tikko notika jauns veiktspējas notikums! Lūk, detaļas."

Tas tiek panākts, izmantojot novērotāja modeli (observer pattern). Jūs izveidojat novērotāja instanci, norādāt, kāda veida veiktspējas notikumi jūs interesē (piemēram, lieli attēlojumi, lietotāja ievades, izkārtojuma maiņas), un nodrošināt atzvana funkciju (callback function). Ikreiz, kad pārlūkprogrammas veiktspējas laika joslā tiek reģistrēts jauns norādītā tipa notikums, jūsu atzvana funkcija tiek izsaukta ar jauno ierakstu sarakstu. Šis asinhronais, uz notikumiem balstītais (push-based) modelis ir daudz efektīvāks un uzticamāks nekā vecākais, uz pieprasījumiem balstītais (pull-based) modelis, kurā atkārtoti tiek izsaukta performance.getEntries().

Vecais veids pret jauno veidu

Lai novērtētu Performance Observer inovāciju, salīdzināsim abas pieejas:

• Vecais veids (aptaujāšana): Jūs varētu izmantot setTimeout vai requestAnimationFrame, lai periodiski izsauktu performance.getEntriesByName('my-metric'), lai redzētu, vai jūsu metrika ir reģistrēta. Tas ir problemātiski, jo jūs varat pārbaudīt pārāk vēlu un palaist garām notikumu, vai pārbaudīt pārāk bieži un izniekot CPU ciklus. Jūs arī riskējat piepildīt pārlūkprogrammas veiktspējas buferi, ja regulāri neattīrāt ierakstus.
• Jaunais veids (novērošana): Jūs vienreiz iestatāt PerformanceObserver. Tas klusi darbojas fonā, patērējot minimālus resursus. Tiklīdz tiek reģistrēts atbilstošs veiktspējas ieraksts — vai tā būtu viena milisekunde pēc lapas ielādes vai desmit minūtes pēc lietotāja sesijas sākuma — jūsu kods tiek nekavējoties informēts. Tas nodrošina, ka jūs nekad nepalaidīsiet garām notikumu un jūsu monitoringa kods ir pēc iespējas efektīvāks.

Kāpēc jums vajadzētu izmantot Performance Observer

Performance Observer API integrēšana jūsu izstrādes darbplūsmā piedāvā daudzas priekšrocības, kas ir kritiskas mūsdienu tīmekļa lietojumprogrammām, kuru mērķis ir globāla sasniedzamība.

• Neuzbāzīgs monitorings: Novērotāja atzvana funkcija parasti tiek izpildīta dīkstāves periodos, nodrošinot, ka jūsu veiktspējas monitoringa kods netraucē lietotāja pieredzi un nebloķē galveno pavedienu (main thread). Tas ir izstrādāts tā, lai būtu viegls un ar nenozīmīgu ietekmi uz veiktspēju.
• Visaptveroši izpildlaika dati: Tīmeklis ir dinamisks. Veiktspējas problēmas nenotiek tikai ielādes laikā. Lietotājs var izraisīt sarežģītu animāciju, ielādēt vairāk satura, ritinot lapu, vai mijiedarboties ar smagu komponentu ilgi pēc tam, kad sākotnējā lapa ir ielādējusies. Performance Observer uztver šos izpildlaika notikumus, sniedzot jums pilnīgu priekšstatu par visu lietotāja sesiju.
• Nākotnes drošs un standartizēts: Tas ir W3C ieteiktais standarts veiktspējas datu vākšanai. Jaunas veiktspējas metrikas un API tiek veidotas, lai integrētos ar to, padarot to par ilgtspējīgu un uz nākotni vērstu izvēli jūsu projektiem.
• Reālo lietotāju monitoringa (RUM) pamats: Lai patiesi saprastu, kā jūsu vietne darbojas lietotājiem dažādās valstīs, ierīcēs un tīkla apstākļos, jums ir nepieciešami dati no reālām sesijām. Performance Observer ir ideāls rīks, lai izveidotu robustu RUM risinājumu, kas ļauj apkopot svarīgas metrikas un nosūtīt tās uz analītikas pakalpojumu apkopošanai un analīzei.
• Novērš sacensību apstākļus (Race Conditions): Ar aptaujāšanu jūs varētu mēģināt piekļūt veiktspējas ierakstam, pirms tas ir reģistrēts. Novērotāja modelis pilnībā novērš šo sacensību stāvokli, jo jūsu kods tiek izpildīts tikai pēc tam, kad ieraksts ir pieejams.

Darba sākšana: Performance Observer pamati

API lietošana ir vienkārša. Process ietver trīs galvenos soļus: novērotāja izveidi, atzvana funkcijas definēšanu un norādīšanu novērotājam, kam sekot līdzi.

1. Novērotāja izveide ar atzvana funkciju

Vispirms jūs izveidojat PerformanceObserver objektu, nododot tam atzvana funkciju. Šī funkcija tiks izpildīta ikreiz, kad tiks atklāti jauni ieraksti.

const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('Ieraksta tips:', entry.entryType); console.log('Ieraksta nosaukums:', entry.name); console.log('Sākuma laiks:', entry.startTime); console.log('Ilgums:', entry.duration); } });

Atzvana funkcija saņem PerformanceObserverEntryList objektu. Jūs varat izsaukt getEntries() metodi šim sarakstam, lai iegūtu masīvu ar visiem jaunajiem novērotajiem veiktspējas ierakstiem.

2. Konkrētu ierakstu tipu novērošana

Novērotājs nedara neko, kamēr jūs tam nepateiksiet, ko uzraudzīt. To dara, izmantojot .observe() metodi. Šī metode pieņem objektu ar entryTypes īpašību (vai dažos modernos gadījumos tikai type vienam tipam), kas ir virkņu masīvs, kas apzīmē jūs interesējošos veiktspējas ierakstu tipus.

// Sākam novērot divu veidu ierakstus observer.observe({ entryTypes: ['mark', 'measure'] });

Daži no visbiežāk sastopamajiem ierakstu tipiem ir:

• 'resource': Sīkāka informācija par tīkla pieprasījumiem resursiem, piemēram, skriptiem, attēliem un stila lapām.
• 'paint': Laika mērījumi pirmajam attēlojumam (first-paint) un pirmajam satura attēlojumam (first-contentful-paint).
• 'largest-contentful-paint': Galvenais tīmekļa rādītājs (Core Web Vital) uztveramajam ielādes ātrumam.
• 'layout-shift': Galvenais tīmekļa rādītājs (Core Web Vital) vizuālajai stabilitātei.
• 'first-input': Informācija par pirmo lietotāja mijiedarbību, ko izmanto Pirmās ievades aiztures (First Input Delay) galvenajam tīmekļa rādītājam.
• 'longtask': Identificē uzdevumus galvenajā pavedienā, kas ilgst vairāk par 50 milisekundēm un var izraisīt nereaģēšanu.
• 'mark' & 'measure': Pielāgoti marķieri un mērījumi, ko definējat savā kodā, izmantojot User Timing API.

3. Novērotāja apturēšana

Kad jums vairs nav nepieciešams vākt datus, ir laba prakse atvienot novērotāju, lai atbrīvotu resursus.

observer.disconnect();

Praktiski pielietojuma piemēri: Galveno tīmekļa rādītāju (Core Web Vitals) monitorings

Galvenie tīmekļa rādītāji (Core Web Vitals) ir specifisku faktoru kopums, ko Google uzskata par svarīgiem tīmekļa lapas kopējā lietotāja pieredzē. To uzraudzība ir viens no jaudīgākajiem Performance Observer API pielietojumiem. Apskatīsim, kā izmērīt katru no tiem.

Lielākā satura attēlojuma (LCP) monitorings

LCP mēra ielādes veiktspēju. Tas norāda uz laika punktu lapas ielādes laika joslā, kad galvenais saturs, visticamāk, ir ielādējies. Labs LCP rādītājs ir 2,5 sekundes vai mazāk.

LCP elements var mainīties lapas ielādes gaitā. Sākotnēji virsraksts var būt LCP elements, bet vēlāk var ielādēties lielāks attēls un kļūt par jauno LCP elementu. Tāpēc Performance Observer ir ideāls — tas paziņo jums par katru potenciālo LCP kandidātu, kad tas tiek renderēts.

// Novērojam LCP un reģistrējam galīgo vērtību let lcpValue = 0; const lcpObserver = new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); // Pēdējais ieraksts ir visaktuālākais LCP kandidāts const lastEntry = entries[entries.length - 1]; lcpValue = lastEntry.startTime; console.log(`LCP atjaunināts: ${lcpValue.toFixed(2)}ms`, lastEntry.element); }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); // Ir laba prakse atvienot novērotāju pēc lietotāja mijiedarbības, // jo mijiedarbības var apturēt jaunu LCP kandidātu nosūtīšanu. // window.addEventListener('beforeunload', () => lcpObserver.disconnect());

Ievērojiet buffered: true izmantošanu. Šī ir svarīga opcija, kas norāda novērotājam iekļaut ierakstus, kas tika reģistrēti *pirms* observe() metodes izsaukšanas. Tas novērš iespēju palaist garām agrīnu LCP notikumu.

Pirmās ievades aiztures (FID) un Interakcijas līdz nākamajai attēlošanai (INP) monitorings

Šīs metrikas mēra interaktivitāti. Tās kvantitatīvi novērtē lietotāja pieredzi, kad viņš pirmo reizi mēģina mijiedarboties ar lapu.

Pirmās ievades aizture (FID) mēra laiku no brīža, kad lietotājs pirmo reizi mijiedarbojas ar lapu (piemēram, noklikšķina uz pogas), līdz brīdim, kad pārlūkprogramma faktiski spēj sākt apstrādāt notikumu apstrādātājus (event handlers) atbildē uz šo mijiedarbību. Labs FID ir 100 milisekundes vai mazāk.

Interakcija līdz nākamajai attēlošanai (INP) ir jaunāka, visaptverošāka metrika, kas 2024. gada martā ir aizstājusi FID kā galveno tīmekļa rādītāju. Kamēr FID mēra tikai *pirmās* mijiedarbības *aizturi*, INP novērtē *visu* lietotāja mijiedarbību *kopējo latentumu* visā lapas dzīves ciklā, ziņojot par sliktāko. Tas sniedz labāku priekšstatu par kopējo atsaucību. Labs INP ir 200 milisekundes vai mazāk.

Jūs varat uzraudzīt FID, izmantojot 'first-input' ieraksta tipu:

// Novērojam FID const fidObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { const fid = entry.processingStart - entry.startTime; console.log(`FID: ${fid.toFixed(2)}ms`); // Atvienojamies pēc pirmās ievades ziņošanas fidObserver.disconnect(); } }); fidObserver.observe({ type: 'first-input', buffered: true });

INP monitorings ir nedaudz sarežģītāks, jo tas aplūko pilnu notikuma ilgumu. Jūs novērojat 'event' ieraksta tipu un aprēķināt ilgumu, sekojot līdzi garākajam.

// Vienkāršots INP monitoringa piemērs let worstInp = 0; const inpObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // INP ir notikuma ilgums const inp = entry.duration; // Mūs interesē tikai tās mijiedarbības, kas ir garākas par pašreizējo sliktāko if (inp > worstInp) { worstInp = inp; console.log(`Jaunākais sliktākais INP: ${worstInp.toFixed(2)}ms`); } } }); inpObserver.observe({ type: 'event', durationThreshold: 16, buffered: true }); // durationThreshold palīdz filtrēt ļoti īsus, visticamāk, nenozīmīgus notikumus.

Kumulatīvās izkārtojuma maiņas (CLS) monitorings

CLS mēra vizuālo stabilitāti. Tas palīdz kvantitatīvi novērtēt, cik bieži lietotāji saskaras ar negaidītām izkārtojuma maiņām — nomācošu pieredzi, kur saturs pārvietojas lapā bez brīdinājuma. Labs CLS rādītājs ir 0.1 vai mazāk.

Rādītājs ir visu atsevišķo izkārtojuma maiņu rādītāju apkopojums. Šeit Performance Observer ir būtisks, jo tas ziņo par katru maiņu, tiklīdz tā notiek.

// Novērojam un aprēķinām kopējo CLS rādītāju let clsScore = 0; const clsObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // Mēs nevēlamies skaitīt maiņas, ko izraisījusi lietotāja ievade if (!entry.hadRecentInput) { clsScore += entry.value; console.log(`Pašreizējais CLS rādītājs: ${clsScore.toFixed(4)}`); } } }); clsObserver.observe({ type: 'layout-shift', buffered: true });

Īpašība hadRecentInput ir svarīga. Tā palīdz filtrēt likumīgas izkārtojuma maiņas, kas notiek, reaģējot uz lietotāja darbību (piemēram, noklikšķinot uz pogas, kas izvērsa izvēlni), kuras nevajadzētu ieskaitīt CLS rādītājā.

Ārpus galvenajiem tīmekļa rādītājiem: citi jaudīgi ierakstu tipi

Lai gan galvenie tīmekļa rādītāji ir lielisks sākumpunkts, Performance Observer var uzraudzīt daudz vairāk. Šeit ir daži citi neticami noderīgi ierakstu tipi.

Ilgu uzdevumu (`longtask`) izsekošana

Long Tasks API atklāj uzdevumus, kas aizņem galveno pavedienu 50 milisekundes vai ilgāk. Tie ir problemātiski, jo, kamēr galvenais pavediens ir aizņemts, lapa nevar reaģēt uz lietotāja ievadi, kas noved pie lēnas vai iesaldētas pieredzes. Šo uzdevumu identificēšana ir atslēga INP uzlabošanai.

// Novērojam garus uzdevumus const longTaskObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log(`Konstatēts garš uzdevums: ${entry.duration.toFixed(2)}ms`); // 'attribution' īpašība dažkārt var pateikt, kas izraisīja garo uzdevumu console.log('Atribūcija:', entry.attribution); } }); longTaskObserver.observe({ type: 'longtask', buffered: true });

Resursu laika (`resource`) analīze

Izpratne par to, kā jūsu resursi tiek ielādēti, ir fundamentāla veiktspējas uzlabošanai. 'resource' ieraksta tips sniedz jums detalizētus tīkla laika datus par katru resursu jūsu lapā, ieskaitot DNS uzmeklēšanu, TCP savienojumu un satura lejupielādes laikus.

// Novērojam resursu laikus const resourceObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // Atrodam lēni ielādējošos attēlus if (entry.initiatorType === 'img' && entry.duration > 500) { console.warn(`Konstatēts lēns attēls: ${entry.name}`, `Ilgums: ${entry.duration.toFixed(2)}ms`); } } }); // 'buffered: true' izmantošana gandrīz vienmēr ir nepieciešama resursu laikiem, // lai notvertu resursus, kas ielādējās pirms šī skripta palaišanas. resourceObserver.observe({ type: 'resource', buffered: true });

Pielāgotu veiktspējas marķieru (`mark` un `measure`) mērīšana

Dažreiz jums ir nepieciešams izmērīt lietojumprogrammai specifiskas loģikas veiktspēju. User Timing API ļauj jums izveidot pielāgotus laika zīmogus un izmērīt ilgumu starp tiem.

• performance.mark('start-operation'): Izveido laika zīmogu ar nosaukumu 'start-operation'.
• performance.mark('end-operation'): Izveido citu laika zīmogu.
• performance.measure('my-operation', 'start-operation', 'end-operation'): Izveido mērījumu starp abiem marķieriem.

Performance Observer var klausīties šos pielāgotos 'mark' un 'measure' ierakstus, kas ir ideāli piemēroti laika datu vākšanai par tādām lietām kā komponentu renderēšanas laiks JavaScript ietvaros vai kritiska API izsaukuma un sekojošas datu apstrādes ilgums.

// Jūsu lietojumprogrammas kodā: performance.mark('start-data-processing'); // ... kāda sarežģīta datu apstrāde ... performance.mark('end-data-processing'); performance.measure('data-processing-duration', 'start-data-processing', 'end-data-processing'); // Jūsu monitoringa skriptā: const customObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntriesByName('data-processing-duration')) { console.log(`Pielāgots mērījums '${entry.name}': ${entry.duration.toFixed(2)}ms`); } }); customObserver.observe({ entryTypes: ['measure'] });

Papildu koncepcijas un labākās prakses

Lai efektīvi izmantotu Performance Observer API profesionālā ražošanas vidē, apsveriet šīs labākās prakses.

• Vienmēr apsveriet `buffered: true`: Ierakstu tipiem, kas var notikt agri lapas ielādes laikā (piemēram, 'resource', 'paint' vai 'largest-contentful-paint'), buferētā karoga izmantošana ir būtiska, lai tos nepalaistu garām.
• Pārbaudiet pārlūkprogrammas atbalstu: Lai gan tas ir plaši atbalstīts modernās pārlūkprogrammās, vienmēr ir prātīgi pārbaudīt tā esamību pirms lietošanas. Jūs varat arī pārbaudīt, kurus ierakstu tipus atbalsta konkrēta pārlūkprogramma.
• if ('PerformanceObserver' in window && PerformanceObserver.supportedEntryTypes.includes('longtask')) { // Droši izmantot PerformanceObserver gariem uzdevumiem }
• Sūtiet datus uz analītikas pakalpojumu: Datu reģistrēšana konsolē ir lieliska izstrādes laikā, bet reālās pasaules monitoringam jums šie dati ir jāapkopo. Labākais veids, kā nosūtīt šo telemetriju no klienta, ir izmantot navigator.sendBeacon() API. Tas ir nebloķējošs mehānisms, kas paredzēts nelielu datu apjomu nosūtīšanai uz serveri, un tas darbojas uzticami pat tad, kad lapa tiek aizvērta.
• Grupējiet novērotājus pēc mērķa: Lai gan jūs varat izmantot vienu novērotāju vairākiem ierakstu tipiem, bieži vien ir tīrāk izveidot atsevišķus novērotājus dažādiem mērķiem (piemēram, vienu galvenajiem tīmekļa rādītājiem, vienu resursu laikiem, vienu pielāgotām metrikām). Tas uzlabo koda lasāmību un uzturēšanu.
• Izprotiet veiktspējas slogu: API ir izstrādāts tā, lai tas būtu ar ļoti zemu resursu patēriņu. Tomēr ļoti sarežģīta atzvana funkcija, kas veic smagus aprēķinus, varētu ietekmēt veiktspēju. Uzturiet savas novērotāja atzvana funkcijas vienkāršas un efektīvas. Atlieciet jebkuru smagu apstrādi uz web worker vai nosūtiet neapstrādātus datus uz savu aizmugursistēmu (backend) apstrādei tur.

Noslēgums: Veiktspēju prioritizējošas kultūras veidošana

Performance Observer API ir vairāk nekā tikai vēl viens rīks; tas ir fundamentāls pagrieziens mūsu pieejā tīmekļa veiktspējai. Tas mūs virza no reaktīviem, vienreizējiem mērījumiem uz proaktīvu, nepārtrauktu monitoringu, kas atspoguļo mūsu lietotāju patieso, dinamisko pieredzi visā pasaulē. Nodrošinot uzticamu un efektīvu veidu, kā uztvert galvenos tīmekļa rādītājus, garus uzdevumus, resursu laikus un pielāgotas metrikas, tas dod izstrādātājiem iespēju identificēt un atrisināt veiktspējas vājās vietas, pirms tās ietekmē lielu lietotāju skaitu.

Performance Observer API pieņemšana ir kritisks solis ceļā uz veiktspēju prioritizējošas kultūras veidošanu jebkurā izstrādes komandā. Kad jūs varat izmērīt to, kas ir svarīgs, jūs varat uzlabot to, kas ir svarīgs. Sāciet integrēt šos novērotājus savos projektos jau šodien. Jūsu lietotāji — neatkarīgi no tā, kur viņi atrodas pasaulē — pateiksies jums par ātrāku, plūstošāku un baudāmāku pieredzi.