Frontend našumo API resursų laiko duomenų agregavimas: įkrovimo našumo analizė

Siekiant užtikrinti išskirtinę vartotojo patirtį, frontend našumo optimizavimas yra nepaprastai svarbus. Svarbus šio optimizavimo aspektas yra supratimas, kaip jūsų svetainėje ar programoje įkeliami resursai. Resource Timing API, priklausanti platesniam Performance API rinkiniui, suteikia išsamią informaciją apie kiekvieno naršyklės atsiųsto resurso laiko duomenis. Ši informacija yra neįkainojama nustatant kliūtis ir gerinant bendrą įkrovimo našumą. Šiame išsamiame vadove nagrinėjama, kaip panaudoti Resource Timing API, apibendrinti jos duomenis ir naudoti juos įkrovimo našumo analizei.

Resource Timing API supratimas

Resource Timing API suteikia išsamią laiko informaciją apie tinklalapio įkeltus resursus, tokius kaip paveikslėliai, scenarijai, stilių aprašai ir kitas turtas. Tai apima metrikas, tokias kaip:

• Iniciatoriaus tipas: Elemento, kuris inicijavo užklausą, tipas (pvz., 'img', 'script', 'link').
• Pavadinimas: Resurso URL.
• Pradžios laikas: Laiko žyma, kada naršyklė pradeda atsiųsti resursą.
• Atsiuntimo pradžia: Laiko žyma, esanti iškart prieš naršyklei pradedant atsiųsti resursą iš disko podėlio ar tinklo.
• Domeno paieškos pradžia/pabaiga: Laiko žymos, nurodančios, kada prasideda ir baigiasi DNS paieškos procesas.
• Prisijungimo pradžia/pabaiga: Laiko žymos, nurodančios, kada prasideda ir baigiasi TCP prisijungimas prie serverio.
• Užklausos pradžia/pabaiga: Laiko žymos, nurodančios, kada prasideda ir baigiasi HTTP užklausa.
• Atsakymo pradžia/pabaiga: Laiko žymos, nurodančios, kada prasideda ir baigiasi HTTP atsakymas.
• Perduotas dydis: Perduoto resurso dydis baitais.
• Užkoduoto turinio dydis: Užkoduoto (pvz., GZIP suspausto) resurso turinio dydis.
• Iškoduoto turinio dydis: Iškoduoto resurso turinio dydis.
• Trukmė: Bendras laikas, praleistas atsiunčiant resursą (responseEnd - startTime).

Šios metrikos leidžia kūrėjams tiksliai nustatyti konkrečias sritis, kuriose galima pagerinti našumą. Pavyzdžiui, ilgi DNS paieškos laikai gali reikšti, kad reikėtų pereiti prie greitesnio DNS tiekėjo arba pasinaudoti CDN. Lėti prisijungimo laikai gali rodyti tinklo perkrovas ar serverio problemas. Dideli perduodamų failų dydžiai gali atkreipti dėmesį į galimybes optimizuoti paveikslėlius arba sumažinti kodo apimtį.

Prieiga prie resursų laiko duomenų

Prieiga prie Resource Timing API yra suteikiama per performance objektą JavaScript kalboje:

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

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

            

              
                Copy
              
            
          

Šis kodo fragmentas gauna visus resursų laiko įrašus ir išveda kiekvieno resurso pavadinimą ir trukmę į konsolę. Atkreipkite dėmesį, kad dėl saugumo priežasčių naršyklės gali apriboti Resource Timing API teikiamų duomenų detalumą. Tai dažnai kontroliuojama per timingAllowOrigin antraštę, kuri leidžia kitos kilmės resursams atskleisti savo laiko informaciją.

Resursų laiko duomenų agregavimas

Neapdoroti resursų laiko duomenys yra naudingi, tačiau norint gauti praktinių įžvalgų, juos reikia apibendrinti ir analizuoti. Agregavimas apima duomenų grupavimą ir apibendrinimą, siekiant nustatyti tendencijas ir modelius. Tai galima padaryti keliais būdais:

Pagal resurso tipą

Resursų grupavimas pagal tipą (pvz., paveikslėliai, scenarijai, stilių aprašai) leidžia palyginti vidutinius kiekvienos kategorijos įkrovimo laikus. Tai gali atskleisti, ar tam tikrų tipų resursai yra nuolat lėtesni už kitus.

            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
              
            
          

