Frontend'i jõudluse meistriklass: Süvavaade User Timing API-sse

Tänapäevases digitaalses maastikus ei ole frontend'i jõudlus luksus, vaid edu saavutamiseks hädavajalik nõue. Globaalse publiku jaoks võib aeglane ja mitte-reageeriv veebisait põhjustada kasutajate frustratsiooni, vähenenud kaasatust ja otsest negatiivset mõju äritulemustele. Meil on suurepärased standardiseeritud mõõdikud nagu Core Web Vitals (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift), mis annavad meile baasteadmised kasutajakogemusest. Kuid need mõõdikud, kuigi üliolulised, räägivad ainult osa loost.

Aga kuidas on lood rakenduspõhiste funktsioonide jõudlusega? Kui kaua kulub aega otsingutulemuste ilmumiseks pärast seda, kui kasutaja on päringu sisestanud? Kui palju aega võtab teie keeruka andmete visualiseerimise komponendi renderdamine pärast andmete saamist API-st? Kuidas mõjutab uus funktsioon teie ühe lehe rakenduse (SPA) marsruudi üleminekute kiirust? Standardmõõdikud ei suuda neile detailsetele ja ärikriitilistele küsimustele vastata. Siin tulebki mängu User Timing API, mis annab arendajatele võimaluse luua kohandatud ja ülitäpseid jõudlusmõõtmisi, mis on kohandatud nende unikaalsetele rakendustele.

See põhjalik juhend tutvustab teile kõike, mida peate teadma User Timing API kasutamiseks, alates märkide ja mõõtmiste põhikontseptsioonidest kuni täiustatud tehnikateni PerformanceObserveri abil. Lõpuks olete valmis minema kaugemale üldistest mõõdikutest ja hakkama rääkima oma rakenduse ainulaadset jõudluslugu.

Mis on Performance API? Laiem kontekst

Enne kui süveneme User Timing'usse, on oluline mõista, et see on osa suuremast tööriistade komplektist, mida tuntakse ühiselt kui Performance API. See brauseri API annab juurdepääsu ülitäpsetele ajastusandmetele, mis on seotud navigeerimise, ressursside laadimise ja muuga. Globaalne `window.performance` objekt on teie sisenemispunkt sellesse võimsasse tööriistakasti.

Performance API koosneb mitmest liidesest, sealhulgas:

• Navigeerimise ajastus (Navigation Timing): Pakub üksikasjalikku ajastusteavet dokumendi navigeerimisprotsessi kohta, näiteks DNS-i otsingutele, TCP-ühendustele ja esimese baidi vastuvõtmisele kulunud aega.
• Ressursside ajastus (Resource Timing): Pakub üksikasjalikke võrguajastuse andmeid iga lehe poolt laaditud ressursi kohta, sealhulgas pildid, skriptid ja CSS-failid.
• Renderdamise ajastus (Paint Timing): Kuvab First Paint'i ja First Contentful Paint'i ajastused.
• Kasutaja ajastus (User Timing): Meie artikli fookus, mis võimaldab arendajatel luua oma kohandatud ajatemplid (märgid) ja mõõta nendevahelist kestust (mõõtmised).

Need API-d töötavad koos, et pakkuda terviklikku ülevaadet teie rakenduse jõudlusest. Meie tänane eesmärk on omandada User Timing'u osa, mis annab meile võimu lisada oma kohandatud kontrollpunktid sellele jõudluse ajajoonele.

Põhimõisted: märgid ja mõõtmised

User Timing API on petlikult lihtne, keereldes kahe põhimõiste ümber: märgid ja mõõtmised. Mõelge sellele nagu stopperi kasutamisele. Vajutate nuppu algusaja märkimiseks ja vajutate seda uuesti lõpuaja märkimiseks. Nende kahe vajutuse vaheline kestus on teie mõõtmine.

Jõudlusmärkide loomine: `performance.mark()`

