Performance Observer API: Vykdymo laiko našumo metrika ir „siaurų vietų“ analizė

Šiuolaikiniame konkurencingame skaitmeniniame pasaulyje svetainių ir žiniatinklio programų našumas yra labai svarbus vartotojų įsitraukimui ir verslo sėkmei. Lėtas įkėlimo laikas ir nereaguojančios sąsajos gali nuvilti vartotojus, lemti nebaigtas operacijas ir galiausiai prarastas pajamas. „Performance Observer“ API yra galingas įrankis, leidžiantis kūrėjams stebėti ir analizuoti vykdymo laiko našumo metriką, nustatyti „siauras vietas“ ir optimizuoti savo programas sklandesnei, greitesnei ir malonesnei vartotojo patirčiai, nepriklausomai nuo vartotojo vietos ar įrenginio.

Kas yra „Performance Observer“ API?

„Performance Observer“ API yra „JavaScript“ API, suteikianti mechanizmą stebėti ir reaguoti į su našumu susijusius įvykius, kai jie vyksta žiniatinklio programoje. Skirtingai nuo tradicinių našumo stebėjimo metodų, kurie remiasi periodiniais matavimais ar rankiniu instrumentavimu, „Performance Observer“ API siūlo efektyvesnį ir lankstesnį būdą realiuoju laiku rinkti našumo duomenis. Tai leidžia kūrėjams prenumeruoti konkrečius našumo įrašų tipus ir gauti pranešimus, kai tik įrašomi nauji įrašai.

Šis „stebėk ir reaguok“ metodas leidžia aktyviai stebėti našumą, todėl kūrėjai gali nustatyti ir spręsti našumo problemas, kol jos dar nepaveikė vartotojo patirties. API yra standartizuotas šiuolaikinėse naršyklėse, užtikrinantis nuoseklų veikimą ir suderinamumą tarp platformų.

Pagrindinės sąvokos ir funkcijos

Norint efektyviai naudoti „Performance Observer“ API, būtina suprasti jo pagrindines sąvokas ir funkcijas:

• PerformanceEntry: Atspindi vieną našumo matavimą ar įvykį. Našumo įrašuose yra informacijos apie įvykio tipą, jo pradžios ir pabaigos laikus bei kitus svarbius atributus. Pavyzdžiai: resource, mark, measure, navigation, longtask ir event.
• PerformanceObserver: Objektas, leidžiantis prenumeruoti konkrečius našumo įrašų tipus ir gauti pranešimus, kai tik į naršyklės našumo laiko juostą pridedami nauji įrašai.
• observe() metodas: Naudojamas konfigūruoti „PerformanceObserver“, kad jis klausytųsi konkrečių našumo įrašų tipų. Galite nurodyti norimus stebėti įrašų tipus, taip pat buffered parinktį, kad gautumėte istorinius įrašus.
• disconnect() metodas: Naudojamas sustabdyti „PerformanceObserver“ nuo našumo įvykių klausymosi.
• takeRecords() metodas: Grąžina visų našumo įrašų, kurie buvo stebimi, bet dar neapdoroti stebėtojo atgalinio iškvietimo funkcijos, masyvą.
• Atgalinio iškvietimo funkcija (Callback Function): Funkcija, kuri vykdoma, kai tik pastebimi nauji našumo įrašai. Ši funkcija gauna PerformanceObserverEntryList objektą, kuriame yra stebimi įrašai.

Palaikomi našumo įrašų tipai

„Performance Observer“ API palaiko įvairius našumo įrašų tipus, kurių kiekvienas suteikia konkrečių įžvalgų apie skirtingus žiniatinklio programų našumo aspektus. Kai kurie dažniausiai naudojami įrašų tipai:

• resource: Suteikia informaciją apie atskirų išteklių, tokių kaip paveikslėliai, scenarijai, stilių lentelės ir šriftai, įkėlimą. Šis įrašo tipas apima tokias detales kaip ištekliaus URL, pradžios ir pabaigos laikus, atsiuntimo trukmę ir perdavimo dydį.
• mark: Leidžia kurti pasirinktines laiko žymes savo kode, siekiant išmatuoti konkrečių kodo dalių trukmę. Galite naudoti žymes svarbių operacijų, tokių kaip duomenų apdorojimas ar UI atvaizdavimas, pradžiai ir pabaigai sekti.
• measure: Naudojamas apskaičiuoti trukmę tarp dviejų žymių. Šis įrašo tipas suteikia patogų būdą išmatuoti pasirinktinių kodo dalių našumą.
• navigation: Suteikia informaciją apie puslapio naršymo laiką, įskaitant DNS paieškos laiką, TCP ryšio laiką, užklausos ir atsakymo laikus bei DOM apdorojimo laiką.
• longtask: Nustato užduotis, kurios ilgą laiką (paprastai ilgiau nei 50 milisekundžių) blokuoja pagrindinę giją. Ilgos užduotys gali sukelti UI nereagavimą ir strigimą.
• event: Įrašo laiko informaciją apie konkrečius naršyklės įvykius, tokius kaip click, keydown ir scroll.
• layout-shift: Seka netikėtus išdėstymo poslinkius puslapyje. Šie poslinkiai gali trikdyti vartotojus ir neigiamai paveikti vartotojo patirtį.
• largest-contentful-paint: Matuoja laiką, per kurį didžiausias turinio elementas tampa matomas puslapyje.
• first-input-delay: Matuoja laiką, per kurį naršyklė atsako į pirmąjį vartotojo veiksmą (pvz., paspaudimą).
• element: Pateikia laiko informaciją apie konkrečių elementų atvaizdavimą puslapyje.

Praktiniai pavyzdžiai ir naudojimo atvejai

„Performance Observer“ API galima naudoti įvairiais scenarijais, siekiant pagerinti žiniatinklio programų našumą. Štai keletas praktinių pavyzdžių:

1. Išteklių įkėlimo laiko stebėjimas

resource įrašo tipas leidžia sekti atskirų išteklių, tokių kaip paveikslėliai, scenarijai ir stilių lentelės, įkėlimo laiką. Ši informacija gali būti naudojama nustatant lėtai įkeliamus išteklius, kurie daro įtaką puslapio įkėlimo laikui. Pavyzdžiui, galite naudoti šį kodą išteklių įkėlimo laikui stebėti:

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

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

            

              
                Copy
              
            
          

Šis kodas sukuria „PerformanceObserver“, kuris klausosi resource įrašų ir į konsolę išveda ištekliaus URL ir trukmę. Analizuodami šiuos duomenis, galite nustatyti lėtai įkeliamus išteklius ir juos optimizuoti, pavyzdžiui, suspaudžiant paveikslėlius, naudojant turinio pristatymo tinklą (CDN) arba optimizuojant serverio konfigūraciją.

Pasaulinė perspektyva: Stebėdami išteklių įkėlimo laikus, atsižvelkite į savo vartotojų geografinę padėtį. Vartotojai regionuose su lėtesniu interneto ryšiu gali patirti žymiai ilgesnį įkėlimo laiką. CDN su geografiškai paskirstytais serveriais gali padėti sušvelninti šią problemą.

2. Pasirinktinio kodo vykdymo laiko matavimas

mark ir measure įrašų tipai leidžia išmatuoti pasirinktinių kodo dalių vykdymo laiką. Tai naudinga nustatant našumo „siauras vietas“ jūsų programos logikoje. Pavyzdžiui, galite naudoti šį kodą konkrečios funkcijos trukmei išmatuoti:

            performance.mark("start");

// Code to be measured
for (let i = 0; i < 1000000; i++) {
 // Some computationally intensive operation
}

performance.mark("end");
performance.measure("My Function", "start", "end");

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

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

            

              
                Copy
              
            
          

Šis kodas sukuria dvi žymes, start ir end, prieš ir po kodo dalies, kurią norite išmatuoti. Tada jis naudoja performance.measure() metodą apskaičiuoti trukmę tarp dviejų žymių. „PerformanceObserver“ klausosi measure įrašų ir į konsolę išveda matavimo pavadinimą bei trukmę. Analizuodami šiuos duomenis, galite nustatyti lėtai veikiančias kodo dalis ir jas optimizuoti, taikydami tokius metodus kaip spartinimas (caching), memoizacija ar algoritminis optimizavimas.

Praktinė įžvalga: Nustatykite savo programos kritinius kelius – kodo sekas, kurios vykdomos dažniausiai ir turi didžiausią poveikį našumui. Sutelkite savo optimizavimo pastangas į šiuos kritinius kelius, kad pasiektumėte didžiausią našumo padidėjimą.

3. Ilgų užduočių nustatymas

longtask įrašo tipas nustato užduotis, kurios ilgą laiką blokuoja pagrindinę giją. Ilgos užduotys gali sukelti UI nereagavimą ir strigimą, o tai lemia prastą vartotojo patirtį. Galite naudoti šį kodą ilgoms užduotims stebėti:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
 console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
 });
});

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

            

              
                Copy
              
            
          