Šis kodas apskaičiuoja vidutinį kiekvieno resurso tipo įkrovimo laiką ir išveda jį į konsolę. Pavyzdžiui, galite pastebėti, kad paveikslėlių vidutinis įkrovimo laikas yra žymiai didesnis nei scenarijų, o tai rodo poreikį optimizuoti paveikslėlius.

Pagal domeną

Resursų grupavimas pagal domeną leidžia įvertinti skirtingų turinio pristatymo tinklų (CDN) ar trečiųjų šalių paslaugų našumą. Tai gali padėti nustatyti lėtai veikiančius domenus ir apsvarstyti alternatyvius tiekė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);
}

            

              
                Copy
              
            
          

Šis kodas apskaičiuoja vidutinį kiekvieno domeno įkrovimo laiką ir išveda jį į konsolę. Jei pastebite, kad tam tikras CDN veikia nuolat lėtai, galbūt norėsite ištirti jo našumą arba pereiti prie kito tiekėjo. Pavyzdžiui, apsvarstykite scenarijų, kai naudojate ir Cloudflare, ir Akamai. Šis agregavimas leistų tiesiogiai palyginti jų našumą jūsų konkrečiame kontekste.

Pagal puslapį

Duomenų agregavimas pagal puslapį (arba maršrutą) leidžia nustatyti puslapius su ypač prastu našumu. Tai gali padėti nustatyti optimizavimo pastangų prioritetus ir sutelkti dėmesį į puslapius, kurie daro didžiausią įtaką vartotojo patirčiai.

Tam dažnai reikalinga integracija su jūsų programos maršrutizavimo sistema. Jums reikėtų susieti kiekvieną resurso laiko įrašą su dabartiniu puslapio URL arba maršrutu. Įgyvendinimas skirtųsi priklausomai nuo naudojamos karkaso (pvz., React, Angular, Vue.js).

Individualių metrikų kūrimas

Be standartinių metrikų, kurias teikia Resource Timing API, galite sukurti individualias metrikas, kad stebėtumėte konkrečius savo programos našumo aspektus. Pavyzdžiui, galbūt norėsite išmatuoti laiką, reikalingą konkrečiam komponentui įkelti ar tam tikram elementui atvaizduoti.

Tai galima pasiekti naudojant performance.mark() ir performance.measure() metodus:

            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
              
            
          

Šis kodo fragmentas matuoja laiką, per kurį įkeliamas komponentas, ir išveda jį į konsolę. Vėliau galite apibendrinti šias individualias metrikas taip pat, kaip ir standartines Resource Timing API metrikas.

Resursų laiko duomenų analizė našumo įžvalgoms

Kai jau turite apibendrintus resursų laiko duomenis, galite juos naudoti norėdami nustatyti konkrečias sritis, kuriose galima pagerinti našumą. Štai keletas dažniausiai pasitaikančių scenarijų ir galimų sprendimų:

Ilgi DNS paieškos laikai

• Priežastis: Lėtas DNS serveris, toli esantis DNS serveris, retos DNS paieškos.
• Sprendimas: Pereiti prie greitesnio DNS tiekėjo (pvz., Cloudflare, Google Public DNS), pasinaudoti CDN, kad DNS įrašai būtų talpinami arčiau vartotojų, įdiegti DNS išankstinį nuskaitymą (DNS prefetching).
• Pavyzdys: Svetainė, skirta vartotojams visame pasaulyje, tam tikruose regionuose patyrė lėtus įkrovimo laikus. Resursų laiko duomenų analizė atskleidė ilgus DNS paieškos laikus tuose regionuose. Perėjimas prie CDN su pasauliniais DNS serveriais žymiai sumažino DNS paieškos laikus ir pagerino bendrą našumą.

Lėti prisijungimo laikai

• Priežastis: Tinklo perkrova, serverio problemos, ugniasienės trukdžiai.
• Sprendimas: Optimizuoti serverio infrastruktūrą, naudoti CDN turiniui platinti arčiau vartotojų, konfigūruoti ugniasienes, kad būtų užtikrintas efektyvus ryšys.
• Pavyzdys: E. prekybos svetainė patyrė lėtus prisijungimo laikus piko valandomis. Resursų laiko duomenų analizė parodė, kad pagrindinė priežastis buvo serverio perkrova. Atnaujinus serverio aparatinę įrangą ir optimizavus duomenų bazės užklausas, pagerėjo prisijungimo laikai ir buvo išvengta našumo sumažėjimo didelio srauto metu.