„Märk” on nimega, kõrge eraldusvõimega ajatempel, mis salvestatakse teie rakenduse täitmise konkreetses punktis. See on nagu lipu heiskamine teie jõudluse ajajoonel. Saate luua nii palju märke, kui vajate, et tuvastada võtmehetki kasutajateekonnal või komponendi elutsüklis.

Süntaks on lihtne:

performance.mark(markName, [markOptions]);

• markName: String, mis esindab teie märgi unikaalset nime. Valige kirjeldavad nimed!
• markOptions (valikuline): Objekt, mis võib sisaldada `detail` omadust lisametandmete lisamiseks ja `startTime` kohandatud ajatempli määramiseks.

Põhinäide: sündmuse märgistamine

Oletame, et tahame märkida olulise funktsioonikutse algust.

            
function processLargeDataset() {
  // Heiskame lipu vahetult enne raske töö algust
  performance.mark('processLargeDataset:start');

  // ... raske arvutusloogika ...

  console.log('Andmestiku töötlemine on lõpetatud.');

  // Heiskame teise lipu, kui see on valmis
  performance.mark('processLargeDataset:end');
}

processLargeDataset();

            

              
                Copy
              
            
          

Selles näites oleme loonud brauseri jõudluse ajajoonel kaks ajatemplit: `processLargeDataset:start` ja `processLargeDataset:end`. Praegu on need lihtsalt ajahetked. Nende tõeline jõud avaneb, kui kasutame neid mõõtmise loomiseks.

Konteksti lisamine `detail` omadusega

Mõnikord ei piisa ainult ajatemplist. Võiksite lisada lisakonteksti selle kohta, mis sel hetkel toimus. `detail` omadus on selleks ideaalne. See võib sisaldada mis tahes andmeid, mida saab struktuurselt kloonida (nagu objektid, massiivid, stringid, numbrid).

Kujutage ette, et märgime komponendi renderdamise algust ja tahame teada, mitu elementi see renderdas.

            
function renderProductList(products) {
  const itemCount = products.length;

  performance.mark('ProductList:render:start', {
    detail: {
      itemCount: itemCount,
      source: 'initial-load'
    }
  });

  // ... komponendi renderdamise loogika ...

  performance.mark('ProductList:render:end');
}

const sampleProducts = new Array(1000).fill(0);
renderProductList(sampleProducts);

            

              
                Copy
              
            
          

See lisakontekst on hiljem jõudlusandmete analüüsimisel hindamatu väärtusega. Näiteks võiksite seostada renderdamise aegu elementide arvuga, et näha, kas seal on lineaarne või eksponentsiaalne seos.

Jõudlusmõõtmiste loomine: `performance.measure()`

„Mõõtmine” hõlmab kestust kahe ajahetke vahel. See on arvutus, mis ütleb teile, „kui kaua” miski aega võttis. Kõige sagedamini mõõdate aega kahe oma kohandatud märgi vahel.

Süntaksil on mõned variatsioonid:

performance.measure(measureName, startMarkOrOptions, [endMark]);

• measureName: String, mis esindab teie mõõtmise unikaalset nime.
• startMarkOrOptions (valikuline): String algusmärgi nimega. Võib olla ka valikute objekt, millel on `start`, `end`, `duration` ja `detail`.
• endMark (valikuline): String lõpumärgi nimega.

Põhinäide: funktsiooni kestuse mõõtmine

Täiendame oma `processLargeDataset` näidet ja mõõdame tegelikult, kui kaua see aega võttis.

            
function processLargeDataset() {
  performance.mark('processLargeDataset:start');

  // ... raske arvutusloogika ...

  performance.mark('processLargeDataset:end');

  // Nüüd loome mõõtmise
  performance.measure(
    'processLargeDataset:duration',
    'processLargeDataset:start',
    'processLargeDataset:end'
  );
}

