Esiosa jõudluse API ressursi ajastuse koondamine: laadimisjõudluse analüütika

Erakordsete kasutajakogemuste pakkumise püüdlustes on esiosa jõudluse optimeerimine ülioluline. Selle optimeerimise kriitiline aspekt seisneb mõistmises, kuidas ressursid teie veebisaidil või rakenduses laadivad. Resource Timing API, mis on osa laiemast Performance API komplektist, pakub üksikasjalikke ülevaateid iga brauseri poolt hangitud ressursi ajastuse kohta. See teave on hindamatu väärtusega kitsaskohtade tuvastamisel ja üldise laadimisjõudluse parandamisel. See põhjalik juhend uurib, kuidas kasutada Resource Timing API-d, koondada selle andmeid ja kasutada neid laadimisjõudluse analüütikaks.

Resource Timing API mõistmine

Resource Timing API pakub üksikasjalikku ajastusteavet veebilehe poolt laaditud ressursside, näiteks piltide, skriptide, stiililehtede ja muude varade kohta. See sisaldab selliseid mõõdikuid nagu:

• Algataja tüüp: Elemendi tüüp, mis algatas päringu (nt 'img', 'script', 'link').
• Nimi: Ressursi URL.
• Algusaeg: Ajatempel, mil brauser hakkab ressurssi hankima.
• Hankimise algus: Ajatempel vahetult enne, kui brauser hakkab ressurssi kettavahemälust või võrgust hankima.
• Domeeni otsingu algus/lõpp: Ajatemplid, mis näitavad, millal DNS-i otsinguprotsess algab ja lõpeb.
• Ühenduse algus/lõpp: Ajatemplid, mis näitavad, millal TCP-ühendus serveriga algab ja lõpeb.
• Päringu algus/lõpp: Ajatemplid, mis näitavad, millal HTTP-päring algab ja lõpeb.
• Vastuse algus/lõpp: Ajatemplid, mis näitavad, millal HTTP-vastus algab ja lõpeb.
• Ülekande suurus: Üle kantud ressursi suurus baitides.
• Kodeeritud sisu suurus: Kodeeritud (nt GZIP-pakitud) ressursi sisu suurus.
• Dekodeeritud sisu suurus: Dekodeeritud ressursi sisu suurus.
• Kestus: Ressursi hankimiseks kulunud koguaeg (responseEnd - startTime).

Need mõõdikud võimaldavad arendajatel täpselt kindlaks teha konkreetsed valdkonnad, kus saab jõudlust parandada. Näiteks võivad pikad DNS-i otsinguajad viidata vajadusele minna üle kiiremale DNS-i pakkujale või kasutada CDN-i. Aeglased ühenduse ajad võivad viidata võrgu ülekoormusele või serveripoolsetele probleemidele. Suured ülekandemahud võivad esile tuua võimalusi piltide optimeerimiseks või koodi minimeerimiseks.

Juurdepääs ressursi ajastuse andmetele

Resource Timing API-le pääseb juurde JavaScripti performance objekti kaudu:

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

resourceTimingEntries.forEach(entry => {
  console.log(entry.name, entry.duration);
});

            

              
                Copy
              
            
          

See koodilõik hangib kõik ressursi ajastuse kirjed ja logib iga ressursi nime ja kestuse konsooli. Pange tähele, et turvakaalutlustel võivad brauserid piirata Resource Timing API poolt pakutavate üksikasjade taset. Seda kontrollib sageli timingAllowOrigin päis, mis lubab ristpäritoluga ressurssidel oma ajastusteavet avaldada.

Ressursi ajastuse andmete koondamine

Toored ressursi ajastuse andmed on kasulikud, kuid tegevuspõhiste ülevaadete saamiseks tuleb neid koondada ja analüüsida. Koondamine hõlmab andmete rühmitamist ja summeerimist trendide ja mustrite tuvastamiseks. Seda saab teha mitmel viisil:

Ressursi tüübi järgi

Ressursside rühmitamine tüübi järgi (nt pildid, skriptid, stiililehed) võimaldab teil võrrelda iga kategooria keskmisi laadimisaegu. See võib paljastada, kas teatud tüüpi ressursid on järjepidevalt aeglasemad kui teised.

            const resourceTypes = {};

