AtklÄjiet dziļu ieskatu frontend veiktspÄjÄ, izmantojot Resource Timing API. Uzziniet, kÄ apkopot un analizÄt resursu laika datus optimizÄtai ielÄdes veiktspÄjai.
Frontend veiktspÄjas API resursu laika datu apkopoÅ”ana: ielÄdes veiktspÄjas analÄ«ze
CenÅ”oties nodroÅ”inÄt izcilu lietotÄju pieredzi, frontend veiktspÄjas optimizÄÅ”ana ir vissvarÄ«gÄkÄ. BÅ«tisks Ŕīs optimizÄcijas aspekts ir izpratne par to, kÄ resursi tiek ielÄdÄti jÅ«su vietnÄ vai lietojumprogrammÄ. Resource Timing API, kas ir daļa no plaÅ”Äkas Performance API kopas, sniedz detalizÄtu ieskatu katra pÄrlÅ«kprogrammas ienestÄ resursa laika datos. Å Ä« informÄcija ir nenovÄrtÄjama, lai identificÄtu vÄjÄs vietas un uzlabotu kopÄjo ielÄdes veiktspÄju. Å is visaptveroÅ”ais ceļvedis pÄta, kÄ izmantot Resource Timing API, apkopot tÄs datus un izmantot tos ielÄdes veiktspÄjas analÄ«zei.
Izpratne par Resource Timing API
Resource Timing API sniedz detalizÄtu laika informÄciju par tÄ«mekļa lapas ielÄdÄtajiem resursiem, piemÄram, attÄliem, skriptiem, stila lapÄm un citiem aktÄ«viem. Tas ietver tÄdas metrikas kÄ:
- Iniciatora tips: Elementa veids, kas iniciÄja pieprasÄ«jumu (piem., 'img', 'script', 'link').
- Nosaukums: Resursa URL.
- SÄkuma laiks: Laikspiedols, kad pÄrlÅ«kprogramma sÄk ienest resursu.
- Ieneses sÄkums: Laikspiedols tieÅ”i pirms pÄrlÅ«kprogramma sÄk ienest resursu no diska keÅ”atmiÅas vai tÄ«kla.
- DomÄna uzmeklÄÅ”anas sÄkums/beigas: Laikspiedoli, kas norÄda, kad sÄkas un beidzas DNS uzmeklÄÅ”anas process.
- Savienojuma sÄkums/beigas: Laikspiedoli, kas norÄda, kad sÄkas un beidzas TCP savienojums ar serveri.
- PieprasÄ«juma sÄkums/beigas: Laikspiedoli, kas norÄda, kad sÄkas un beidzas HTTP pieprasÄ«jums.
- Atbildes sÄkums/beigas: Laikspiedoli, kas norÄda, kad sÄkas un beidzas HTTP atbilde.
- PÄrsÅ«tÄ«Å”anas izmÄrs: PÄrsÅ«tÄ«tÄ resursa lielums baitos.
- KodÄtÄ Ä·ermeÅa izmÄrs: KodÄtÄ (piem., ar GZIP saspiestÄ) resursa Ä·ermeÅa lielums.
- DekodÄtÄ Ä·ermeÅa izmÄrs: DekodÄtÄ resursa Ä·ermeÅa lielums.
- Ilgums: KopÄjais laiks, kas pavadÄ«ts resursa ienesei (responseEnd - startTime).
Å Ä«s metrikas ļauj izstrÄdÄtÄjiem precÄ«zi noteikt konkrÄtas jomas, kurÄs var veikt veiktspÄjas uzlabojumus. PiemÄram, ilgs DNS uzmeklÄÅ”anas laiks varÄtu liecinÄt par nepiecieÅ”amÄ«bu pÄriet uz ÄtrÄku DNS pakalpojumu sniedzÄju vai izmantot CDN. LÄns savienojuma laiks varÄtu norÄdÄ«t uz tÄ«kla pÄrslodzi vai problÄmÄm servera pusÄ. Lieli pÄrsÅ«tÄ«Å”anas izmÄri varÄtu izcelt iespÄjas attÄlu optimizÄcijai vai koda minifikÄcijai.
Piekļuve resursu laika datiem
Resource Timing API var piekļūt, izmantojot performance objektu JavaScript:
const resourceTimingEntries = performance.getEntriesByType("resource");
resourceTimingEntries.forEach(entry => {
console.log(entry.name, entry.duration);
});
Å is koda fragments iegÅ«st visus resursu laika ierakstus un konsolÄ reÄ£istrÄ katra resursa nosaukumu un ilgumu. Å
emiet vÄrÄ, ka droŔības apsvÄrumu dÄļ pÄrlÅ«kprogrammas var ierobežot Resource Timing API sniegto detalizÄcijas lÄ«meni. To bieži kontrolÄ timingAllowOrigin galvene, kas ļauj starpdomÄnu resursiem atklÄt savu laika informÄciju.
Resursu laika datu apkopoŔana
NeapstrÄdÄti resursu laika dati ir noderÄ«gi, bet, lai iegÅ«tu praktiskus ieskatus, tie ir jÄapkopo un jÄanalizÄ. ApkopoÅ”ana ietver datu grupÄÅ”anu un kopsavilkumu, lai identificÄtu tendences un modeļus. To var izdarÄ«t vairÄkos veidos:
PÄc resursa veida
Resursu grupÄÅ”ana pÄc veida (piem., attÄli, skripti, stila lapas) ļauj salÄ«dzinÄt katras kategorijas vidÄjos ielÄdes laikus. Tas var atklÄt, vai noteikta veida resursi ir pastÄvÄ«gi lÄnÄki par citiem.
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);
}
Å is kods aprÄÄ·ina vidÄjo ielÄdes laiku katram resursa veidam un reÄ£istrÄ to konsolÄ. PiemÄram, jÅ«s varÄtu atklÄt, ka attÄliem ir ievÄrojami lielÄks vidÄjais ielÄdes laiks nekÄ skriptiem, kas norÄda uz nepiecieÅ”amÄ«bu veikt attÄlu optimizÄciju.
PÄc domÄna
Resursu grupÄÅ”ana pÄc domÄna ļauj novÄrtÄt dažÄdu satura piegÄdes tÄ«klu (CDN) vai treÅ”o puÅ”u pakalpojumu veiktspÄju. Tas var palÄ«dzÄt identificÄt lÄnas darbÄ«bas domÄnus un apsvÄrt alternatÄ«vus pakalpojumu sniedzÄjus.
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);
}
Å is kods aprÄÄ·ina vidÄjo ielÄdes laiku katram domÄnam un reÄ£istrÄ to konsolÄ. Ja pamanÄt, ka konkrÄts CDN ir pastÄvÄ«gi lÄns, jÅ«s varÄtu vÄlÄties izpÄtÄ«t tÄ veiktspÄju vai pÄriet uz citu pakalpojumu sniedzÄju. PiemÄram, apsveriet scenÄriju, kurÄ izmantojat gan Cloudflare, gan Akamai. Å Ä« apkopoÅ”ana ļautu tieÅ”i salÄ«dzinÄt to veiktspÄju jÅ«su konkrÄtajÄ kontekstÄ.
PÄc lapas
Datu apkopoÅ”ana pÄc lapas (vai marÅ”ruta) ļauj identificÄt lapas ar Ä«paÅ”i sliktu veiktspÄju. Tas var palÄ«dzÄt prioritizÄt optimizÄcijas centienus un koncentrÄties uz lapÄm, kurÄm ir vislielÄkÄ ietekme uz lietotÄju pieredzi.
Tas bieži prasa integrÄciju ar jÅ«su lietojumprogrammas marÅ”rutÄÅ”anas sistÄmu. Jums bÅ«tu jÄsaista katrs resursu laika ieraksts ar paÅ”reizÄjo lapas URL vai marÅ”rutu. IevieÅ”ana atŔķirtos atkarÄ«bÄ no izmantotÄ ietvara (piem., React, Angular, Vue.js).
PielÄgotu metriku izveide
Papildus standarta metrikÄm, ko nodroÅ”ina Resource Timing API, varat izveidot pielÄgotas metrikas, lai izsekotu konkrÄtus jÅ«su lietojumprogrammas veiktspÄjas aspektus. PiemÄram, jÅ«s varÄtu vÄlÄties izmÄrÄ«t laiku, kas nepiecieÅ”ams, lai ielÄdÄtu noteiktu komponentu vai renderÄtu konkrÄtu elementu.
To var panÄkt, izmantojot metodes performance.mark() un 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);
Å is koda fragments mÄra laiku, kas nepiecieÅ”ams komponenta ielÄdei, un reÄ£istrÄ to konsolÄ. PÄc tam jÅ«s varat apkopot Ŕīs pielÄgotÄs metrikas tÄdÄ paÅ”Ä veidÄ kÄ standarta Resource Timing API metrikas.
Resursu laika datu analÄ«ze veiktspÄjas ieskatiem
Kad esat apkopojis resursu laika datus, varat tos izmantot, lai identificÄtu konkrÄtas jomas veiktspÄjas uzlaboÅ”anai. Å eit ir daži izplatÄ«ti scenÄriji un iespÄjamie risinÄjumi:
Ilgs DNS uzmeklÄÅ”anas laiks
- CÄlonis: LÄns DNS serveris, tÄls DNS serveris, reti DNS uzmeklÄjumi.
- RisinÄjums: PÄriet uz ÄtrÄku DNS pakalpojumu sniedzÄju (piem., Cloudflare, Google Public DNS), izmantot CDN, lai keÅ”otu DNS ierakstus tuvÄk lietotÄjiem, ieviest DNS priekÅ”ienesi.
- PiemÄrs: Vietnei, kas paredzÄta lietotÄjiem visÄ pasaulÄ, dažos reÄ£ionos bija lÄns ielÄdes laiks. Resursu laika datu analÄ«ze atklÄja ilgu DNS uzmeklÄÅ”anas laiku Å”ajos reÄ£ionos. PÄreja uz CDN ar globÄliem DNS serveriem ievÄrojami samazinÄja DNS uzmeklÄÅ”anas laiku un uzlaboja kopÄjo veiktspÄju.
LÄns savienojuma laiks
- CÄlonis: TÄ«kla pÄrslodze, problÄmas servera pusÄ, ugunsmÅ«ra traucÄjumi.
- RisinÄjums: OptimizÄt servera infrastruktÅ«ru, izmantot CDN, lai izplatÄ«tu saturu tuvÄk lietotÄjiem, konfigurÄt ugunsmÅ«rus, lai nodroÅ”inÄtu efektÄ«vu saziÅu.
- PiemÄrs: E-komercijas vietnei bija lÄns savienojuma laiks iepirkÅ”anÄs pÄ«Ä·a stundÄs. Resursu laika datu analÄ«ze norÄdÄ«ja uz servera pÄrslodzi kÄ galveno cÄloni. Servera aparatÅ«ras jauninÄÅ”ana un datu bÄzes vaicÄjumu optimizÄÅ”ana uzlaboja savienojuma laiku un novÄrsa veiktspÄjas pasliktinÄÅ”anos pÄ«Ä·a satiksmes laikÄ.
Lieli pÄrsÅ«tÄ«Å”anas izmÄri
- CÄlonis: NeoptimizÄti attÄli, neminificÄts kods, nevajadzÄ«gi aktÄ«vi.
- RisinÄjums: OptimizÄt attÄlus (piem., saspiest, mainÄ«t izmÄru, izmantot modernus formÄtus, piemÄram, WebP), minificÄt JavaScript un CSS kodu, noÅemt neizmantotu kodu un aktÄ«vus, iespÄjot GZIP vai Brotli kompresiju.
- PiemÄrs: ZiÅu vietne izmantoja lielus, neoptimizÄtus attÄlus, kas ievÄrojami palielinÄja lapas ielÄdes laiku. AttÄlu optimizÄÅ”ana, izmantojot tÄdus rÄ«kus kÄ ImageOptim, un slinkÄs ielÄdes ievieÅ”ana samazinÄja attÄlu pÄrsÅ«tÄ«Å”anas izmÄrus un uzlaboja lapas ielÄdes veiktspÄju.
- InternacionalizÄcijas apsvÄrums: NodroÅ”iniet, ka attÄlu optimizÄcijÄ tiek Åemti vÄrÄ dažÄdi ekrÄna izmÄri un izŔķirtspÄjas, kas ir izplatÄ«tas dažÄdos reÄ£ionos.
LÄns servera atbildes laiks
- CÄlonis: NeefektÄ«vs servera puses kods, datu bÄzes vÄjÄs vietas, tÄ«kla latentums.
- RisinÄjums: OptimizÄt servera puses kodu, uzlabot datu bÄzes veiktspÄju, izmantot CDN, lai keÅ”otu saturu tuvÄk lietotÄjiem, ieviest HTTP keÅ”oÅ”anu.
- PiemÄrs: SociÄlo mediju platformai bija lÄns servera atbildes laiks neefektÄ«vu datu bÄzes vaicÄjumu dÄļ. Datu bÄzes vaicÄjumu optimizÄÅ”ana un keÅ”oÅ”anas mehÄnismu ievieÅ”ana ievÄrojami samazinÄja servera atbildes laiku un uzlaboja kopÄjo veiktspÄju.
RenderÄÅ”anu bloÄ·ÄjoÅ”i resursi
- CÄlonis: Sinhronais JavaScript un CSS, kas bloÄ·Ä lapas renderÄÅ”anu.
- RisinÄjums: Atlikt nekritiska JavaScript ielÄdi, ievietot kritisko CSS rindÄ, izmantot asinhrono ielÄdi skriptiem, likvidÄt neizmantoto CSS.
- PiemÄrs: EmuÄru vietne izmantoja lielu, renderÄÅ”anu bloÄ·ÄjoÅ”u CSS failu, kas aizkavÄja lapas sÄkotnÄjo renderÄÅ”anu. KritiskÄ CSS ievietoÅ”ana rindÄ un nekritiskÄ CSS ielÄdes atlikÅ”ana uzlaboja vietnes uztverto veiktspÄju.
Resursu laika datu integrÄÅ”ana veiktspÄjas monitoringa rÄ«kos
Resursu laika datu manuÄla vÄkÅ”ana un analizÄÅ”ana var bÅ«t laikietilpÄ«ga. Par laimi, vairÄki veiktspÄjas monitoringa rÄ«ki var automatizÄt Å”o procesu un sniegt reÄllaika ieskatus jÅ«su vietnes veiktspÄjÄ. Å ie rÄ«ki parasti vÄc resursu laika datus fonÄ un attÄlo tos lietotÄjam draudzÄ«gÄ informÄcijas panelÄ«.
PopulÄri veiktspÄjas monitoringa rÄ«ki, kas atbalsta resursu laika datus, ietver:
- Google PageSpeed Insights: Sniedz ieteikumus lapas Ätruma uzlaboÅ”anai, pamatojoties uz dažÄdÄm veiktspÄjas metrikÄm, ieskaitot resursu laika datus.
- WebPageTest: Ä»auj pÄrbaudÄ«t jÅ«su vietnes veiktspÄju no dažÄdÄm atraÅ”anÄs vietÄm un pÄrlÅ«kprogrammÄm, sniedzot detalizÄtu resursu laika informÄciju.
- New Relic: PiedÄvÄ visaptveroÅ”as veiktspÄjas monitoringa iespÄjas, ieskaitot reÄllaika resursu laika datus un vizualizÄcijas.
- Datadog: Sniedz detalizÄtas resursu laika metrikas lÄ«dztekus plaÅ”Äkai infrastruktÅ«ras un lietojumprogrammu monitoringam, piedÄvÄjot holistisku skatÄ«jumu uz veiktspÄju.
- Sentry: GalvenokÄrt koncentrÄjoties uz kļūdu izsekoÅ”anu, Sentry nodroÅ”ina arÄ« veiktspÄjas monitoringa funkcijas, ieskaitot resursu laika datus, lai korelÄtu veiktspÄjas problÄmas ar konkrÄtÄm kļūdÄm.
- Lighthouse: AtvÄrtÄ koda, automatizÄts rÄ«ks tÄ«mekļa lapu kvalitÄtes uzlaboÅ”anai. Tam ir auditi veiktspÄjai, pieejamÄ«bai, progresÄ«vajÄm tÄ«mekļa lietotnÄm, SEO un citiem. To var palaist no Chrome DevTools, no komandrindas vai kÄ Node moduli.
IntegrÄjot resursu laika datus Å”ajos rÄ«kos, jÅ«s varat iegÅ«t dziļÄku izpratni par savas vietnes veiktspÄju un efektÄ«vÄk identificÄt uzlabojumu jomas.
Ätiskie apsvÄrumi un lietotÄju privÄtums
VÄcot un analizÄjot resursu laika datus, ir bÅ«tiski apsvÄrt ÄtiskÄs sekas un lietotÄju privÄtumu. Esiet caurspÄ«dÄ«gi ar lietotÄjiem par datiem, ko vÄcat, un kÄ tie tiek izmantoti. NodroÅ”iniet, ka jÅ«s ievÄrojat attiecÄ«gos privÄtuma noteikumus, piemÄram, GDPR un CCPA.
Izvairieties no personu identificÄjoÅ”as informÄcijas (PII) vÄkÅ”anas un anonimizÄjiet vai pseidonimizÄjiet datus, kur tas ir iespÄjams. Ieviesiet atbilstoÅ”us droŔības pasÄkumus, lai aizsargÄtu datus no neatļautas piekļuves vai izpauÅ”anas. Apsveriet iespÄju piedÄvÄt lietotÄjiem atteikties no veiktspÄjas monitoringa.
ProgresÄ«vas metodes un nÄkotnes tendences
Resource Timing API nepÄrtraukti attÄ«stÄs, un parÄdÄs jaunas funkcijas un metodes, lai vÄl vairÄk uzlabotu frontend veiktspÄjas analÄ«zi. Å eit ir dažas progresÄ«vas metodes un nÄkotnes tendences, kurÄm pievÄrst uzmanÄ«bu:
Server Timing API
Server Timing API ļauj serveriem atklÄt laika informÄciju par pieprasÄ«juma apstrÄdes laiku. Å o informÄciju var apvienot ar resursu laika datiem, lai sniegtu pilnÄ«gÄku priekÅ”statu par veiktspÄju no sÄkuma lÄ«dz beigÄm.
Long Tasks API
Long Tasks API identificÄ uzdevumus, kas bloÄ·Ä galveno pavedienu uz ilgÄku laiku, izraisot UI sasalÅ”anu un atsaucÄ«bas problÄmas. Å o informÄciju var izmantot, lai optimizÄtu JavaScript kodu un uzlabotu lietotÄja pieredzi.
WebAssembly (Wasm)
WebAssembly ir binÄrs instrukciju formÄts virtuÄlajÄm maŔīnÄm, kas nodroÅ”ina gandrÄ«z vietÄjo veiktspÄju pÄrlÅ«kprogrammÄ. Wasm izmantoÅ”ana veiktspÄjas ziÅÄ kritiskiem uzdevumiem var ievÄrojami uzlabot ielÄdes laiku un kopÄjo veiktspÄju.
HTTP/3
HTTP/3 ir jaunÄkÄ HTTP protokola versija, kas izmanto QUIC transporta protokolu, lai nodroÅ”inÄtu uzlabotu veiktspÄju un uzticamÄ«bu. HTTP/3 piedÄvÄ vairÄkas priekÅ”rocÄ«bas salÄ«dzinÄjumÄ ar HTTP/2, tostarp samazinÄtu latentumu un uzlabotu savienojumu pÄrvaldÄ«bu.
NoslÄgums
Resource Timing API ir spÄcÄ«gs rÄ«ks, lai izprastu un optimizÄtu frontend veiktspÄju. Apkopojot un analizÄjot resursu laika datus, jÅ«s varat identificÄt vÄjÄs vietas, uzlabot ielÄdes laiku un nodroÅ”inÄt labÄku lietotÄja pieredzi. NeatkarÄ«gi no tÄ, vai esat pieredzÄjis frontend izstrÄdÄtÄjs vai tikai sÄkat, Resource Timing API apgÅ«Å”ana ir bÅ«tiska augstas veiktspÄjas tÄ«mekļa lietojumprogrammu izveidÄ. Izmantojiet uz datiem balstÄ«tas optimizÄcijas spÄku un atraisiet pilnu savas vietnes vai lietojumprogrammas potenciÄlu. Atcerieties, ka, apkopojot un analizÄjot veiktspÄjas datus, prioritÄte ir lietotÄju privÄtums un Ätiskie apsvÄrumi. Esot informÄti par jaunÄkajÄm tendencÄm un metodÄm, jÅ«s varat nodroÅ”inÄt, ka jÅ«su vietne paliek Ätra, atsaucÄ«ga un lietotÄjam draudzÄ«ga turpmÄkajos gados. Å o metožu un rÄ«ku izmantoÅ”ana veicinÄs veiktspÄjÄ«gÄku un globÄli pieejamÄku tÄ«mekli.
Praktisks ieteikums: SÄciet ar pamata resursu laika datu apkopoÅ”anu pÄc resursa veida un domÄna. Tas sniedz tÅ«lÄ«tÄju ieskatu par to, kur ir jÅ«su veiktspÄjas vÄjÄs vietas. PÄc tam integrÄjiet ar veiktspÄjas monitoringa rÄ«ku, piemÄram, Google PageSpeed Insights vai WebPageTest, lai automatizÄtu datu vÄkÅ”anu un analÄ«zi.