Žiniatinklio našumo API: laiko matavimas siekiant aukštesnės kokybės naudotojų patirties

Šiuolaikiniame skaitmeniniame pasaulyje greita ir jautri svetainė nebėra prabanga – tai būtinybė. Vartotojai tikisi sklandžios patirties, o net menkiausias vėlavimas gali sukelti nusivylimą, apleistus pirkinių krepšelius ir galiausiai – prarastas pajamas. Žiniatinklio našumo API suteikia kūrėjams įrankius, leidžiančius tiksliai išmatuoti įvairius svetainės našumo aspektus, identifikuoti kliūtis ir optimizuoti vartotojo patirtį (UX).

Vartotojo patirties rodiklių svarbos supratimas

Prieš gilinantis į technines API detales, svarbu suprasti, kodėl UX rodikliai yra tokie svarbūs. Jie siūlo kiekybiškai įvertinamą būdą, kaip vartotojai suvokia jūsų svetainės greitį ir reagavimą. Prasta UX gali neigiamai paveikti:

• Atmetimo rodiklis (Bounce Rate): Dėl lėto įkėlimo laiko vartotojai dažnai palieka svetainę nespėję susipažinti su jos turiniu.
• Konversijų rodikliai: Varginanti vartotojo patirtis gali atgrasyti potencialius klientus nuo sandorių užbaigimo.
• Paieškos sistemų reitingas: Paieškos sistemos, tokios kaip „Google“, teikia pirmenybę gerai veikiančioms svetainėms, o tai turi įtakos jūsų matomumui paieškos rezultatuose. „Core Web Vitals“, kurie labai priklauso nuo našumo API, yra reitingavimo veiksnys.
• Prekės ženklo suvokimas: Lėta svetainė gali sudaryti neigiamą įspūdį apie jūsų prekės ženklą, rodantį dėmesio detalėms trūkumą ir prastą vartotojo patirtį.

Pagrindinės žiniatinklio našumo API ir rodikliai

Yra keletas žiniatinklio našumo API, kurių kiekviena suteikia unikalių įžvalgų apie skirtingus svetainės našumo aspektus. Štai keletas svarbiausių:

1. Naršymo laiko API (Navigation Timing API)

Naršymo laiko API pateikia išsamią laiko informaciją, susijusią su dokumento įkėlimu. Ji leidžia išmatuoti laiką, kurio prireikia įvairiems įkėlimo proceso etapams, pavyzdžiui:

• navigationStart: Laiko žyma prieš pat naršyklei pradedant gauti dokumentą.
• fetchStart: Laiko žyma prieš pat naršyklei pradedant gauti dokumentą iš tinklo.
• domainLookupStart: Laiko žyma prieš pat naršyklei pradedant dokumento domeno DNS paiešką.
• domainLookupEnd: Laiko žyma iškart po to, kai naršyklė baigia DNS paiešką.
• connectStart: Laiko žyma prieš pat naršyklei pradedant kurti ryšį su serveriu.
• connectEnd: Laiko žyma iškart po to, kai naršyklė baigia kurti ryšį su serveriu.
• requestStart: Laiko žyma prieš pat naršyklei siunčiant HTTP užklausą dokumentui.
• responseStart: Laiko žyma iškart po to, kai naršyklė gauna pirmąjį HTTP atsakymo baitą.
• responseEnd: Laiko žyma iškart po to, kai naršyklė gauna visą HTTP atsakymą.
• domLoading: Laiko žyma prieš pat naršyklei nustatant document.readyState į „loading“.
• domInteractive: Laiko žyma iškart po to, kai naršyklė išanalizuoja HTML dokumentą ir DOM yra paruoštas.
• domContentLoadedEventStart: Laiko žyma prieš pat naršyklei suaktyvinant DOMContentLoaded įvykį.
• domContentLoadedEventEnd: Laiko žyma iškart po to, kai naršyklė suaktyvina DOMContentLoaded įvykį.
• domComplete: Laiko žyma iškart po to, kai naršyklė nustato document.readyState į „complete“.
• loadEventStart: Laiko žyma prieš pat naršyklei suaktyvinant „load“ įvykį.
• loadEventEnd: Laiko žyma iškart po to, kai naršyklė suaktyvina „load“ įvykį.

Pavyzdys: DNS paieškos laiko apskaičiavimas:

            const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`DNS Lookup Time: ${dnsLookupTime} ms`);
            

              
                Copy
              
            
          

2. Išteklių laiko API (Resource Timing API)

Išteklių laiko API pateikia išsamią laiko informaciją apie atskirus svetainės įkeliamus išteklius, tokius kaip paveikslėliai, CSS failai, „JavaScript“ failai ir šriftai. Ši API padeda nustatyti, kurie ištekliai įkeliami ilgiausiai, ir optimizuoti jų pateikimą.

