Performance Timeline: Išsamus metrikos rinkimo vadovas

Šiuolaikiniame sparčiai besivystančiame skaitmeniniame pasaulyje svetainės našumas yra svarbiausias. Vartotojai tikisi, kad svetainės įsikraus greitai ir reaguos akimirksniu. Lėta svetainė gali sukelti nusivylimą, nutrauktus seansus ir galiausiai prarastas pajamas. Laimei, šiuolaikinės naršyklės suteikia galingus įrankius svetainės našumui matuoti ir analizuoti. Vienas iš vertingiausių šių įrankių yra Performance Timeline API.

Šiame išsamiame vadove išsamiai nagrinėsime Performance Timeline API, apimdami viską nuo pagrindinių koncepcijų iki pažangių metodų našumo metrikai rinkti ir analizuoti. Gilinsimės į įvairius našumo įrašų tipus, parodysime, kaip efektyviai naudoti API, ir pateiksime praktinių pavyzdžių, padėsiančių optimizuoti jūsų svetainės našumą.

Kas yra Performance Timeline API?

Performance Timeline API yra JavaScript sąsajų rinkinys, suteikiantis prieigą prie naršyklės surinktų su našumu susijusių duomenų. Tai leidžia programuotojams matuoti įvairius svetainės našumo aspektus, tokius kaip:

• Puslapio įkėlimo laikas
• Išteklių įkėlimo laikas (paveikslėlių, scenarijų, stilių lentelių)
• Vartotojo laiko matavimai
• Kadrų dažnis ir atvaizdavimo našumas
• Atminties naudojimas

Rinkdami ir analizuodami šiuos duomenis, programuotojai gali nustatyti našumo trūkumus ir įdiegti optimizacijas, siekdami pagerinti vartotojo patirtį. API suteikia standartizuotą būdą pasiekti našumo duomenis, todėl lengviau kurti našumo stebėjimo įrankius, veikiančius įvairiose naršyklėse.

Pagrindinės sąvokos ir sąsajos

Performance Timeline API sukasi aplink kelias pagrindines sąvokas ir sąsajas:

• Performance Timeline (Našumo laiko juosta): Atspindi našumo įvykių laiko juostą, kurie įvyko tinklalapio gyvavimo metu. Tai centrinis taškas, per kurį pasiekiami našumo duomenys.
• Performance Entry (Našumo įrašas): Atspindi vieną našumo įvykį, pavyzdžiui, ištekliaus įkėlimo įvykį arba vartotojo apibrėžtą laiko matavimą.
• Performance Observer (Našumo stebėtojas): Leidžia programuotojams stebėti našumo laiko juostą dėl naujų našumo įrašų ir reaguoti į juos realiuoju laiku.
• `performance` objektas: Globalus objektas (`window.performance`), suteikiantis prieigą prie našumo laiko juostos ir susijusių metodų.

`performance` objektas

`performance` objektas yra pradinis taškas bendraujant su Performance Timeline API. Jis suteikia metodus našumo įrašams gauti, laiko juostai išvalyti ir našumo stebėtojams kurti. Kai kurie iš dažniausiai naudojamų metodų apima:

• `performance.getEntries()`: Grąžina visų našumo įrašų masyvą laiko juostoje.
• `performance.getEntriesByName(name, entryType)`: Grąžina našumo įrašų masyvą su konkrečiu pavadinimu ir įrašo tipu.
• `performance.getEntriesByType(entryType)`: Grąžina tam tikro tipo našumo įrašų masyvą.
• `performance.clearMarks(markName)`: Išvalo našumo žymes su konkrečiu pavadinimu.
• `performance.clearMeasures(measureName)`: Išvalo našumo matavimus su konkrečiu pavadinimu.
• `performance.now()`: Grąžina didelės skiriamosios gebos laiko žymą, paprastai milisekundėmis, rodančią laiką, praėjusį nuo naršymo pradžios. Tai yra labai svarbu trukmėms matuoti.

Našumo įrašų tipai

Performance Timeline API apibrėžia kelis skirtingus našumo įrašų tipus, kurių kiekvienas atspindi konkretų našumo įvykio tipą. Kai kurie iš svarbiausių įrašų tipų yra:

• `navigation`: Atspindi puslapio įkėlimo navigacijos laiką, įskaitant DNS paieškos, TCP ryšio, užklausos ir atsakymo laikus.
• `resource`: Atspindi konkretaus ištekliaus, pavyzdžiui, paveikslėlio, scenarijaus ar stilių lentelės, įkėlimą.
• `mark`: Atspindi vartotojo apibrėžtą laiko žymą laiko juostoje.
• `measure`: Atspindi vartotojo apibrėžtą trukmę laiko juostoje, apskaičiuotą tarp dviejų žymių.
• `paint`: Atspindi laiką, per kurį naršyklė nupiešia pirmąjį turinį ekrane (First Paint) ir pirmąjį prasmingą turinį (First Contentful Paint).
• `longtask`: Atspindi užduotis, kurios ilgą laiką blokuoja pagrindinę giją (paprastai ilgiau nei 50 ms), galimai sukeldamos vartotojo sąsajos strigimą.
• `event`: Atspindi naršyklės įvykį, pavyzdžiui, pelės paspaudimą ar klavišo paspaudimą.
• `layout-shift`: Atspindi netikėtus puslapio išdėstymo poslinkius, kurie gali sutrikdyti vartotojo patirtį (Cumulative Layout Shift).
• `largest-contentful-paint`: Atspindi laiką, per kurį didžiausias turinio elementas matomoje srityje tampa matomas.

Našumo metrikos rinkimas

Yra keletas būdų, kaip rinkti našumo metriką naudojant Performance Timeline API. Dažniausi metodai apima:

• Įrašų gavimas tiesiogiai iš laiko juostos: Naudojant `performance.getEntries()`, `performance.getEntriesByName()` arba `performance.getEntriesByType()` konkretiems našumo įrašams gauti.
• Naudojant Performance Observer: Stebint laiko juostą dėl naujų įrašų ir reaguojant į juos realiuoju laiku.

Tiesioginis įrašų gavimas

Paprasčiausias būdas rinkti našumo metriką yra gauti įrašus tiesiogiai iš laiko juostos. Tai naudinga renkant duomenis po to, kai įvyko konkretus įvykis, pavyzdžiui, po puslapio įkėlimo arba po to, kai vartotojas sąveikavo su konkrečiu elementu.

Štai pavyzdys, kaip gauti visus išteklių įrašus iš laiko juostos:

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

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

            

              
                Copy
              
            
          

Šis kodas gauna visus „resource“ tipo įrašus ir į konsolę išveda kiekvieno ištekliaus pavadinimą bei trukmę.

Performance Observer naudojimas

Performance Observer leidžia stebėti našumo laiko juostą dėl naujų našumo įrašų ir reaguoti į juos realiuoju laiku. Tai ypač naudinga renkant duomenis, kai jie tampa prieinami, nereikalaujant nuolat tikrinti laiko juostos.

Štai pavyzdys, kaip naudoti Performance Observer naujiems išteklių įrašams stebėti:

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

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

            

              
                Copy
              
            
          

Šis kodas sukuria Performance Observer, kuris klauso naujų „resource“ tipo įrašų. Kai į laiko juostą pridedamas naujas ištekliaus įrašas, vykdoma stebėtojo atgalinio iškvietimo funkcija, kuri į konsolę išveda ištekliaus pavadinimą ir trukmę. `observer.observe()` metodas nurodo, kuriuos įrašų tipus stebėtojas turėtų stebėti.

Vartotojo laiko matavimas

Performance Timeline API taip pat leidžia apibrėžti savo pasirinktines našumo metrikas naudojant `mark` ir `measure` įrašų tipus. Tai naudinga matuojant laiką, per kurį įvykdomos konkrečios jūsų programos dalys, pavyzdžiui, komponento atvaizdavimas ar vartotojo įvesties apdorojimas.

Norėdami išmatuoti vartotojo laiką, pirmiausia sukuriate `mark`, kad pažymėtumėte norimos matuoti sekcijos pradžią ir pabaigą. Tada sukuriate `measure`, kad apskaičiuotumėte trukmę tarp dviejų žymių.

Štai pavyzdys, kaip išmatuoti laiką, per kurį atvaizduojamas komponentas:

            
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
              
            
          