processLargeDataset();

            

              
                Copy
              
            
          

Pärast selle koodi käivitamist sisaldab brauseri jõudluspuhver uut kirjet nimega `processLargeDataset:duration`. Sellel kirjel on `duration` omadus, mis sisaldab täpset aega millisekundites, mis möödus algus- ja lõpumärkide vahel.

Täpsemad mõõtmisstsenaariumid

`measure()` meetod on väga paindlik. Te ei pea alati esitama kahte märki.

• Navigeerimise algusest märgini: Saate mõõta aega lehe navigeerimise algusest kuni ühe oma kohandatud märgini. See on uskumatult kasulik selliste asjade mõõtmiseks nagu „aeg interaktiivse komponendini”.

              
    // Mõõda navigeerimise algusest kuni põhikomponendi valmimiseni
    performance.measure('timeToInteractiveHeader', 'navigationStart', 'headerComponent:ready');
    
              
  
                
                  Copy
                
              
            

• Märgist praeguse hetkeni: Kui jätate `endMark`'i ära, arvutatakse mõõtmine teie `startMark`'ist praeguse ajani.

              
    // Mõõda algusmärgist kuni selle koodirea täitmiseni
    performance.measure('timeSinceDataRequest', 'api:fetch:start');
    
              
  
                
                  Copy
                
              
            

• Valikute objekti kasutamine: Saate ka edastada konfiguratsiooniobjekti mõõtmise määratlemiseks, mis on kasulik `detail` omaduse lisamiseks.

              
    performance.measure('complexRender:duration', {
      start: 'complexRender:start',
      end: 'complexRender:end',
      detail: { renderType: 'canvas' }
    });
    
              
  
                
                  Copy
                
              
            

Jõudluskirjetele juurdepääs ja nende tühjendamine

Märkide ja mõõtmiste loomine on vaid pool võitu. Nende andmete analüüsimiseks on vaja viisi nende kättesaamiseks. `performance` objekt pakub selleks mitmeid meetodeid.

• performance.getEntries(): Tagastab massiivi kõigist jõudluskirjetest puhvris (sealhulgas ressursi ajastused, navigeerimise ajastused jne).
• performance.getEntriesByType(type): Tagastab massiivi teatud tüüpi kirjetest. Kõige sagedamini kasutate `performance.getEntriesByType('mark')` ja `performance.getEntriesByType('measure')`.
• performance.getEntriesByName(name, [type]): Tagastab massiivi kindla nimega kirjetest (ja valikuliselt ka kindla tüübiga).

Näide: Mõõtmiste logimine konsooli

            
// Pärast meie eelmiste näidete käivitamist...

const allMeasures = performance.getEntriesByType('measure');
console.log(allMeasures);

// Mõõtmiskirje objekt näeb välja umbes selline:
// {
//   "name": "processLargeDataset:duration",
//   "entryType": "measure",
//   "startTime": 12345.67,
//   "duration": 150.89
// }

const specificMeasure = performance.getEntriesByName('processLargeDataset:duration');
console.log(`Töötlemine võttis aega: ${specificMeasure[0].duration}ms`);

            

              
                Copy
              
            
          

Tähtis: Jõudluspuhvri puhastamine

Brauseri jõudluspuhver ei ole lõpmatu. Mälulekete vältimiseks ja mõõtmiste asjakohasena hoidmiseks on hea tava tühjendada loodud märgid ja mõõtmised, kui olete nendega lõpetanud.

• performance.clearMarks([name]): Tühjendab kõik märgid või ainult määratud nimega märgid.
• performance.clearMeasures([name]): Tühjendab kõik mõõtmised või ainult määratud nimega mõõtmised.

