Tīmekļa veiktspējas API: laika mērīšana izcilai lietotāju pieredzei

Mūsdienu digitālajā vidē ātra un atsaucīga vietne vairs nav greznība; tā ir nepieciešamība. Lietotāji sagaida nevainojamu pieredzi, un pat neliela aizkavēšanās var radīt vilšanos, pamestus iepirkumu grozus un galu galā zaudētus ieņēmumus. Tīmekļa veiktspējas API nodrošina izstrādātājiem rīkus, lai precīzi izmērītu dažādus vietnes veiktspējas aspektus, ļaujot viņiem identificēt vājās vietas un optimizēt lietotāja pieredzi (UX).

Lietotāja pieredzes rādītāju nozīmes izpratne

Pirms iedziļināties API tehniskajās detaļās, ir svarīgi saprast, kāpēc UX rādītāji ir tik svarīgi. Tie piedāvā kvantificējamu veidu, kā novērtēt, kā lietotāji uztver jūsu vietnes ātrumu un atsaucību. Slikta UX var negatīvi ietekmēt:

• Atteikumu līmenis (Bounce Rate): Lēns ielādes laiks bieži liek lietotājiem pamest jūsu vietni, pirms viņi ir sākuši mijiedarboties ar tās saturu.
• Reklāmguvumu līmenis (Conversion Rates): Nomācoša lietotāja pieredze var atturēt potenciālos klientus no darījumu pabeigšanas.
• Meklētājprogrammu rangs: Meklētājprogrammas, piemēram, Google, dod priekšroku vietnēm ar labu veiktspēju, kas ietekmē jūsu redzamību meklēšanas rezultātos. Core Web Vitals, kas lielā mērā balstās uz veiktspējas API, ir ranžēšanas faktors.
• Zīmola uztvere: Lēna vietne var radīt negatīvu priekšstatu par jūsu zīmolu, liecinot par nepietiekamu uzmanību detaļām un sliktu lietotāja pieredzi.

Galvenās tīmekļa veiktspējas API un rādītāji

Ir pieejamas vairākas tīmekļa veiktspējas API, un katra no tām sniedz unikālu ieskatu dažādos vietnes veiktspējas aspektos. Šeit ir dažas no svarīgākajām:

1. Navigācijas laika API (Navigation Timing API)

Navigation Timing API sniedz detalizētu laika informāciju saistībā ar dokumenta ielādi. Tā ļauj izmērīt laiku, kas nepieciešams dažādiem ielādes procesa posmiem, piemēram:

• navigationStart: Laikspiedols tieši pirms pārlūks sāk ienest dokumentu.
• fetchStart: Laikspiedols tieši pirms pārlūks sāk ienest dokumentu no tīkla.
• domainLookupStart: Laikspiedols tieši pirms pārlūks sāk DNS uzmeklēšanu dokumenta domēnam.
• domainLookupEnd: Laikspiedols tieši pēc tam, kad pārlūks pabeidz DNS uzmeklēšanu.
• connectStart: Laikspiedols tieši pirms pārlūks sāk veidot savienojumu ar serveri.
• connectEnd: Laikspiedols tieši pēc tam, kad pārlūks pabeidz savienojuma izveidi ar serveri.
• requestStart: Laikspiedols tieši pirms pārlūks nosūta HTTP pieprasījumu dokumentam.
• responseStart: Laikspiedols tieši pēc tam, kad pārlūks saņem pirmo HTTP atbildes baitu.
• responseEnd: Laikspiedols tieši pēc tam, kad pārlūks saņem visu HTTP atbildi.
• domLoading: Laikspiedols tieši pirms pārlūks iestata document.readyState uz "loading".
• domInteractive: Laikspiedols tieši pēc tam, kad pārlūks ir parsējis HTML dokumentu un DOM ir gatavs.
• domContentLoadedEventStart: Laikspiedols tieši pirms pārlūks iedarbina DOMContentLoaded notikumu.
• domContentLoadedEventEnd: Laikspiedols tieši pēc tam, kad pārlūks iedarbina DOMContentLoaded notikumu.
• domComplete: Laikspiedols tieši pēc tam, kad pārlūks iestata document.readyState uz "complete".
• loadEventStart: Laikspiedols tieši pirms pārlūks iedarbina ielādes notikumu (load event).
• loadEventEnd: Laikspiedols tieši pēc tam, kad pārlūks iedarbina ielādes notikumu (load event).