Pagrindiniai rodikliai:

• name: Ištekliaus URL.
• startTime: Laiko žyma, kada naršyklė pradeda gauti išteklių.
• responseEnd: Laiko žyma, kada naršyklė gauna paskutinį ištekliaus baitą.
• duration: Bendras laikas, kurio prireikė ištekliui įkelti (responseEnd - startTime).
• transferSize: Per tinklą perduoto ištekliaus dydis.
• encodedBodySize: Ištekliaus dydis prieš suglaudinimą.
• decodedBodySize: Ištekliaus dydis po išskleidimo.

Pavyzdys: Didžiausio paveikslėlio puslapyje nustatymas:

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

let largestImage = null;
let largestImageSize = 0;

resourceTiming.forEach(resource => {
  if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
    largestImage = resource.name;
    largestImageSize = resource.transferSize;
  }
});

console.log(`Largest Image: ${largestImage}, Size: ${largestImageSize} bytes`);
            

              
                Copy
              
            
          

3. Vartotojo laiko API (User Timing API)

Vartotojo laiko API leidžia apibrėžti pasirinktinius našumo rodiklius ir matuoti laiką, kurio prireikia konkretiems kodo blokams ar vartotojo sąveikoms. Tai ypač naudinga stebint svarbių „JavaScript“ funkcijų ar sudėtingų UI komponentų našumą.

Pagrindiniai metodai:

• performance.mark(markName): Sukuria laiko žymą su nurodytu pavadinimu.
• performance.measure(measureName, startMark, endMark): Sukuria našumo matavimą tarp dviejų žymų.
• performance.getEntriesByType("measure"): Gauna visus našumo matavimus.

Pavyzdys: Sudėtingo „React“ komponento atvaizdavimo laiko matavimas:

            performance.mark("componentRenderStart");

// Code to render the React component
render(, document.getElementById("root"));

performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");