Levinud muster on andmete hankimine, nende töötlemine või saatmine ja seejärel nende tühjendamine.

            
function analyzeAndClear() {
  const myMeasures = performance.getEntriesByName('processLargeDataset:duration');
  // Saada myMeasures analüütikateenusesse...
  sendToAnalytics(myMeasures);

  // Puhasta mälu vabastamiseks
  performance.clearMarks('processLargeDataset:start');
  performance.clearMarks('processLargeDataset:end');
  performance.clearMeasures('processLargeDataset:duration');
}

            

              
                Copy
              
            
          

Praktilised ja reaalsed kasutusjuhud User Timing'u jaoks

Nüüd, kui me mõistame mehaanikat, uurime, kuidas rakendada User Timing API-d reaalsete jõudlusprobleemide lahendamiseks. Need näited on raamistikust sõltumatud ja neid saab kohandada mis tahes frontend'i virnale.

1. API-kutsete kestuse mõõtmine

Mõistmine, kui kaua teie rakendus andmeid ootab, on kriitilise tähtsusega. Saate oma andmete hankimise loogika hõlpsasti märkide ja mõõtmistega ümbritseda.

            
asynk function fetchUserData(userId) {
  const markStart = `api:getUser:${userId}:start`;
  const markEnd = `api:getUser:${userId}:end`;
  const measureName = `api:getUser:${userId}:duration`;

  performance.mark(markStart);

  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      throw new Error('Võrguvastus ei olnud korras');
    }
    return await response.json();
  } catch (error) {
    console.error('Fetch viga:', error);
    // Saate lisada isegi üksikasju vigade kohta!
    performance.mark(markEnd, { detail: { status: 'error', message: error.message } });
  } finally {
    // Veenduge, et lõpumärk ja mõõtmine luuakse alati
    if (performance.getEntriesByName(markEnd).length === 0) {
        performance.mark(markEnd, { detail: { status: 'success' } });
    }
    performance.measure(measureName, markStart, markEnd);
  }
}

fetchUserData('123');

            

              
                Copy
              
            
          

See muster pakub täpseid ajastusi iga API-kutse kohta, võimaldades teil tuvastada aeglaseid lõpp-punkte otse reaalsete kasutajate andmetest.

2. Komponentide renderdamisaegade jälgimine SPA-des

Raamistike nagu React, Vue või Angular puhul on komponendi paigaldamiseks ja renderdamiseks kuluva aja mõõtmine esmane kasutusjuht. See aitab tuvastada keerukaid komponente, mis võivad teie rakendust aeglustada.

Näide Reacti hookidega:

            
import React, { useLayoutEffect, useEffect, useRef } from 'react';

function MyHeavyComponent({ data }) {
  const componentId = useRef(`MyHeavyComponent-${Math.random()}`).current;
  const markStartName = `${componentId}:render:start`;
  const markEndName = `${componentId}:render:end`;
  const measureName = `${componentId}:render:duration`;

  // useLayoutEffect käivitub sünkroonselt pärast kõiki DOM-i mutatsioone.
  // See on ideaalne koht renderdamise mõõtmise alguse märkimiseks.
  useLayoutEffect(() => {
    performance.mark(markStartName);
  }, []); // Käivita ainult esmasel paigaldamisel

  // useEffect käivitub asünkroonselt pärast renderdamise ekraanile kandmist.
  // See on hea koht lõpu märkimiseks.
  useEffect(() => {
    performance.mark(markEndName);
    performance.measure(measureName, markStartName, markEndName);

    // Logi tulemus demonstratsiooniks
    const measure = performance.getEntriesByName(measureName)[0];
    if (measure) {
      console.log(`${measureName} võttis ${measure.duration}ms`);
    }

    // Puhastamine
    performance.clearMarks(markStartName);
    performance.clearMarks(markEndName);
    performance.clearMeasures(measureName);
  }, []); // Käivita ainult esmasel paigaldamisel

  return (
    // ... JSX raske komponendi jaoks ...
  );
}

            

              
                Copy
              
            
          

3. Kriitiliste kasutajateekondade kvantifitseerimine