Šis kodas sukuria dvi žymes, `component-render-start` ir `component-render-end`, prieš ir po kodo, kuris atvaizduoja komponentą. Tada jis sukuria matavimą pavadinimu `component-render-time`, kad apskaičiuotų trukmę tarp dviejų žymių. Galiausiai jis gauna matavimo įrašą iš laiko juostos ir išveda trukmę į konsolę.

Našumo metrikos analizė

Surinkę našumo metriką, turite ją išanalizuoti, kad nustatytumėte našumo trūkumus ir įdiegtumėte optimizacijas. Šiam tikslui galite naudoti kelis įrankius ir metodus:

• Naršyklės programuotojų įrankiai: Dauguma šiuolaikinių naršyklių turi integruotus programuotojų įrankius, kurie leidžia vizualizuoti ir analizuoti našumo duomenis. Šie įrankiai paprastai apima „Performance“ skydelį, kuris rodo našumo įvykių laiko juostą, taip pat įrankius JavaScript kodo profiliavimui ir atminties naudojimo analizei.
• Našumo stebėjimo įrankiai: Yra daug trečiųjų šalių našumo stebėjimo įrankių, kurie gali padėti rinkti, analizuoti ir vizualizuoti našumo duomenis. Šie įrankiai dažnai siūlo pažangias funkcijas, tokias kaip stebėjimas realiuoju laiku, anomalijų aptikimas ir automatinis ataskaitų teikimas. Pavyzdžiai: „New Relic“, „Datadog“ ir „Sentry“.
• Web Vitals: „Google“ iniciatyva „Web Vitals“ pateikia metrikų rinkinį, kuris laikomas esminiu vartotojo patirčiai matuoti. Šios metrikos apima „Largest Contentful Paint“ (LCP), „First Input Delay“ (FID) ir „Cumulative Layout Shift“ (CLS). Šių metrikų stebėjimas gali padėti nustatyti ir išspręsti dažniausiai pasitaikančias našumo problemas.

Naršyklės programuotojų įrankių naudojimas

Naršyklės programuotojų įrankiai yra galingas ir lengvai prieinamas resursas našumo analizei. Štai kaip galite naudoti „Performance“ skydelį „Chrome Developer Tools“ (kitos naršyklės turi panašias funkcijas):

1. Atidarykite programuotojų įrankius: Dešiniuoju pelės mygtuku spustelėkite tinklalapį ir pasirinkite „Inspect“ arba paspauskite F12.
2. Eikite į „Performance“ skydelį: Spustelėkite „Performance“ skirtuką.
3. Pradėkite įrašymą: Spustelėkite įrašymo mygtuką (dažniausiai apskritimą), kad pradėtumėte fiksuoti našumo duomenis.
4. Sąveikaukite su puslapiu: Atlikite veiksmus, kuriuos norite analizuoti, pavyzdžiui, įkelkite puslapį, spauskite mygtukus ar slinkite.
5. Sustabdykite įrašymą: Spustelėkite sustabdymo mygtuką, kad baigtumėte įrašymą.
6. Analizuokite laiko juostą: „Performance“ skydelis parodys našumo įvykių laiko juostą, įskaitant įkėlimo laikus, JavaScript vykdymą, atvaizdavimą ir piešimą.

Laiko juosta pateikia išsamią informaciją apie kiekvieną įvykį, įskaitant jo trukmę, pradžios laiką ir ryšį su kitais įvykiais. Galite priartinti ir atitolinti, filtruoti įvykius pagal tipą ir tikrinti atskirus įvykius, kad gautumėte daugiau informacijos. Skirtukai „Bottom-Up“, „Call Tree“ ir „Event Log“ pateikia skirtingas duomenų perspektyvas, leidžiančias nustatyti našumo trūkumus ir optimizuoti kodą.

Web Vitals: Vartotojo patirties matavimas

„Web Vitals“ yra „Google“ apibrėžtas metrikų rinkinys, skirtas vartotojo patirčiai svetainėje matuoti. Dėmesys šioms metrikoms gali žymiai pagerinti vartotojų pasitenkinimą ir SEO reitingą.