Piemērs: DNS uzmeklēšanai patērētā laika aprēķināšana:

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

              
                Copy
              
            
          

2. Resursu laika API (Resource Timing API)

Resource Timing API sniedz detalizētu laika informāciju par atsevišķiem resursiem, ko ielādē tīmekļa lapa, piemēram, attēliem, CSS failiem, JavaScript failiem un fontiem. Šī API palīdz noteikt, kuru resursu ielāde aizņem visvairāk laika, un optimizēt to piegādi.

Galvenie rādītāji:

• name: Resursa URL.
• startTime: Laikspiedols, kad pārlūks sāk ienest resursu.
• responseEnd: Laikspiedols, kad pārlūks saņem pēdējo resursa baitu.
• duration: Kopējais laiks, kas nepieciešams resursa ielādei (responseEnd - startTime).
• transferSize: Pāri tīklam pārsūtītā resursa lielums.
• encodedBodySize: Resursa lielums pirms saspiešanas.
• decodedBodySize: Resursa lielums pēc atspiešanas.

Piemērs: Lielākā attēla identificēšana lapā:

            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. Lietotāja laika API (User Timing API)

User Timing API ļauj definēt pielāgotus veiktspējas rādītājus un izmērīt laiku, kas nepieciešams konkrētiem koda blokiem vai lietotāja mijiedarbībām. Tas ir īpaši noderīgi, lai izsekotu kritisku JavaScript funkciju vai sarežģītu lietotāja saskarnes komponentu veiktspēju.

Galvenās metodes:

• performance.mark(markName): Izveido laikspiedolu ar norādīto nosaukumu.
• performance.measure(measureName, startMark, endMark): Izveido veiktspējas mērījumu starp divām atzīmēm.
• performance.getEntriesByType("measure"): Iegūst visus veiktspējas mērījumus.

Piemērs: Laika mērīšana, kas nepieciešams sarežģīta React komponenta renderēšanai:

            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. Ilgstošo uzdevumu API (Long Tasks API)

Long Tasks API palīdz identificēt uzdevumus, kas bloķē galveno pavedienu ilgāk par 50 milisekundēm. Šie ilgstošie uzdevumi var izraisīt lietotāja saskarnes sastingšanu un negatīvi ietekmēt lietotāja pieredzi. Identificējot un optimizējot šos uzdevumus, jūs varat uzlabot savas vietnes atsaucību.

Piemērs: Ilgstošo uzdevumu reģistrēšana konsolē:

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

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

              
                Copy
              
            
          

5. Zīmēšanas laika API (Paint Timing API)

Paint Timing API atklāj divus galvenos rādītājus, kas saistīti ar tīmekļa lapas vizuālo renderēšanu:

• Pirmais zīmējums (First Paint — FP): Laiks, kad pārlūks renderē pirmo pikseli uz ekrāna.
• Pirmais satura zīmējums (First Contentful Paint — FCP): Laiks, kad pārlūks renderē pirmo satura daļu (piemēram, attēlu, tekstu) uz ekrāna.

Šie rādītāji ir būtiski, lai saprastu, cik ātri lietotāji uztver sākotnējo vizuālo atgriezenisko saiti no jūsu vietnes.

Piemērs: FCP iegūšana:

            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. Lielākais satura zīmējums (Largest Contentful Paint — LCP)

Largest Contentful Paint (LCP) ir viens no Core Web Vitals, kas mēra laiku, kas nepieciešams, lai lielākais satura elements (piemēram, attēls, video, teksta bloks) kļūtu redzams skatlogā. Labs LCP rādītājs norāda, ka lapas galvenais saturs ielādējas ātri, nodrošinot labāku lietotāja pieredzi.

Ko optimizēt LCP uzlabošanai:

• Optimizējiet attēlus: Izmantojiet atbilstošus attēlu formātus (piem., WebP), saspiediet attēlus un izmantojiet responsīvus attēlus.
• Optimizējiet CSS: Minificējiet un saspiediet CSS failus un izvairieties no renderēšanu bloķējoša CSS.
• Optimizējiet JavaScript: Atlieciet nekritisko JavaScript un izvairieties no ilgstošiem JavaScript uzdevumiem.
• Servera atbildes laiks: Nodrošiniet, ka jūsu serveris ātri atbild uz pieprasījumiem.

7. Kumulatīvā izkārtojuma nobīde (Cumulative Layout Shift — CLS)