Kõige mõjukam User Timing'u kasutusviis on mitmeastmeliste kasutajainteraktsioonide mõõtmine, mis on teie äri jaoks kriitilise tähtsusega. See ületab lihtsad tehnilised mõõdikud ja mõõdab teie rakenduse põhifunktsionaalsuse tajutavat kiirust.

Mõelge e-kaubanduse ostukorvi protsessile:

            
const checkoutButton = document.getElementById('checkout-btn');

checkoutButton.addEventListener('click', () => {
  // 1. Kasutaja klõpsab 'kassasse' nuppu
  performance.mark('checkout:journey:start');

  // ... kood ostukorvi valideerimiseks, makselehele navigeerimiseks jne ...
});

// Makselehel, pärast maksevormi renderdamist ja interaktiivseks muutumist
function onPaymentFormReady() {
  performance.mark('checkout:paymentForm:ready');
  performance.measure('checkout:timeToPaymentForm', 'checkout:journey:start', 'checkout:paymentForm:ready');
}

// Pärast makse edukat töötlemist ja kinnitusekraani kuvamist
function onPaymentSuccess() {
  performance.mark('checkout:journey:end');
  performance.measure('checkout:totalJourney:duration', 'checkout:journey:start', 'checkout:journey:end');

  // Nüüd on teil kaks võimsat mõõdikut analüüsimiseks ja optimeerimiseks.
}

            

              
                Copy
              
            
          

4. Jõudlusparanduste A/B testimine

Kui teete koodi ümberkorraldusi või tutvustate uut algoritmi, kuidas saate tõestada, et see on reaalsete kasutajate jaoks tegelikult kiirem? User Timing pakub objektiivseid andmeid A/B testimiseks.

Kujutage ette, et teil on kaks erinevat sortimisalgoritmi, mida soovite testida:

            
function sortProducts(products, algorithmVersion) {
  const markStart = `sort:v${algorithmVersion}:start`;
  const markEnd = `sort:v${algorithmVersion}:end`;
  const measureName = `sort:v${algorithmVersion}:duration`;

  performance.mark(markStart);

  if (algorithmVersion === 'A') {
    // ... käivita vana sortimisalgoritm ...
  } else {
    // ... käivita uus, optimeeritud sortimisalgoritm ...
  }

  performance.mark(markEnd);
  performance.measure(measureName, markStart, markEnd);
}

// A/B testimise lipu alusel kutsuksite üht või teist.
// Hiljem saate oma analüütikas võrrelda keskmist kestust
// 'sort:vA:duration' vs 'sort:vB:duration', et näha, kumb oli kiirem.

            

              
                Copy
              
            
          

Oma kohandatud mõõdikute visualiseerimine ja analüüsimine

Kohandatud mõõdikute loomine on kasutu, kui te andmeid ei analüüsi. Sellele on kaks peamist lähenemist: lokaalselt arenduse ajal ja koondatult tootmises.

Brauseri arendajatööriistade kasutamine

Tänapäevastel brauseritel nagu Chrome ja Firefox on suurepärane tugi User Timing'u märkide ja mõõtmiste visualiseerimiseks nende jõudluse profiilimise tööriistades.

1. Avage oma brauseri arendajatööriistad (F12 või Ctrl+Shift+I).
2. Minge vahekaardile Performance.
3. Alustage profiili salvestamist ja seejärel tehke oma rakenduses toiminguid, mis käivitavad teie kohandatud märgid ja mõõtmised.
4. Lõpetage salvestamine.

Ajajoone vaates leiate spetsiaalse rea nimega Timings. Teie kohandatud märgid ilmuvad vertikaalsete joontena ja teie mõõtmised kuvatakse värviliste ribadena, mis näitavad nende kestust. Nende kohal hõljumine paljastab nende nimed ja täpsed ajastused. See on uskumatult võimas viis jõudlusprobleemide silumiseks arenduse ajal.