const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Component Render Time: ${renderTime} ms`);
            

              
                Copy
              
            
          

4. Ilgų užduočių API (Long Tasks API)

Ilgų užduočių API padeda nustatyti užduotis, kurios blokuoja pagrindinę giją ilgiau nei 50 milisekundžių. Šios ilgos užduotys gali sukelti UI strigimą ir neigiamai paveikti vartotojo patirtį. Nustatydami ir optimizuodami šias užduotis, galite pagerinti savo svetainės reagavimą.

Pavyzdys: Ilgų užduočių registravimas konsolėje:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Long Task:", entry);
  });
});

observer.observe({ type: "longtask", buffered: true });
            

              
                Copy
              
            
          

5. Atvaizdavimo laiko API (Paint Timing API)

Atvaizdavimo laiko API atskleidžia du pagrindinius rodiklius, susijusius su vizualiu svetainės puslapio atvaizdavimu:

• First Paint (FP): Laikas, kai naršyklė atvaizduoja pirmąjį pikselį ekrane.
• First Contentful Paint (FCP): Laikas, kai naršyklė atvaizduoja pirmąjį turinio elementą (pvz., paveikslėlį, tekstą) ekrane.

Šie rodikliai yra labai svarbūs norint suprasti, kaip greitai vartotojai suvokia pradinį vizualinį atsaką iš jūsų svetainės.

Pavyzdys: FCP gavimas:

            const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");

if (fcpEntry) {
  console.log(`First Contentful Paint: ${fcpEntry.startTime} ms`);
}
            

              
                Copy
              
            
          

6. Didžiausio turinio elemento atvaizdavimas (LCP)

Didžiausio turinio elemento atvaizdavimas (LCP) yra vienas iš pagrindinių žiniatinklio rodiklių („Core Web Vital“), kuris matuoja laiką, per kurį didžiausias turinio elementas (pvz., paveikslėlis, vaizdo įrašas, teksto blokas) tampa matomas peržiūros srityje. Geras LCP rodiklis rodo, kad pagrindinis puslapio turinys įkeliamas greitai, užtikrinant geresnę vartotojo patirtį.

Ką optimizuoti siekiant geresnio LCP:

• Optimizuokite paveikslėlius: Naudokite tinkamus paveikslėlių formatus (pvz., WebP), glaudinkite paveikslėlius ir naudokite prisitaikančius paveikslėlius.
• Optimizuokite CSS: Sumažinkite ir suglaudinkite CSS failus, venkite atvaizdavimą blokuojančio CSS.
• Optimizuokite „JavaScript“: Atidėkite nekritinio „JavaScript“ kodo vykdymą ir venkite ilgai trunkančių „JavaScript“ užduočių.
• Serverio atsako laikas: Užtikrinkite, kad jūsų serveris greitai atsakytų į užklausas.

7. Kaupiamasis maketo poslinkis (CLS)

Kaupiamasis maketo poslinkis (CLS) yra dar vienas pagrindinis žiniatinklio rodiklis („Core Web Vital“), kuris matuoja svetainės puslapio vizualinį stabilumą. Jis kiekybiškai įvertina netikėtų maketo poslinkių, atsirandančių įkėlimo proceso metu, dydį. Žemas CLS rodiklis rodo, kad puslapis yra vizualiai stabilus, suteikiantis malonesnę vartotojo patirtį.

Kas sukelia maketo poslinkius:

• Paveikslėliai be matmenų: Visada nurodykite paveikslėlių pločio ir aukščio atributus.
• Skelbimai, įterptiniai elementai ir „iframe“ be rezervuotos vietos: Rezervuokite vietą šiems elementams, kad išvengtumėte maketo poslinkių.
• Dinamiškai įterptas turinys: Būkite atsargūs įterpdami turinį dinamiškai, nes tai gali sukelti netikėtų maketo poslinkių.
• Žiniatinklio šriftai, sukeliantys FOIT/FOUT: Optimizuokite šriftų įkėlimą, kad sumažintumėte nematomų (FOIT) ir nestilizuotų (FOUT) tekstų poveikį.

8. Sąveika iki kito atvaizdavimo (INP)

Sąveika iki kito atvaizdavimo (INP) yra „Core Web Vital“ rodiklis, kuris matuoja svetainės reagavimą į vartotojo sąveikas. Jis įvertina visų paspaudimų, prisilietimų ir klaviatūros sąveikų, kurias vartotojas atlieka lankydamasis puslapyje, delsą. Nuo 2024 m. kovo mėn. INP pakeičia Pirmojo įvesties delsos (FID) rodiklį kaip „Core Web Vital“.

Kaip pagerinti INP:

• Optimizuokite „JavaScript“ vykdymą: Suskaidykite ilgas užduotis į mažesnes, asinchronines dalis, kad išvengtumėte pagrindinės gijos blokavimo.
• Atidėkite nekritinio „JavaScript“ kodo vykdymą: Įkelkite tik pradiniam atvaizdavimui reikalingą „JavaScript“ kodą, o likusį atidėkite.
• Naudokite „Web Workers“: Perkelkite skaičiavimams imlias užduotis į „Web Workers“, kad jos neblokuotų pagrindinės gijos.
• Optimizuokite įvykių apdorojimo funkcijas: Užtikrinkite, kad įvykių apdorojimo funkcijos būtų efektyvios ir neatliktų nereikalingų operacijų.

Praktiniai pavyzdžiai ir kodo fragmentai

Štai keletas praktinių pavyzdžių, kaip naudoti žiniatinklio našumo API svetainės našumui matuoti ir optimizuoti:

1 pavyzdys: Puslapio įkėlimo laiko matavimas

            window.addEventListener("load", () => {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log(`Page Load Time: ${loadTime} ms`);
});
            

              
                Copy
              
            
          

2 pavyzdys: Lėtai įkeliamų išteklių nustatymas

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

resourceTiming.forEach(resource => {
  if (resource.duration > 1000) {
    console.warn(`Slow Resource: ${resource.name}, Duration: ${resource.duration} ms`);
  }
});
            

              
                Copy
              
            
          

3 pavyzdys: Interaktyvumo laiko (TTI) matavimas – apytikslis

Pastaba: TTI yra sudėtingas rodiklis, ir tai yra supaprastintas apytikslis metodas. Tikram TTI matuoti reikia sudėtingesnio požiūrio.

            function getTimeToInteractive() {
  return new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(performance.now());
    } else {
      window.addEventListener('load', () => {
        resolve(performance.now());
      });
    }
  });
}

getTimeToInteractive().then(tti => {
  console.log(`Approximate Time to Interactive: ${tti} ms`);
});
            

              
                Copy
              
            
          

Praktinės įžvalgos vartotojo patirčiai optimizuoti

Surinkę našumo duomenis naudojant žiniatinklio našumo API, galite pasinaudoti šiomis praktinėmis įžvalgomis, kad optimizuotumėte savo svetainės vartotojo patirtį:

• Optimizuokite paveikslėlius: Suglaudinkite paveikslėlius, naudokite tinkamus formatus (pvz., WebP) ir prisitaikančius paveikslėlius, kad sutrumpintumėte jų įkėlimo laiką.
• Sumažinkite ir suglaudinkite kodą: Sumažinkite ir suglaudinkite HTML, CSS ir „JavaScript“ failus, kad sumažintumėte jų dydį ir pagreitintumėte įkėlimą.
• Išnaudokite naršyklės podėlį (caching): Konfigūruokite savo serverį taip, kad jis nustatytų tinkamas podėlio antraštes ir įgalintų statinių išteklių kaupimą naršyklės podėlyje.
• Naudokite turinio pristatymo tinklą (CDN): Paskirstykite savo svetainės turinį per kelis geografiškai išdėstytus serverius, kad sumažintumėte delsą vartotojams skirtingose vietose. Populiarūs CDN tiekėjai yra „Cloudflare“, „Akamai“ ir „Amazon CloudFront“.
• Optimizuokite šriftų įkėlimą: Naudokite „font-display: swap“, kad išvengtumėte šrifto blokavimo ir pagerintumėte suvokiamą svetainės įkėlimo greitį.
• Sumažinkite HTTP užklausų skaičių: Sumažinkite HTTP užklausų skaičių sujungdami CSS ir „JavaScript“ failus, įterpdami kritinį CSS kodą ir naudodami CSS „sprites“.
• Atidėkite nekritinių išteklių įkėlimą: Atidėkite nekritinių išteklių, tokių kaip paveikslėliai ir „JavaScript“ failai, įkėlimą iki tol, kol bus baigtas pradinis puslapio įkėlimas.
• Optimizuokite serverio atsako laiką: Užtikrinkite, kad jūsų serveris greitai atsakytų į užklausas, optimizuodami serverio kodą ir duomenų bazės užklausas.
• Reguliariai stebėkite našumą: Nuolat stebėkite savo svetainės našumą naudodami žiniatinklio našumo API ir kitus stebėjimo įrankius, kad nustatytumėte ir išspręstumėte bet kokias našumo problemas. Įrankiai, tokie kaip „Google PageSpeed Insights“, „WebPageTest“ ir „Lighthouse“, gali suteikti vertingų įžvalgų.

Įrankiai ir bibliotekos našumo stebėjimui

Yra keletas įrankių ir bibliotekų, kurios gali padėti stebėti ir analizuoti svetainės našumą naudojant žiniatinklio našumo API:

• Google PageSpeed Insights: Nemokamas įrankis, kuris analizuoja jūsų svetainės našumą ir pateikia rekomendacijas tobulinimui.
• WebPageTest: Nemokamas įrankis, leidžiantis išbandyti svetainės našumą iš skirtingų vietų ir naršyklių.
• Lighthouse: Atviro kodo, automatizuotas įrankis, skirtas svetainių kokybei gerinti. Jame yra našumo, prieinamumo, progresyviųjų žiniatinklio programų, SEO ir kitų sričių auditas.
• New Relic: Išsami našumo stebėjimo platforma, teikianti realaus laiko įžvalgas apie svetainės našumą.
• Datadog: Stebėjimo ir analizės platforma, suteikianti matomumą visai jūsų infrastruktūrai, įskaitant svetainės našumą.
• Sentry: Realaus laiko klaidų sekimo ir našumo stebėjimo platforma.
• Web Vitals Chrome Extension: „Chrome“ plėtinys, kuris realiu laiku rodo „Core Web Vitals“ rodiklius.

Aspektai, svarbūs pasaulinei auditorijai

Optimizuojant svetainės našumą pasaulinei auditorijai, svarbu atsižvelgti į šiuos veiksnius:

• Geografinė vieta: Naudokite CDN, kad paskirstytumėte turinį per kelis geografiškai išdėstytus serverius, sumažindami delsą vartotojams skirtingose vietose.
• Tinklo sąlygos: Optimizuokite savo svetainę vartotojams su lėtu ar nepatikimu interneto ryšiu, taikydami tokias technikas kaip paveikslėlių glaudinimas, kodo sumažinimas ir naršyklės podėlio naudojimas.
• Įrenginių galimybės: Optimizuokite savo svetainę skirtingiems įrenginiams, įskaitant mobiliuosius telefonus, planšetinius kompiuterius ir stacionarius kompiuterius, naudodami adaptyvųjį dizainą ir prisitaikančio įkėlimo technikas.
• Kalba ir lokalizacija: Užtikrinkite, kad jūsų svetainė būtų lokalizuota skirtingoms kalboms ir regionams, įskaitant turinio vertimą ir maketų pritaikymą skirtingoms teksto kryptims.
• Prieinamumas: Užtikrinkite, kad jūsų svetainė būtų prieinama vartotojams su negalia, laikantis prieinamumo gairių, tokių kaip WCAG.

Išvada

Žiniatinklio našumo API suteikia neįkainojamus įrankius svetainės našumui matuoti ir optimizuoti. Suprasdami ir naudodami šias API, kūrėjai gali nustatyti našumo kliūtis, pagerinti vartotojo patirtį ir galiausiai pasiekti verslo sėkmę. Nepamirškite teikti pirmenybę „Core Web Vitals“ (LCP, CLS ir INP) kaip pagrindiniams bendros svetainės būklės ir vartotojų pasitenkinimo rodikliams. Nuolat stebėdami ir optimizuodami savo svetainės našumą, galite užtikrinti greitą, jautrią ir įtraukiančią patirtį vartotojams visame pasaulyje.