Cumulative Layout Shift (CLS) ir vēl viens Core Web Vitals rādītājs, kas mēra tīmekļa lapas vizuālo stabilitāti. Tas kvantificē negaidītu izkārtojuma nobīžu apjomu, kas notiek ielādes procesa laikā. Zems CLS rādītājs norāda, ka lapa ir vizuāli stabila, nodrošinot patīkamāku lietotāja pieredzi.

Kas izraisa izkārtojuma nobīdes:

• Attēli bez izmēriem: Vienmēr norādiet attēliem platuma un augstuma atribūtus.
• Reklāmas, iegulumi un iframe bez rezervētas vietas: Rezervējiet vietu šiem elementiem, lai novērstu to izraisītās izkārtojuma nobīdes.
• Dinamiski ievietots saturs: Esiet piesardzīgi, dinamiski ievietojot saturu, jo tas var izraisīt negaidītas izkārtojuma nobīdes.
• Tīmekļa fonti, kas izraisa FOIT/FOUT: Optimizējiet fontu ielādi, lai samazinātu neredzama teksta fonta (FOIT) un nestilizēta teksta fonta (FOUT) ietekmi.

8. Mijiedarbība līdz nākamajam zīmējumam (Interaction to Next Paint — INP)

Interaction to Next Paint (INP) ir Core Web Vitals rādītājs, kas mēra tīmekļa lapas atsaucību uz lietotāja mijiedarbībām. Tas novērtē visu klikšķu, pieskārienu un tastatūras mijiedarbību latentumu, ko lietotājs veic lapas apmeklējuma laikā. INP aizstāj First Input Delay (FID) kā Core Web Vital rādītāju 2024. gada martā.

INP uzlabošana:

• Optimizējiet JavaScript izpildi: Sadaliet ilgstošus uzdevumus mazākos, asinhronos gabalos, lai izvairītos no galvenā pavediena bloķēšanas.
• Atlieciet nekritisko JavaScript: Ielādējiet tikai sākotnējai renderēšanai nepieciešamo JavaScript un atlieciet pārējo.
• Izmantojiet Web Workers: Pārvietojiet skaitļošanas ietilpīgus uzdevumus uz Web Workers, lai novērstu to bloķēšanu galvenajā pavedienā.
• Optimizējiet notikumu apstrādātājus: Pārliecinieties, ka notikumu apstrādātāji ir efektīvi un neveic nevajadzīgas darbības.

Praktiski piemēri un koda fragmenti

Šeit ir daži praktiski piemēri, kā izmantot tīmekļa veiktspējas API, lai mērītu un optimizētu vietnes veiktspēju:

1. piemērs: Lapas ielādes laika mērīšana

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

              
                Copy
              
            
          

2. piemērs: Lēni ielādējamu resursu identificēšana

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

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

              
                Copy
              
            
          

3. piemērs: Laika līdz interaktivitātei (TTI) mērīšana — aptuvena

Piezīme: TTI ir sarežģīts rādītājs, un šis ir vienkāršots tuvinājums. Patiesa TTI noteikšanai nepieciešama sarežģītāka pieeja.

            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
              
            
          

Praktiski ieteikumi lietotāja pieredzes optimizēšanai

Kad esat savācis veiktspējas datus, izmantojot tīmekļa veiktspējas API, varat izmantot šādus praktiskus ieteikumus, lai optimizētu savas vietnes lietotāja pieredzi:

• Optimizējiet attēlus: Saspiediet attēlus, izmantojiet atbilstošus attēlu formātus (piem., WebP) un izmantojiet responsīvus attēlus, lai samazinātu attēlu ielādes laiku.
• Minificējiet un saspiediet kodu: Minificējiet un saspiediet HTML, CSS un JavaScript failus, lai samazinātu to izmēru un uzlabotu ielādes laiku.
• Izmantojiet pārlūka kešatmiņu: Konfigurējiet savu serveri, lai iestatītu atbilstošas kešatmiņas galvenes, kas ļautu pārlūkam kešot statiskos resursus.
• Izmantojiet satura piegādes tīklu (CDN): Izplatiet savas vietnes saturu pa vairākiem ģeogrāfiski izvietotiem serveriem, lai samazinātu latentumu lietotājiem dažādās vietās. Populāri CDN pakalpojumu sniedzēji ir Cloudflare, Akamai un Amazon CloudFront.
• Optimizējiet fontu ielādi: Izmantojiet font-display: swap, lai novērstu fontu bloķēšanu un uzlabotu uztverto vietnes ielādes ātrumu.
• Samaziniet HTTP pieprasījumu skaitu: Samaziniet HTTP pieprasījumu skaitu, apvienojot CSS un JavaScript failus, iekļaujot kritisko CSS un izmantojot CSS spraitus.
• Atlieciet nekritisko resursu ielādi: Atlieciet nekritisko resursu, piemēram, attēlu un JavaScript failu, ielādi līdz pēc sākotnējās lapas ielādes.
• Optimizējiet servera atbildes laiku: Nodrošiniet, ka jūsu serveris ātri atbild uz pieprasījumiem, optimizējot servera puses kodu un datu bāzes vaicājumus.
• Regulāri pārraugiet veiktspēju: Nepārtraukti pārraugiet savas vietnes veiktspēju, izmantojot tīmekļa veiktspējas API un citus veiktspējas monitoringa rīkus, lai identificētu un risinātu jebkādas veiktspējas problēmas. Tādi rīki kā Google PageSpeed Insights, WebPageTest un Lighthouse var sniegt vērtīgu ieskatu.