resourceTimingEntries.forEach(entry => {
  const initiatorType = entry.initiatorType;
  if (!resourceTypes[initiatorType]) {
    resourceTypes[initiatorType] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceTypes[initiatorType].count++;
  resourceTypes[initiatorType].totalDuration += entry.duration;
});

for (const type in resourceTypes) {
  resourceTypes[type].averageDuration = resourceTypes[type].totalDuration / resourceTypes[type].count;
  console.log(type, resourceTypes[type].averageDuration);
}

            

              
                Copy
              
            
          

See kood arvutab iga ressursitüübi keskmise laadimisaja ja logib selle konsooli. Näiteks võite avastada, et piltidel on oluliselt pikem keskmine laadimisaeg kui skriptidel, mis viitab vajadusele piltide optimeerimiseks.

Domeeni järgi

Ressursside rühmitamine domeeni järgi võimaldab teil hinnata erinevate sisu edastamise võrkude (CDN-ide) või kolmandate osapoolte teenuste jõudlust. See aitab teil tuvastada aeglaselt toimivaid domeene ja kaaluda alternatiivseid pakkujaid.

            const resourceDomains = {};

resourceTimingEntries.forEach(entry => {
  const domain = new URL(entry.name).hostname;
  if (!resourceDomains[domain]) {
    resourceDomains[domain] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceDomains[domain].count++;
  resourceDomains[domain].totalDuration += entry.duration;
});

for (const domain in resourceDomains) {
  resourceDomains[domain].averageDuration = resourceDomains[domain].totalDuration / resourceDomains[domain].count;
  console.log(domain, resourceDomains[domain].averageDuration);
}

            

              
                Copy
              
            
          

See kood arvutab iga domeeni keskmise laadimisaja ja logib selle konsooli. Kui märkate, et teatud CDN on järjepidevalt aeglane, võiksite uurida selle jõudlust või minna üle teisele pakkujale. Näiteks kaaluge stsenaariumi, kus kasutate nii Cloudflare'i kui ka Akamai'd. See koondamine võimaldaks teil otse võrrelda nende jõudlust teie konkreetses kontekstis.

Lehe järgi

Andmete koondamine lehe (või marsruudi) järgi võimaldab teil tuvastada eriti halva jõudlusega lehti. See aitab teil prioritiseerida optimeerimispingutusi ja keskenduda lehtedele, millel on suurim mõju kasutajakogemusele.

See nõuab sageli integreerimist teie rakenduse marsruutimissüsteemiga. Peaksite seostama iga ressursi ajastuse kirje praeguse lehe URL-i või marsruudiga. Rakendamine varieerub sõltuvalt kasutatavast raamistikust (nt React, Angular, Vue.js).

Kohandatud mõõdikute loomine

Lisaks Resource Timing API pakutavatele standardmõõdikutele saate luua kohandatud mõõdikuid oma rakenduse jõudluse konkreetsete aspektide jälgimiseks. Näiteks võite soovida mõõta aega, mis kulub konkreetse komponendi laadimiseks või teatud elemendi renderdamiseks.

Seda saab saavutada, kasutades meetodeid performance.mark() ja performance.measure():

            performance.mark('component-start');

// Load the component

performance.mark('component-end');

performance.measure('component-load', 'component-start', 'component-end');

const componentLoadTime = performance.getEntriesByName('component-load')[0].duration;

console.log('Component load time:', componentLoadTime);

            

              
                Copy
              
            
          

See koodilõik mõõdab komponendi laadimiseks kuluvat aega ja logib selle konsooli. Seejärel saate neid kohandatud mõõdikuid koondada samamoodi nagu standardseid Resource Timing API mõõdikuid.

Ressursi ajastuse andmete analüüsimine jõudluse ülevaadete saamiseks

Kui olete ressursi ajastuse andmed koondanud, saate neid kasutada konkreetsete jõudluse parandamise valdkondade tuvastamiseks. Siin on mõned levinud stsenaariumid ja võimalikud lahendused:

Pikad DNS-i otsinguajad

• Põhjus: Aeglane DNS-server, kauge DNS-server, harvad DNS-i otsingud.
• Lahendus: Minge üle kiiremale DNS-i pakkujale (nt Cloudflare, Google Public DNS), kasutage CDN-i DNS-kirjete vahemällu salvestamiseks kasutajatele lähemal, rakendage DNS-i eelhankimist.
• Näide: Ülemaailmselt kasutajatele suunatud veebisaidil esines teatud piirkondades aeglaseid laadimisaegu. Ressursi ajastuse andmete analüüs näitas nendes piirkondades pikki DNS-i otsinguaegu. Üleminek globaalsete DNS-serveritega CDN-ile vähendas oluliselt DNS-i otsinguaegu ja parandas üldist jõudlust.

Aeglased ühenduse ajad

• Põhjus: Võrgu ülekoormus, serveripoolsed probleemid, tulemüüri häired.
• Lahendus: Optimeerige serveri infrastruktuuri, kasutage CDN-i sisu levitamiseks kasutajatele lähemal, konfigureerige tulemüürid tõhusa suhtluse võimaldamiseks.
• Näide: E-kaubanduse veebisaidil esines ostlemise tipptundidel aeglaseid ühenduse aegu. Ressursi ajastuse andmete analüüs viitas peamise põhjusena serveri ülekoormusele. Serveri riistvara uuendamine ja andmebaasipäringute optimeerimine parandasid ühenduse aegu ja hoidsid ära jõudluse languse tipptundidel.

Suured ülekandemahud

• Põhjus: Optimeerimata pildid, minimeerimata kood, mittevajalikud varad.
• Lahendus: Optimeerige pilte (nt tihendage, muutke suurust, kasutage kaasaegseid vorminguid nagu WebP), minimeerige JavaScripti ja CSS-i kood, eemaldage kasutamata kood ja varad, lubage GZIP- või Brotli-tihendus.
• Näide: Uudiste veebisait kasutas suuri, optimeerimata pilte, mis suurendasid oluliselt lehe laadimisaegu. Piltide optimeerimine tööriistadega nagu ImageOptim ja laisa laadimise rakendamine vähendasid piltide ülekandemahtu ja parandasid lehe laadimisjõudlust.
• Rahvusvahelistumise kaalutlus: Veenduge, et piltide optimeerimisel arvestataks erinevates piirkondades levinud erinevate ekraanisuuruste ja eraldusvõimetega.

Aeglased serveri vastuseajad

• Põhjus: Ebaefektiivne serveripoolne kood, andmebaasi kitsaskohad, võrgu latentsus.
• Lahendus: Optimeerige serveripoolset koodi, parandage andmebaasi jõudlust, kasutage CDN-i sisu vahemällu salvestamiseks kasutajatele lähemal, rakendage HTTP vahemällu salvestamist.
• Näide: Sotsiaalmeedia platvormil esines ebaefektiivsete andmebaasipäringute tõttu aeglaseid serveri vastuseaegu. Andmebaasipäringute optimeerimine ja vahemällu salvestamise mehhanismide rakendamine vähendasid oluliselt serveri vastuseaegu ja parandasid üldist jõudlust.

Renderdamist blokeerivad ressursid

• Põhjus: Sünkroonne JavaScript ja CSS, mis blokeerivad lehe renderdamist.
• Lahendus: Lükake edasi mittekriitilise JavaScripti laadimine, lisage kriitiline CSS otse koodi, kasutage skriptide jaoks asünkroonset laadimist, eemaldage kasutamata CSS.
• Näide: Blogi veebisait kasutas suurt, renderdamist blokeerivat CSS-faili, mis viivitas lehe esialgset renderdamist. Kriitilise CSS-i lisamine otse koodi ja mittekriitilise CSS-i laadimise edasilükkamine parandasid veebisaidi tajutavat jõudlust.

Ressursi ajastuse andmete integreerimine jõudluse jälgimise tööriistadesse

Ressursi ajastuse andmete käsitsi kogumine ja analüüsimine võib olla aeganõudev. Õnneks on olemas mitmeid jõudluse jälgimise tööriistu, mis suudavad selle protsessi automatiseerida ja pakkuda reaalajas ülevaateid teie veebisaidi jõudlusest. Need tööriistad koguvad tavaliselt ressursi ajastuse andmeid taustal ja esitavad need kasutajasõbralikul armatuurlaual.

Populaarsed jõudluse jälgimise tööriistad, mis toetavad ressursi ajastuse andmeid, hõlmavad järgmist:

• Google PageSpeed Insights: Pakub soovitusi lehe kiiruse parandamiseks erinevate jõudlusmõõdikute, sealhulgas ressursi ajastuse andmete põhjal.
• WebPageTest: Võimaldab teil testida oma veebisaidi jõudlust erinevatest asukohtadest ja brauseritest, pakkudes üksikasjalikku ressursi ajastuse teavet.
• New Relic: Pakub terviklikke jõudluse jälgimise võimalusi, sealhulgas reaalajas ressursi ajastuse andmeid ja visualiseerimisi.
• Datadog: Pakub üksikasjalikke ressursi ajastuse mõõdikuid koos laiema infrastruktuuri ja rakenduste jälgimisega, pakkudes terviklikku ülevaadet jõudlusest.
• Sentry: Peamiselt vigade jälgimisele keskendunud Sentry pakub ka jõudluse jälgimise funktsioone, sealhulgas ressursi ajastuse andmeid jõudlusprobleemide korreleerimiseks konkreetsete vigadega.
• Lighthouse: Avatud lähtekoodiga automatiseeritud tööriist veebilehtede kvaliteedi parandamiseks. See auditeerib jõudlust, ligipääsetavust, progressiivseid veebirakendusi, SEO-d ja muud. Seda saab käivitada Chrome DevToolsist, käsurealt või Node'i moodulina.

Ressursi ajastuse andmete integreerimisega nendesse tööriistadesse saate sügavama arusaama oma veebisaidi jõudlusest ja tuvastada parandamist vajavaid valdkondi tõhusamalt.

Eetilised kaalutlused ja kasutajate privaatsus

Ressursi ajastuse andmete kogumisel ja analüüsimisel on oluline arvestada eetiliste tagajärgede ja kasutajate privaatsusega. Olge kasutajatega läbipaistev kogutavate andmete ja nende kasutamise osas. Veenduge, et järgite asjakohaseid privaatsuseeskirju, nagu GDPR ja CCPA.

Vältige isikut tuvastava teabe (PII) kogumist ja anonüümige või pseudonüümige andmed, kus see on võimalik. Rakendage asjakohaseid turvameetmeid andmete kaitsmiseks volitamata juurdepääsu või avalikustamise eest. Kaaluge kasutajatele võimaluse pakkumist jõudluse jälgimisest loobumiseks.

Täiustatud tehnikad ja tulevikutrendid

Resource Timing API areneb pidevalt ning esile kerkivad uued funktsioonid ja tehnikad esiosa jõudluse analüütika edasiseks täiustamiseks. Siin on mõned täiustatud tehnikad ja tulevikutrendid, mida tasub jälgida:

Server Timing API

Server Timing API võimaldab serveritel avaldada ajastusteavet oma töötlemisaja kohta päringu jaoks. Seda teavet saab kombineerida ressursi ajastuse andmetega, et pakkuda täielikumat pilti otsast-lõpuni jõudlusest.

Long Tasks API

Long Tasks API tuvastab ülesanded, mis blokeerivad põhilõime pikemaks ajaks, põhjustades kasutajaliidese hangumist ja reageerimisprobleeme. Seda teavet saab kasutada JavaScripti koodi optimeerimiseks ja kasutajakogemuse parandamiseks.

WebAssembly (Wasm)

WebAssembly on virtuaalmasinate jaoks mõeldud binaarne käsuformaat, mis võimaldab brauseris peaaegu natiivset jõudlust. Wasm-i kasutamine jõudluskriitiliste ülesannete jaoks võib oluliselt parandada laadimisaegu ja üldist jõudlust.

HTTP/3

HTTP/3 on HTTP-protokolli uusim versioon, mis kasutab QUIC-transpordiprotokolli parema jõudluse ja usaldusväärsuse tagamiseks. HTTP/3 pakub mitmeid eeliseid HTTP/2 ees, sealhulgas vähendatud latentsust ja paremat ühenduse haldamist.

Kokkuvõte

Resource Timing API on võimas tööriist esiosa jõudluse mõistmiseks ja optimeerimiseks. Ressursi ajastuse andmete koondamise ja analüüsimise abil saate tuvastada kitsaskohti, parandada laadimisaegu ja pakkuda paremat kasutajakogemust. Olenemata sellest, kas olete kogenud esiosa arendaja või alles alustate, on Resource Timing API valdamine oluline kõrge jõudlusega veebirakenduste loomiseks. Võtke omaks andmepõhise optimeerimise jõud ja avage oma veebisaidi või rakenduse täielik potentsiaal. Pidage meeles, et jõudlusandmete kogumisel ja analüüsimisel tuleb esikohale seada kasutajate privaatsus ja eetilised kaalutlused. Hoides end kursis uusimate suundumuste ja tehnikatega, saate tagada, et teie veebisait jääb kiireks, reageerivaks ja kasutajasõbralikuks veel aastateks. Nende tehnikate ja tööriistade kasutamine aitab kaasa jõudsamale ja globaalselt kättesaadavamale veebile.

Rakendatav ülevaade: Alustage põhilise ressursi ajastuse koondamise rakendamisest ressursitüübi ja domeeni järgi. See annab koheseid ülevaateid sellest, kus on teie jõudluse kitsaskohad. Seejärel integreerige see jõudluse jälgimise tööriistaga nagu Google PageSpeed Insights või WebPageTest, et automatiseerida andmete kogumist ja analüüsi.