Dideli perduodamų failų dydžiai

• Priežastis: Neoptimizuoti paveikslėliai, nesumažintas kodas, nereikalingi resursai.
• Sprendimas: Optimizuoti paveikslėlius (pvz., suspausti, keisti dydį, naudoti modernius formatus, tokius kaip WebP), sumažinti JavaScript ir CSS kodo apimtį, pašalinti nenaudojamą kodą ir resursus, įjungti GZIP arba Brotli suspaudimą.
• Pavyzdys: Naujienų svetainė naudojo didelius, neoptimizuotus paveikslėlius, kurie žymiai padidino puslapio įkrovimo laiką. Paveikslėlių optimizavimas naudojant įrankius, tokius kaip ImageOptim, ir atidėtojo įkėlimo (lazy loading) įdiegimas sumažino paveikslėlių perdavimo dydžius ir pagerino puslapio įkrovimo našumą.
• Internacionalizacijos aspektas: Užtikrinkite, kad paveikslėlių optimizavimas atsižvelgtų į skirtingus ekranų dydžius ir raiškas, būdingas įvairiems regionams.

Lėti serverio atsakymo laikai

• Priežastis: Neefektyvus serverio kodas, duomenų bazės kliūtys, tinklo delsa.
• Sprendimas: Optimizuoti serverio kodą, pagerinti duomenų bazės našumą, naudoti CDN turiniui talpinti arčiau vartotojų, įdiegti HTTP podėlį (caching).
• Pavyzdys: Socialinės medijos platforma patyrė lėtus serverio atsakymo laikus dėl neefektyvių duomenų bazės užklausų. Optimizavus duomenų bazės užklausas ir įdiegus podėlio mechanizmus, žymiai sumažėjo serverio atsakymo laikai ir pagerėjo bendras našumas.

Atvaizdavimą blokuojantys resursai

• Priežastis: Sinchroninis JavaScript ir CSS, kurie blokuoja puslapio atvaizdavimą.
• Sprendimas: Atidėti nekritinio JavaScript įkėlimą, įterpti kritinį CSS tiesiai į kodą (inline), naudoti asinchroninį scenarijų įkėlimą, pašalinti nenaudojamą CSS.
• Pavyzdys: Tinklaraščio svetainė naudojo didelį, atvaizdavimą blokuojantį CSS failą, kuris vėlino pradinį puslapio atvaizdavimą. Kritinio CSS įterpimas ir nekritinio CSS įkėlimo atidėjimas pagerino svetainės suvokiamą našumą.

Resursų laiko duomenų integravimas į našumo stebėjimo įrankius

Rankinis resursų laiko duomenų rinkimas ir analizė gali atimti daug laiko. Laimei, keletas našumo stebėjimo įrankių gali automatizuoti šį procesą ir pateikti realaus laiko įžvalgas apie jūsų svetainės našumą. Šie įrankiai paprastai renka resursų laiko duomenis fone ir pateikia juos patogioje informacinėje panelėje.

Populiarūs našumo stebėjimo įrankiai, palaikantys resursų laiko duomenis, apima:

• Google PageSpeed Insights: Teikia rekomendacijas, kaip pagerinti puslapio greitį, remiantis įvairiomis našumo metrikos, įskaitant resursų laiko duomenis.
• WebPageTest: Leidžia testuoti jūsų svetainės našumą iš skirtingų vietovių ir naršyklių, pateikiant išsamią resursų laiko informaciją.
• New Relic: Siūlo išsamias našumo stebėjimo galimybes, įskaitant realaus laiko resursų laiko duomenis ir vizualizacijas.
• Datadog: Teikia išsamias resursų laiko metrikas kartu su platesniu infrastruktūros ir programų stebėjimu, siūlydamas holistinį našumo vaizdą.
• Sentry: Pirmiausia orientuotas į klaidų sekimą, Sentry taip pat teikia našumo stebėjimo funkcijas, įskaitant resursų laiko duomenis, kad būtų galima susieti našumo problemas su konkrečiomis klaidomis.
• Lighthouse: Atviro kodo, automatizuotas įrankis, skirtas interneto puslapių kokybei gerinti. Jis atlieka našumo, prieinamumo, progresyviųjų interneto programų, SEO ir kitus auditus. Gali būti paleistas iš Chrome DevTools, komandinės eilutės arba kaip Node modulis.