Rīki un bibliotēkas veiktspējas monitoringam

Vairāki rīki un bibliotēkas var palīdzēt jums pārraudzīt un analizēt vietnes veiktspēju, izmantojot tīmekļa veiktspējas API:

• Google PageSpeed Insights: Bezmaksas rīks, kas analizē jūsu vietnes veiktspēju un sniedz ieteikumus uzlabojumiem.
• WebPageTest: Bezmaksas rīks, kas ļauj pārbaudīt jūsu vietnes veiktspēju no dažādām vietām un pārlūkiem.
• Lighthouse: Atvērtā koda, automatizēts rīks tīmekļa lapu kvalitātes uzlabošanai. Tam ir auditi veiktspējai, pieejamībai, progresīvām tīmekļa lietotnēm, SEO un citiem aspektiem.
• New Relic: Visaptveroša veiktspējas monitoringa platforma, kas sniedz reāllaika ieskatu vietnes veiktspējā.
• Datadog: Monitoringa un analītikas platforma, kas nodrošina redzamību visā jūsu infrastruktūrā, ieskaitot vietnes veiktspēju.
• Sentry: Reāllaika kļūdu izsekošanas un veiktspējas monitoringa platforma.
• Web Vitals Chrome Extension: Chrome paplašinājums, kas reāllaikā parāda Core Web Vitals rādītājus.

Apsvērumi globālai auditorijai

Optimizējot vietnes veiktspēju globālai auditorijai, ir svarīgi ņemt vērā šādus faktorus:

• Ģeogrāfiskā atrašanās vieta: Izmantojiet CDN, lai izplatītu savu saturu pa vairākiem ģeogrāfiski izvietotiem serveriem, samazinot latentumu lietotājiem dažādās vietās.
• Tīkla apstākļi: Optimizējiet savu vietni lietotājiem ar lēnu vai neuzticamu tīkla savienojumu, izmantojot tādas tehnikas kā attēlu saspiešana, koda minifikācija un pārlūka kešatmiņa.
• Ierīču iespējas: Optimizējiet savu vietni dažādām ierīcēm, tostarp mobilajiem tālruņiem, planšetdatoriem un galddatoriem, izmantojot responsīvu dizainu un adaptīvas ielādes tehnikas.
• Valoda un lokalizācija: Nodrošiniet, ka jūsu vietne ir lokalizēta dažādām valodām un reģioniem, ieskaitot satura tulkošanu un izkārtojumu pielāgošanu dažādiem teksta virzieniem.
• Pieejamība: Pārliecinieties, ka jūsu vietne ir pieejama lietotājiem ar invaliditāti, ievērojot pieejamības vadlīnijas, piemēram, WCAG.

Noslēgums

Tīmekļa veiktspējas API nodrošina nenovērtējamus rīkus vietnes veiktspējas mērīšanai un optimizēšanai. Izprotot un izmantojot šīs API, izstrādātāji var identificēt veiktspējas vājās vietas, uzlabot lietotāja pieredzi un galu galā veicināt biznesa panākumus. Atcerieties, ka Core Web Vitals (LCP, CLS un INP) ir galvenie rādītāji vispārējai vietnes veselībai un lietotāju apmierinātībai. Nepārtraukti pārraugot un optimizējot savas vietnes veiktspēju, jūs varat nodrošināt ātru, atsaucīgu un saistošu pieredzi lietotājiem visā pasaulē.