Andmete saatmine analüütika- ja RUM-teenustesse

Tootmismonitooringuks peate need andmed oma kasutajatelt koguma ja saatma need kesksele asukohale koondamiseks ja analüüsimiseks. See on reaalajas kasutajate monitooringu (RUM) põhiosa.

Üldine töövoog on:

1. Koguge jõudlusmõõtmised, mis teid huvitavad.
2. Vormindage need sobivasse laadungisse (nt JSON).
3. Saatke laadung analüütika lõpp-punkti. See võib olla kolmanda osapoole teenus nagu Datadog, New Relic, Sentry või isegi Google Analytics (kohandatud sündmuste kaudu) või teie enda kontrolli all olev kohandatud taustaprogramm.

            
function sendPerformanceData() {
  // Meid huvitavad ainult meie kohandatud rakenduse mõõtmised
  const appMeasures = performance.getEntriesByType('measure').filter(
    (entry) => entry.name.startsWith('app:') // Kasutage nimekonventsiooni!
  );

  if (appMeasures.length > 0) {
    const payload = JSON.stringify(appMeasures.map(measure => ({
      name: measure.name,
      duration: measure.duration,
      startTime: measure.startTime,
      details: measure.detail, // Saada meie rikkalik kontekst
      path: window.location.pathname // Lisa rohkem konteksti
    })));

    // Kasutage navigator.sendBeacon usaldusväärseks, mitte-blokeerivaks andmete saatmiseks
    navigator.sendBeacon('https://analytics.example.com/performance', payload);

    // Puhastage saadetud mõõtmised
    appMeasures.forEach(measure => {
      performance.clearMeasures(measure.name);
      // Puhastage ka seotud märgid
    });
  }
}

// Kutsuge seda funktsiooni sobival ajal, nt kui leht hakkab maha laadima
window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    sendPerformanceData();
  }
});

            

              
                Copy
              
            
          

Täpsemad tehnikad ja parimad praktikad

User Timing API tõeliseks valdamiseks vaatame mõningaid täpsemaid funktsioone ja parimaid praktikaid, mis muudavad teie instrumentatsiooni robustsemaks ja tõhusamaks.

`PerformanceObserver` kasutamine asünkroonseks monitooringuks

`getEntries*()` meetodid nõuavad, et te küsitleksite jõudluspuhvrit käsitsi. Sellel on kaks puudust: võite oma kontrolli teha liiga hilja ja jääda kirjetest ilma, kui puhver on täitunud ja tühjendatud, ning küsitlemine ise võib omada väikest jõudluskulu. Kaasaegne, eelistatud lahendus on `PerformanceObserver`.

`PerformanceObserver` võimaldab teil tellida jõudluskirjete sündmusi. Teie tagasikutsefunktsioon käivitatakse asünkroonselt, kui salvestatakse uusi kirjeid tüüpidest, mida te jälgite.

            
// 1. Looge tagasikutsefunktsioon uute kirjete käsitlemiseks
const observerCallback = (list) => {
  for (const entry of list.getEntries()) {
    console.log('Uus mõõtmine on jälgitud:', entry.name, entry.duration);
    // Siin saate kohe saata kirje oma analüütikateenusesse
    // ilma et peaksite küsitlema või ootama.
  }
};

// 2. Looge vaatleja instants
const observer = new PerformanceObserver(observerCallback);

// 3. Alustage 'mark' ja 'measure' kirjetüüpide jälgimist
// 'buffered: true' valik tagab, et saate kirjed, mis loodi
// *enne* vaatleja registreerimist.
observer.observe({ entryTypes: ['mark', 'measure'], buffered: true });

// Nüüd, iga kord, kui performance.mark() või performance.measure() kutsutakse kuskil
// teie rakenduses, käivitatakse observerCallback uue kirjega.

// Hiljem jälgimise lõpetamiseks:
// observer.disconnect();

            

              
                Copy
              
            
          