Integravę resursų laiko duomenis į šiuos įrankius, galite geriau suprasti savo svetainės našumą ir efektyviau nustatyti sritis, kurias reikia tobulinti.

Etikos aspektai ir vartotojų privatumas

Renkant ir analizuojant resursų laiko duomenis, labai svarbu atsižvelgti į etinius aspektus ir vartotojų privatumą. Būkite skaidrūs su vartotojais apie renkamus duomenis ir jų naudojimą. Užtikrinkite, kad laikotės atitinkamų privatumo reglamentų, tokių kaip GDPR ir CCPA.

Venkite rinkti asmeniškai identifikuojamą informaciją (PII) ir, jei įmanoma, anonimizuokite arba pseudonimizuokite duomenis. Įdiekite tinkamas saugumo priemones, kad apsaugotumėte duomenis nuo neteisėtos prieigos ar atskleidimo. Apsvarstykite galimybę pasiūlyti vartotojams atsisakyti našumo stebėjimo.

Pažangios technikos ir ateities tendencijos

Resource Timing API nuolat tobulėja, atsiranda naujų funkcijų ir metodų, kurie dar labiau pagerina frontend našumo analizę. Štai keletas pažangių technikų ir ateities tendencijų, į kurias verta atkreipti dėmesį:

Server Timing API

Server Timing API leidžia serveriams atskleisti laiko informaciją apie užklausos apdorojimo laiką. Šią informaciją galima derinti su resursų laiko duomenimis, kad būtų gautas išsamesnis visos sistemos našumo vaizdas.

Long Tasks API

Long Tasks API nustato užduotis, kurios ilgą laiką blokuoja pagrindinę giją, sukeldamos vartotojo sąsajos strigimą ir reagavimo problemas. Šią informaciją galima panaudoti optimizuojant JavaScript kodą ir gerinant vartotojo patirtį.

WebAssembly (Wasm)

WebAssembly yra dvejetainis instrukcijų formatas virtualioms mašinoms, leidžiantis pasiekti beveik natūralų našumą naršyklėje. Wasm naudojimas našumui kritinėms užduotims gali žymiai pagerinti įkrovimo laikus ir bendrą našumą.

HTTP/3

HTTP/3 yra naujausia HTTP protokolo versija, kuri naudoja QUIC transporto protokolą, siekiant pagerinti našumą ir patikimumą. HTTP/3 siūlo keletą privalumų, palyginti su HTTP/2, įskaitant sumažintą delsą ir patobulintą ryšio valdymą.

Išvada

Resource Timing API yra galingas įrankis, skirtas suprasti ir optimizuoti frontend našumą. Apibendrindami ir analizuodami resursų laiko duomenis, galite nustatyti kliūtis, pagerinti įkrovimo laikus ir suteikti geresnę vartotojo patirtį. Nesvarbu, ar esate patyręs frontend kūrėjas, ar tik pradedantysis, Resource Timing API įsisavinimas yra būtinas kuriant aukšto našumo interneto programas. Pasinaudokite duomenimis pagrįsto optimizavimo galia ir atskleiskite visą savo svetainės ar programos potencialą. Rinkdami ir analizuodami našumo duomenis, nepamirškite teikti pirmenybę vartotojų privatumui ir etiniams aspektams. Būdami informuoti apie naujausias tendencijas ir technikas, galite užtikrinti, kad jūsų svetainė išliks greita, reaguojanti ir patogi vartotojui ilgus metus. Šių metodų ir įrankių naudojimas prisidės prie našesnio ir visame pasaulyje prieinamesnio interneto.

Praktinė įžvalga: Pradėkite nuo pagrindinio resursų laiko duomenų agregavimo pagal resurso tipą ir domeną. Tai suteiks greitų įžvalgų apie tai, kur yra jūsų našumo kliūtys. Tada integruokite su našumo stebėjimo įrankiu, pvz., Google PageSpeed Insights ar WebPageTest, kad automatizuotumėte duomenų rinkimą ir analizę.