Šis kodas sukuria „PerformanceObserver“, kuris klausosi longtask įrašų ir į konsolę išveda užduoties pavadinimą ir trukmę. Analizuodami šiuos duomenis, galite nustatyti ilgai trunkančias užduotis ir jas optimizuoti, suskaidydami jas į mažesnes dalis, naudodami asinchronines operacijas arba perkeldami jas į „web worker“.

Pasaulinės rašymo gairės: Aiškindami technines sąvokas, naudokite aiškią ir glaustą kalbą, kuri būtų prieinama skaitytojams su skirtingu techninių žinių lygiu. Venkite žargono ir pateikite kontekstą nepažįstamiems terminams.

4. Naršymo laiko analizė

navigation įrašo tipas suteikia išsamią informaciją apie puslapio naršymo laiką, įskaitant DNS paieškos laiką, TCP ryšio laiką, užklausos ir atsakymo laikus bei DOM apdorojimo laiką. Šie duomenys gali būti naudojami nustatant „siauras vietas“ puslapio įkėlimo procese. Pavyzdžiui, galite naudoti šį kodą naršymo laikui analizuoti:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Navigation: ${entry.name}`);
 console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
 console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
 console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
 console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
 console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
 });
});

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

            

              
                Copy
              
            
          

Šis kodas sukuria „PerformanceObserver“, kuris klausosi navigation įrašų ir į konsolę išveda įvairias laiko metrikas. Analizuodami šiuos duomenis, galite nustatyti „siauras vietas“, tokias kaip lėta DNS paieška, lėtas TCP ryšys, lėtas užklausos apdorojimas, lėtas atsakymo apdorojimas arba lėtas DOM apdorojimas. Tada galite imtis atitinkamų veiksmų šioms problemoms spręsti, pavyzdžiui, optimizuoti DNS konfigūraciją, pagerinti serverio našumą arba optimizuoti savo HTML ir „JavaScript“ kodą.

SEO optimizavimas: Natūraliai naudokite atitinkamus raktinius žodžius visame turinyje. Šiame skyriuje sklandžiai integruoti tokie raktiniai žodžiai kaip „naršymo laikas“, „DNS paieškos laikas“, „TCP ryšio laikas“ ir „puslapio įkėlimo procesas“.

5. Išdėstymo poslinkių stebėjimas

layout-shift įrašo tipas seka netikėtus išdėstymo poslinkius puslapyje. Šie poslinkiai gali trikdyti vartotojus ir neigiamai paveikti vartotojo patirtį. Jie dažnai atsiranda dėl paveikslėlių be nurodytų matmenų, vėlai įkeliamų skelbimų ar dinamiškai įterpto turinio. Galite naudoti šį kodą išdėstymo poslinkiams stebėti:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
 console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
 console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
 });
});

observer.observe({ entryTypes: ["layout-shift"] });

            

              
                Copy
              
            
          

Šis kodas sukuria „PerformanceObserver“, kuris klausosi layout-shift įrašų ir į konsolę išveda poslinkio vertę (balą, atspindintį poslinkio dydį). Didesnė vertė rodo reikšmingesnį poslinkį. Ypatybė hadRecentInput nurodo, ar poslinkis įvyko per 500 ms nuo vartotojo įvesties. Vartotojo įvesties sukelti poslinkiai paprastai laikomi mažiau problemiškais. Ypatybė sources pateikia išsamią informaciją apie elementus, sukėlusius poslinkį. Analizuodami šiuos duomenis, galite nustatyti ir ištaisyti išdėstymo poslinkių problemas, nurodydami paveikslėlių matmenis, rezervuodami vietą skelbimams ir vengdami dinamiškai įterpti turinį, kuris gali sukelti perskaičiavimus.

Praktinė įžvalga: Naudokite įrankius, tokius kaip „Google's Lighthouse“, kad nustatytumėte išdėstymo poslinkių problemas ir gautumėte rekomendacijų, kaip jas ištaisyti. Pirmenybę teikite poslinkių, kurie įvyksta be vartotojo įvesties, taisymui.

6. Didžiausio turinio elemento atvaizdavimo (LCP) matavimas

largest-contentful-paint įrašo tipas matuoja laiką, per kurį didžiausias turinio elementas tampa matomas puslapyje. LCP yra vienas iš pagrindinių žiniatinklio rodiklių (Core Web Vitals), atspindintis suvokiamą puslapio įkėlimo greitį. Geras LCP rodiklis yra 2,5 sekundės arba mažiau. Galite naudoti šį kodą LCP matuoti:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
 console.log(`LCP Element: ${entry.element}`);
 console.log(`LCP URL: ${entry.url}`);
 });
});

observer.observe({ entryTypes: ["largest-contentful-paint"] });

            

              
                Copy
              
            
          

Šis kodas sukuria „PerformanceObserver“, kuris klausosi largest-contentful-paint įrašų ir į konsolę išveda pradžios laiką, elementą ir URL. Analizuodami šiuos duomenis, galite nustatyti didžiausią turinio elementą ir optimizuoti jo įkėlimo laiką, optimizuodami paveikslėlio dydį, naudodami CDN arba iš anksto įkeldami išteklių.

Pasaulinė perspektyva: Atsižvelkite į tai, kad skirtingiems vartotojams LCP elementai bus skirtingi, priklausomai nuo jų ekrano dydžio ir skiriamosios gebos. Kurkite savo programą taip, kad užtikrintumėte gerą LCP rodiklį įvairiuose įrenginiuose ir ekrano dydžiuose.

7. Pirmojo įvesties delsos (FID) matavimas

first-input-delay įrašo tipas matuoja laiką, per kurį naršyklė atsako į pirmąjį vartotojo veiksmą (pvz., paspaudimą). FID yra kitas pagrindinis žiniatinklio rodiklis (Core Web Vital), atspindintis puslapio interaktyvumą. Geras FID rodiklis yra 100 milisekundžių arba mažiau. Galite naudoti šį kodą FID matuoti:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
 console.log(`Event Type: ${entry.name}`);
 console.log(`Target Element: ${entry.target}`);
 });
});

observer.observe({ type: "first-input", buffered: true });

            

              
                Copy
              
            
          

Šis kodas sukuria „PerformanceObserver“, kuris klausosi first-input įrašų ir į konsolę išveda delsą, įvykio tipą ir tikslinį elementą. Analizuodami šiuos duomenis, galite nustatyti ilgų įvesties delsų priežastis ir optimizuoti savo „JavaScript“ kodą, kad sumažintumėte laiką, praleidžiamą pagrindinėje gijoje.

Praktinė įžvalga: Suskaidykite ilgai trunkančias užduotis į mažesnes dalis, naudokite „web workers“, kad perkeltumėte užduotis į fono giją, ir optimizuokite savo įvykių klausytojus, kad sumažintumėte vartotojo sąveikų apdorojimo laiką.

Pažangios technikos ir svarstymai

Be aukščiau aprašytų pagrindinių naudojimo atvejų, „Performance Observer“ API galima naudoti ir sudėtingesniuose scenarijuose, siekiant gauti gilesnių įžvalgų apie žiniatinklio programų našumą. Štai keletas pažangių technikų ir svarstymų:

1. Buferizavimo naudojimas

buffered parinktis observe() metode leidžia gauti istorinius našumo įrašus, kurie buvo įrašyti prieš sukuriant „PerformanceObserver“. Tai naudinga norint surinkti našumo duomenis, kurie atsiranda pradinio puslapio įkėlimo metu arba prieš įkeliant jūsų stebėjimo kodą. Pavyzdžiui:

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

observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });

            

              
                Copy
              
            
          

Šis kodas sukuria „PerformanceObserver“, kuris klausosi navigation ir resource įrašų ir gauna visus istorinius įrašus, kurie buvo įrašyti prieš sukuriant stebėtoją.

2. Našumo įrašų filtravimas

Galite filtruoti našumo įrašus pagal konkrečius kriterijus, kad sutelktumėte dėmesį į duomenis, kurie yra svarbiausi jūsų analizei. Pavyzdžiui, galite filtruoti išteklių įrašus pagal jų URL arba turinio tipą:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
 console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 }
 });
});

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

            

              
                Copy
              
            
          

Šis kodas sukuria „PerformanceObserver“, kuris klausosi resource įrašų ir filtruoja juos, kad būtų įtraukti tik paveikslėlių išteklių su .jpg plėtiniu įrašai.

3. „Web Workers“ naudojimas

Kad nepadarytumėte neigiamos įtakos pagrindinės gijos našumui, galite perkelti našumo stebėjimą ir analizę į „web worker“. Tai leidžia rinkti ir apdoroti našumo duomenis fone, neblokuojant UI. Pavyzdžiui, galite sukurti „web worker“, kuris klausosi našumo įvykių ir siunčia duomenis į pagrindinę giją analizei.

Pasaulinės rašymo gairės: Naudokite pavyzdžius, kurie yra aktualūs pasaulinei auditorijai. Venkite pavyzdžių, kurie būdingi konkrečiai šaliai ar kultūrai.

4. Integracija su analizės platformomis

„Performance Observer“ API galima integruoti su analizės platformomis, kad būtų galima rinkti ir analizuoti našumo duomenis centralizuotoje vietoje. Tai leidžia sekti našumo tendencijas laikui bėgant, nustatyti našumo regresijas ir susieti našumo metriką su kitais vartotojų elgsenos duomenimis. Našumo įrašus galite siųsti į savo analizės platformą naudodami jos API arba registruodami juos serverio galiniame taške.

5. „Polyfill“ naudojimas senesnėms naršyklėms

Nors „Performance Observer“ API palaiko dauguma šiuolaikinių naršyklių, senesnėse naršyklėse jos gali nebūti. Norėdami palaikyti senesnes naršykles, galite naudoti „polyfill“, kuris suteikia atsarginį API įgyvendinimą. Internete yra keletas „polyfill“, kuriuos galite naudoti savo programoje.

Geriausios praktikos naudojant „Performance Observer“ API

Norėdami efektyviai naudoti „Performance Observer“ API ir išvengti dažnų spąstų, laikykitės šių geriausių praktikų:

• Stebėkite tik tas metrikas, kurios yra svarbios jūsų tikslams. Venkite rinkti per daug duomenų, kurie gali paveikti našumą.
• Naudokite filtravimą, kad sutelktumėte dėmesį į svarbiausius duomenis. Filtruokite našumo įrašus pagal konkrečius kriterijus, kad sumažintumėte apdorojamų duomenų kiekį.
• Perkelkite našumo stebėjimą į „web worker“. Tai neleis našumo stebėjimui paveikti pagrindinės gijos našumo.
• Integruokite su analizės platformomis, kad sektumėte našumo tendencijas laikui bėgant. Tai leis jums nustatyti našumo regresijas ir susieti našumo metriką su kitais vartotojų elgsenos duomenimis.
• Naudokite „polyfill“, kad palaikytumėte senesnes naršykles. Tai užtikrins, kad jūsų našumo stebėjimo kodas veiktų įvairiose naršyklėse.
• Kruopščiai išbandykite savo našumo stebėjimo kodą. Įsitikinkite, kad jūsų kodas pats nesukelia jokių našumo problemų.
• Atsižvelkite į duomenų privatumo reglamentus. Užtikrinkite, kad nerenkate jokios asmenį identifikuojančios informacijos (PII) be vartotojo sutikimo.

SEO optimizavimas: Sukurkite patrauklų meta aprašymą. JSON metaduomenyse pateikiamas glaustas aprašymas, apibendrinantis tinklaraščio įrašo turinį.

Išvada

„Performance Observer“ API yra galingas įrankis, leidžiantis kūrėjams stebėti ir analizuoti vykdymo laiko našumo metriką, nustatyti „siauras vietas“ ir optimizuoti savo žiniatinklio programas sklandesnei, greitesnei ir malonesnei vartotojo patirčiai. Suprasdami pagrindines API sąvokas ir funkcijas bei laikydamiesi geriausių jo naudojimo praktikų, galite gauti vertingų įžvalgų apie savo programų našumą ir suteikti geresnę vartotojo patirtį savo vartotojams, nepriklausomai nuo jų buvimo vietos ar įrenginio. Žiniatinklio programoms tampant vis sudėtingesnėms, „Performance Observer“ API ir toliau bus esminis įrankis, užtikrinantis optimalų našumą ir vartotojų pasitenkinimą.

Nepamirškite, kad vartotojo patirtis yra svarbiausia. Našumo optimizavimas visada turėtų būti grindžiamas tikslu suteikti sklandžią ir malonią patirtį jūsų vartotojams. Efektyviai naudodami „Performance Observer“ API, galite giliau suprasti savo programos našumą ir priimti pagrįstus sprendimus, kaip pagerinti vartotojo patirtį.

Atidžiai apsvarstydami pasaulines našumo pasekmes, kūrėjai gali kurti žiniatinklio programas, kurios yra greitos, reaguojančios ir prieinamos vartotojams visame pasaulyje. Tam reikalingas holistinis požiūris, atsižvelgiantis į tokius veiksnius kaip tinklo delsą, įrenginio galimybes ir kultūrinius pageidavimus.