`PerformanceObserver`'i kasutamine on tõhusam, usaldusväärsem ja peaks olema teie vaikimisi valik jõudlusandmete kogumiseks tootmiskeskkonnas.

Kehtestage selge nimekonventsioon

Teie rakenduse kasvades koguneb teil palju kohandatud mõõdikuid. Ilma järjepideva nimekonventsioonita muutuvad teie andmed raskesti filtreeritavaks ja analüüsitavaks. Võtke kasutusele muster, mis annab konteksti.

Hea konventsioon võiks olla: `[appName]:[featureOrComponent]:[eventName]:[status]`

• ecom:ProductGallery:render:start
• ecom:ProductGallery:render:end
• ecom:ProductGallery:render:duration
• admin:DataTable:fetchApi:start
• admin:DataTable:fetchApi:duration

See struktuur muudab `ProductGallery`'ga seotud kõigi mõõdikute filtreerimise või kõigi `fetchApi` kestuste leidmise kogu rakenduses triviaalseks.

Abstraheerige utiliiditeenusesse

Järjepidevuse tagamiseks ja korduvkoodi vähendamiseks mähkige `performance` kutsed oma utiliidimoodulisse või -teenusesse. See muudab ka jõudluse monitooringu sisse- või väljalülitamise lihtsaks vastavalt keskkonnale.

            
// performance-service.js

const IS_PERFORMANCE_MONITORING_ENABLED = process.env.NODE_ENV === 'production' || window.location.search.includes('perf=true');

export const perfMark = (name, options) => {
  if (!IS_PERFORMANCE_MONITORING_ENABLED) return;
  performance.mark(name, options);
};

export const perfMeasure = (name, start, end) => {
  if (!IS_PERFORMANCE_MONITORING_ENABLED) return;
  performance.measure(name, start, end);
};

export const startJourney = (name) => {
  perfMark(`${name}:start`);
};

export const endJourney = (name) => {
  const startMark = `${name}:start`;
  const endMark = `${name}:end`;
  const measureName = `${name}:duration`;

  perfMark(endMark);
  perfMeasure(measureName, startMark, endMark);
  // Soovi korral tühjendage siin märgid
};

// Teie komponendis:
// import { startJourney, endJourney } from './performance-service';
// startJourney('ecom:checkout');
// ...hiljem...
// endJourney('ecom:checkout');

            

              
                Copy
              
            
          

Kokkuvõte: oma rakenduse jõudlusloo juhtimine

Kuigi standardmõõdikud nagu Core Web Vitals pakuvad teie veebisaidile olulist tervisekontrolli, ei valgusta need nende funktsioonide ja interaktsioonide jõudlust, mis muudavad teie rakenduse ainulaadseks. User Timing API on sild, mis selle lünga täidab. See pakub lihtsat, kuid sügavalt võimsat mehhanismi, et mõõta seda, mis on teie kasutajatele ja teie ärile tõeliselt oluline.

Kohandatud märkide ja mõõtmiste rakendamisega muudate jõudluse optimeerimise äraarvamismängust andmepõhiseks teaduseks. Saate täpselt kindlaks teha funktsioonid, komponendid või kasutajavood, mis põhjustavad kitsaskohti, valideerida oma ümberkorraldustööde mõju objektiivsete numbritega ja lõpuks luua oma globaalsele publikule kiirema ja nauditavama kogemuse.

Alustage väikeselt. Tuvastage oma rakenduse kõige kriitilisem kasutajateekond – olgu selleks toote otsimine, vormi esitamine või andmete armatuurlaua laadimine. Instrumenteerige see `performance.mark()` ja `performance.measure()` abil. Analüüsige tulemusi oma arendajatööriistades. Kui näete selle pakutavat selgust, olete võimeline rääkima oma rakenduse täieliku jõudlusloo, üks kohandatud mõõdik korraga.