• Largest Contentful Paint (LCP): Matuoja laiką, per kurį didžiausias turinio elementas matomoje srityje tampa matomas. Geras LCP rodiklis yra 2,5 sekundės ar mažiau.
• First Input Delay (FID): Matuoja laiką, per kurį naršyklė atsako į pirmąją vartotojo sąveiką (pvz., mygtuko paspaudimą ar nuorodos palietimą). Geras FID rodiklis yra 100 milisekundžių ar mažiau.
• Cumulative Layout Shift (CLS): Matuoja netikėtų išdėstymo poslinkių, kurie atsiranda puslapyje, kiekį. Geras CLS rodiklis yra 0,1 ar mažiau.

„Web Vitals“ galite matuoti naudodami įvairius įrankius, įskaitant:

• Chrome User Experience Report (CrUX): Pateikia realaus pasaulio našumo duomenis svetainėms, pagrįstus anoniminiais „Chrome“ vartotojų duomenimis.
• Lighthouse: Automatizuotas įrankis, kuris tikrina tinklalapių našumą, prieinamumą ir SEO.
• Web Vitals Extension: „Chrome“ plėtinys, kuris rodo „Web Vitals“ metriką realiuoju laiku, kai naršote internete.
• PerformanceObserver API: Tiesiogiai fiksuokite „Web Vitals“ duomenis iš naršyklės, kai vyksta įvykiai.

Praktiniai pavyzdžiai ir naudojimo atvejai

Štai keletas praktinių pavyzdžių ir naudojimo atvejų, kaip galite naudoti Performance Timeline API, norėdami optimizuoti savo svetainės našumą:

• Lėtai įkeliamų išteklių nustatymas: Naudokite `resource` įrašo tipą, kad nustatytumėte paveikslėlius, scenarijus ir stilių lenteles, kurių įkėlimas trunka ilgai. Optimizuokite šiuos išteklius juos suspausdami, naudodami turinio pristatymo tinklą (CDN) arba taikydami atidėtąjį įkėlimą (lazy-loading). Pavyzdžiui, daugelis e. prekybos platformų, tokių kaip „Shopify“, „Magento“ ar „WooCommerce“, naudoja paveikslėlius produktams parduoti. Paveikslėlių įkėlimo optimizavimas, remiantis našumo laiko juostos duomenimis, pagerins klientų patirtį, ypač mobiliųjų įrenginių vartotojams.
• JavaScript vykdymo laiko matavimas: Naudokite `mark` ir `measure` įrašų tipus, kad išmatuotumėte laiką, per kurį įvykdomos konkrečios JavaScript funkcijos. Nustatykite lėtai veikiančias funkcijas ir optimizuokite jas naudodami efektyvesnius algoritmus, talpindami rezultatus talpykloje (caching) arba atidėdami vykdymą vėlesniam laikui.
• Ilgų užduočių aptikimas: Naudokite `longtask` įrašo tipą, kad nustatytumėte užduotis, kurios ilgą laiką blokuoja pagrindinę giją. Suskaidykite šias užduotis į mažesnes dalis arba perkelkite jas į foninę giją, kad išvengtumėte vartotojo sąsajos strigimo.
• First Contentful Paint (FCP) ir Largest Contentful Paint (LCP) stebėjimas: Naudokite `paint` ir `largest-contentful-paint` įrašų tipus, kad stebėtumėte laiką, per kurį ekrane pasirodo pirmasis turinys ir didžiausias turinys. Optimizuokite kritinį atvaizdavimo kelią, kad pagerintumėte šias metrikas.
• Cumulative Layout Shift (CLS) analizė: Naudokite `layout-shift` įrašo tipą, kad nustatytumėte elementus, kurie sukelia netikėtus išdėstymo poslinkius. Rezervuokite vietą šiems elementams arba naudokite `transform` savybę, kad juos animuotumėte nesukeldami išdėstymo poslinkių.

Pažangūs metodai

Kai gerai suprasite Performance Timeline API pagrindus, galite išbandyti keletą pažangių metodų, kad dar labiau optimizuotumėte savo svetainės našumą:

• Real User Monitoring (RUM): Rinkite našumo duomenis iš realių vartotojų, kad gautumėte tikslesnį vaizdą apie savo svetainės našumą. Naudokite RUM įrankį arba įgyvendinkite savo pasirinktinį RUM sprendimą naudodami Performance Timeline API. Šie duomenys gali būti naudojami regioniniams našumo skirtumams nustatyti. Pavyzdžiui, JAV talpinama svetainė Azijoje gali būti įkeliama lėčiau dėl tinklo delsos.
• Sintetinis stebėjimas: Naudokite sintetinį stebėjimą, kad imituotumėte vartotojų sąveikas ir matuotumėte našumą kontroliuojamoje aplinkoje. Tai gali padėti nustatyti našumo problemas, kol jos nepaveikė realių vartotojų.
• Automatizuotas našumo testavimas: Integruokite našumo testavimą į savo nuolatinės integracijos/nuolatinio diegimo (CI/CD) procesą, kad automatiškai aptiktumėte našumo regresijas. Šiam procesui automatizuoti galima naudoti tokius įrankius kaip „Lighthouse CI“.
• Našumo biudžetai: Nustatykite našumo biudžetus pagrindinėms metrikoms, tokioms kaip puslapio įkėlimo laikas, išteklių dydis ir JavaScript vykdymo laikas. Naudokite automatizuotus įrankius šiems biudžetams stebėti ir pranešti, kai jie viršijami.

Suderinamumas su įvairiomis naršyklėmis

Performance Timeline API yra plačiai palaikoma šiuolaikinių naršyklių, įskaitant „Chrome“, „Firefox“, „Safari“ ir „Edge“. Tačiau gali būti tam tikrų API įgyvendinimo ir elgsenos skirtumų skirtingose naršyklėse.

Norint užtikrinti suderinamumą su įvairiomis naršyklėmis, svarbu išbandyti savo kodą skirtingose naršyklėse ir naudoti funkcijų aptikimą, kad funkcionalumas būtų tinkamai sumažintas, jei API nepalaikoma. Bibliotekos, tokios kaip `modernizr`, gali padėti aptikti funkcijas.

Geroji praktika

Štai keletas gerosios praktikos pavyzdžių, kaip naudoti Performance Timeline API:

• Naudokite Performance Observers stebėjimui realiuoju laiku: Performance Observers suteikia efektyvesnį būdą rinkti našumo duomenis nei nuolatinis laiko juostos tikrinimas.
• Atsižvelkite į našumo duomenų rinkimo poveikį našumui: Per didelio duomenų kiekio rinkimas gali neigiamai paveikti jūsų svetainės našumą. Rinkite tik tuos duomenis, kurių jums reikia, ir venkite vykdyti brangias operacijas Performance Observer atgalinio iškvietimo funkcijoje.
• Naudokite prasmingus pavadinimus žymėms ir matavimams: Tai palengvins duomenų analizę ir našumo trūkumų nustatymą.
• Išbandykite savo kodą skirtingose naršyklėse: Užtikrinkite suderinamumą su įvairiomis naršyklėmis, išbandydami savo kodą skirtingose naršyklėse ir naudodami funkcijų aptikimą.
• Derinkite su kitais optimizavimo metodais: Performance Timeline API padeda matuoti ir nustatyti problemas. Naudokite jį kartu su nusistovėjusiomis žiniatinklio optimizavimo gerosiomis praktikomis (paveikslėlių optimizavimas, minifikavimas, CDN naudojimas), kad pasiektumėte visapusišką našumo pagerinimą.

Išvada

Performance Timeline API yra galingas įrankis svetainės našumui matuoti ir analizuoti. Suprasdami pagrindines API sąvokas ir sąsajas, galite rinkti vertingą našumo metriką ir naudoti ją našumo trūkumams nustatyti bei optimizacijoms įgyvendinti. Sutelkdami dėmesį į „Web Vitals“ ir taikydami pažangius metodus, tokius kaip RUM ir automatizuotas našumo testavimas, galite suteikti greitesnę, sklandesnę ir malonesnę vartotojo patirtį. Performance Timeline API pritaikymas ir našumo analizės integravimas į jūsų kūrimo eigą leis pasiekti reikšmingų jūsų svetainės našumo ir vartotojų pasitenkinimo pagerėjimų šiandieninėje, našumu pagrįstoje, interneto aplinkoje.