Kattava opas Performance Observer API:n käyttöön suorituskyvyn seurannassa, pullonkaulojen tunnistamisessa ja verkkosovellusten optimoinnissa.
Performance Observer API: Ajonaikaiset suorituskykymittarit ja pullonkaulojen analysointi
Nykypäivän kilpaillussa digitaalisessa ympäristössä verkkosivustojen ja -sovellusten suorituskyky on kriittisen tärkeää käyttäjien sitouttamisen ja liiketoiminnan menestyksen kannalta. Hitaat latausajat ja reagoimattomat käyttöliittymät voivat johtaa turhautuneisiin käyttäjiin, keskeytettyihin ostoihin ja lopulta menetettyihin tuloihin. Performance Observer API on tehokas työkalu, jonka avulla kehittäjät voivat seurata ja analysoida ajonaikaisia suorituskykymittareita, tunnistaa pullonkauloja ja optimoida sovelluksiaan sujuvamman, nopeamman ja miellyttävämmän käyttökokemuksen saavuttamiseksi riippumatta käyttäjän sijainnista tai laitteesta.
Mikä on Performance Observer API?
Performance Observer API on JavaScript-ohjelmointirajapinta, joka tarjoaa mekanismin suorituskykyyn liittyvien tapahtumien tarkkailuun ja niihin reagoimiseen niiden tapahtuessa verkkosovelluksessa. Toisin kuin perinteiset suorituskyvyn seurantatekniikat, jotka perustuvat säännölliseen näytteenottoon tai manuaaliseen instrumentointiin, Performance Observer API tarjoaa tehokkaamman ja joustavamman tavan kerätä suorituskykytietoja reaaliaikaisesti. Sen avulla kehittäjät voivat tilata tiettyjä suorituskykymerkintätyyppejä ja saada ilmoituksia aina, kun uusia merkintöjä tallennetaan.
Tämä "tarkkaile ja reagoi" -lähestymistapa mahdollistaa proaktiivisen suorituskyvyn seurannan, jonka avulla kehittäjät voivat tunnistaa ja korjata suorituskykyongelmia ennen kuin ne vaikuttavat käyttökokemukseen. API on standardoitu nykyaikaisissa selaimissa, mikä takaa yhtenäisen toiminnan ja alustojen välisen yhteensopivuuden.
Keskeiset käsitteet ja ominaisuudet
Jotta Performance Observer API:ta voidaan käyttää tehokkaasti, on tärkeää ymmärtää sen keskeiset käsitteet ja ominaisuudet:
- PerformanceEntry: Edustaa yksittäistä suorituskykymittausta tai -tapahtumaa. Suorituskykymerkinnät sisältävät tietoa tapahtuman tyypistä, sen alku- ja loppuajoista sekä muista olennaisista määritteistä. Esimerkkejä ovat
resource
,mark
,measure
,navigation
,longtask
jaevent
. - PerformanceObserver: Olio, jonka avulla voit tilata tiettyjä suorituskykymerkintätyyppejä ja saada ilmoituksia aina, kun selaimen suorituskyvyn aikajanalle lisätään uusia merkintöjä.
- observe() method: Käytetään PerformanceObserverin määrittämiseen kuuntelemaan tiettyjä suorituskykymerkintätyyppejä. Voit määrittää tarkkailtavat merkintätyypit sekä
buffered
-vaihtoehdon historiallisten merkintöjen vastaanottamiseksi. - disconnect() method: Käytetään lopettamaan PerformanceObserverin suorituskykytapahtumien kuuntelu.
- takeRecords() method: Palauttaa taulukon kaikista suorituskykymerkinnöistä, jotka on havaittu, mutta joita tarkkailijan takaisinkutsufunktio ei ole vielä käsitellyt.
- Callback Function: Funktio, joka suoritetaan aina, kun uusia suorituskykymerkintöjä havaitaan. Tämä funktio vastaanottaa
PerformanceObserverEntryList
-olion, joka sisältää havaitut merkinnät.
Tuetut suorituskykymerkintätyypit
Performance Observer API tukee useita erilaisia suorituskykymerkintätyyppejä, joista kukin tarjoaa erityisiä näkemyksiä verkkosovellusten suorituskyvyn eri osa-alueista. Yleisimpiä merkintätyyppejä ovat muun muassa:
resource
: Tarjoaa tietoa yksittäisten resurssien, kuten kuvien, skriptien, tyylisivujen ja fonttien, lataamisesta. Tämä merkintätyyppi sisältää tietoja, kuten resurssin URL-osoitteen, alku- ja loppuajat, noutokeston ja siirtokoon.mark
: Mahdollistaa mukautettujen aikaleimojen luomisen koodiisi tiettyjen koodiosien keston mittaamiseksi. Merkkien avulla voit seurata kriittisten toimintojen, kuten tietojenkäsittelyn tai käyttöliittymän renderöinnin, alkua ja loppua.measure
: Käytetään kahden merkin välisen keston laskemiseen. Tämä merkintätyyppi tarjoaa kätevän tavan mitata mukautettujen koodiosien suorituskykyä.navigation
: Tarjoaa tietoa sivun navigoinnin ajoituksesta, mukaan lukien DNS-hakuaika, TCP-yhteyden muodostusaika, pyyntö- ja vastausajat sekä DOM-käsittelyaika.longtask
: Tunnistaa tehtävät, jotka estävät pääsäikeen toiminnan pitkäksi aikaa (tyypillisesti yli 50 millisekuntia). Pitkät tehtävät voivat aiheuttaa käyttöliittymän reagoimattomuutta ja nykimistä (jank).event
: Tallentaa ajoitustietoja tietyistä selaintapahtumista, kutenclick
,keydown
jascroll
.layout-shift
: Seuraa odottamattomia asettelun muutoksia sivulla. Nämä muutokset voivat olla häiritseviä käyttäjille ja vaikuttaa negatiivisesti käyttökokemukseen.largest-contentful-paint
: Mittaa ajan, joka kuluu suurimman sisältöelementin tulemiseen näkyviin sivulla.first-input-delay
: Mittaa ajan, joka selaimelta kuluu ensimmäiseen käyttäjän vuorovaikutukseen (esim. napsautukseen tai napautukseen) vastaamiseen.element
: Raportoi ajoitustietoja tiettyjen elementtien renderöinnistä sivulla.
Käytännön esimerkkejä ja käyttötapauksia
Performance Observer API:ta voidaan käyttää monenlaisissa skenaarioissa verkkosovellusten suorituskyvyn parantamiseksi. Tässä on muutama käytännön esimerkki:
1. Resurssien latausaikojen seuranta
resource
-merkintätyypin avulla voit seurata yksittäisten resurssien, kuten kuvien, skriptien ja tyylisivujen, latausaikoja. Näitä tietoja voidaan käyttää hitaasti latautuvien resurssien tunnistamiseen, jotka vaikuttavat sivun latausaikaan. Voit esimerkiksi käyttää seuraavaa koodia resurssien latausaikojen seuraamiseen:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ["resource"] });
Tämä koodi luo PerformanceObserverin, joka kuuntelee resource
-merkintöjä ja kirjaa resurssin URL-osoitteen ja keston konsoliin. Analysoimalla näitä tietoja voit tunnistaa hitaasti latautuvat resurssit ja optimoida ne pakkaamalla kuvia, käyttämällä sisällönjakeluverkkoa (CDN) tai optimoimalla palvelimen asetuksia.
Globaali näkökulma: Kun seuraat resurssien latausaikoja, ota huomioon käyttäjiesi maantieteellinen sijainti. Käyttäjät alueilla, joilla on hitaammat internetyhteydet, voivat kokea huomattavasti pidempiä latausaikoja. Maantieteellisesti hajautetuilla palvelimilla varustetun CDN-verkon käyttö voi auttaa lieventämään tätä ongelmaa.
2. Mukautetun koodin suoritusajan mittaaminen
mark
- ja measure
-merkintätyyppien avulla voit mitata mukautettujen koodiosien suoritusaikaa. Tämä on hyödyllistä suorituskyvyn pullonkaulojen tunnistamisessa sovelluslogiikassasi. Voit esimerkiksi käyttää seuraavaa koodia tietyn funktion keston mittaamiseen:
performance.mark("start");
// Mitattava koodi
for (let i = 0; i < 1000000; i++) {
// Jokin laskennallisesti raskas operaatio
}
performance.mark("end");
performance.measure("My Function", "start", "end");
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(`Measurement: ${entry.name}, Duration: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ["measure"] });
Tämä koodi luo kaksi merkkiä, start
ja end
, ennen ja jälkeen mitattavan koodiosion. Sen jälkeen se käyttää performance.measure()
-metodia laskeakseen keston näiden kahden merkin välillä. PerformanceObserver kuuntelee measure
-merkintöjä ja kirjaa mittauksen nimen ja keston konsoliin. Analysoimalla näitä tietoja voit tunnistaa hitaasti suoriutuvia koodiosia ja optimoida niitä käyttämällä tekniikoita, kuten välimuistiin tallentamista, memoisaatiota tai algoritmien optimointia.
Toiminnallinen oivallus: Tunnista sovelluksesi kriittiset polut – ne koodijaksot, jotka suoritetaan useimmin ja joilla on suurin vaikutus suorituskykyyn. Keskitä optimointiponnistelusi näihin kriittisiin polkuihin saavuttaaksesi merkittävimmät suorituskykyparannukset.
3. Pitkien tehtävien tunnistaminen
longtask
-merkintätyyppi tunnistaa tehtävät, jotka estävät pääsäikeen toiminnan pitkäksi aikaa. Pitkät tehtävät voivat aiheuttaa käyttöliittymän reagoimattomuutta ja nykimistä, mikä johtaa huonoon käyttökokemukseen. Voit käyttää seuraavaa koodia pitkien tehtävien seuraamiseen:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
});
});
observer.observe({ entryTypes: ["longtask"] });
Tämä koodi luo PerformanceObserverin, joka kuuntelee longtask
-merkintöjä ja kirjaa tehtävän nimen ja keston konsoliin. Analysoimalla näitä tietoja voit tunnistaa pitkäkestoisia tehtäviä ja optimoida niitä pilkkomalla ne pienempiin osiin, käyttämällä asynkronisia operaatioita tai siirtämällä ne suoritettavaksi web workeriin.
Globaali kirjoitusohje: Kun selität teknisiä käsitteitä, käytä selkeää ja ytimekästä kieltä, joka on ymmärrettävää lukijoille, joilla on vaihteleva tekninen osaaminen. Vältä ammattijargonia ja anna konteksti tuntemattomille termeille.
4. Navigoinnin ajoituksen analysointi
navigation
-merkintätyyppi tarjoaa yksityiskohtaista tietoa sivun navigoinnin ajoituksesta, mukaan lukien DNS-hakuaika, TCP-yhteyden muodostusaika, pyyntö- ja vastausajat sekä DOM-käsittelyaika. Näitä tietoja voidaan käyttää pullonkaulojen tunnistamiseen sivun latausprosessissa. Voit esimerkiksi käyttää seuraavaa koodia navigoinnin ajoituksen analysointiin:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(`Navigation: ${entry.name}`);
console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
});
});
observer.observe({ entryTypes: ["navigation"] });
Tämä koodi luo PerformanceObserverin, joka kuuntelee navigation
-merkintöjä ja kirjaa erilaisia ajoitusmittareita konsoliin. Analysoimalla näitä tietoja voit tunnistaa pullonkauloja, kuten hitaan DNS-haun, hitaan TCP-yhteyden, hitaan pyynnön käsittelyn, hitaan vastauksen käsittelyn tai hitaan DOM-käsittelyn. Voit sitten ryhtyä asianmukaisiin toimiin näiden pullonkaulojen korjaamiseksi, kuten optimoimalla DNS-asetuksiasi, parantamalla palvelimesi suorituskykyä tai optimoimalla HTML- ja JavaScript-koodiasi.
Hakukoneoptimointi (SEO): Käytä relevantteja avainsanoja luonnollisesti koko sisällössä. Tässä osiossa avainsanat, kuten "navigoinnin ajoitus", "DNS-hakuaika", "TCP-yhteyden muodostusaika" ja "sivun latausprosessi", on sisällytetty saumattomasti tekstiin.
5. Asettelun muutosten seuranta
layout-shift
-merkintätyyppi seuraa odottamattomia asettelun muutoksia sivulla. Nämä muutokset voivat olla häiritseviä käyttäjille ja vaikuttaa negatiivisesti käyttökokemukseen. Ne johtuvat usein kuvista ilman mittoja, myöhään latautuvista mainoksista tai dynaamisesti lisätystä sisällöstä. Voit käyttää seuraavaa koodia asettelun muutosten seuraamiseen:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
});
});
observer.observe({ entryTypes: ["layout-shift"] });
Tämä koodi luo PerformanceObserverin, joka kuuntelee layout-shift
-merkintöjä ja kirjaa muutoksen arvon (pistemäärä, joka edustaa muutoksen suuruutta) konsoliin. Korkeampi arvo tarkoittaa merkittävämpää muutosta. hadRecentInput
-ominaisuus kertoo, tapahtuiko muutos 500 millisekunnin sisällä käyttäjän syötteestä. Käyttäjän syötteen laukaisemia muutoksia pidetään yleensä vähemmän ongelmallisina. sources
-ominaisuus antaa tietoja elementeistä, jotka aiheuttivat muutoksen. Analysoimalla näitä tietoja voit tunnistaa ja korjata asettelun muutosongelmia määrittämällä mitoitukset kuville, varaamalla tilaa mainoksille ja välttämällä dynaamisesti lisättävää sisältöä, joka voi aiheuttaa sivun uudelleen piirtämisen (reflows).
Toiminnallinen oivallus: Käytä työkaluja, kuten Googlen Lighthousea, tunnistaaksesi asettelun muutosongelmat ja saadaksesi suosituksia niiden korjaamiseksi. Priorisoi niiden muutosten korjaaminen, jotka tapahtuvat ilman käyttäjän syötettä.
6. Largest Contentful Paint (LCP) -mittaus
largest-contentful-paint
-merkintätyyppi mittaa ajan, joka kuluu suurimman sisältöelementin tulemiseen näkyviin sivulla. LCP on yksi Core Web Vitals -mittareista, joka heijastaa sivun havaittua latausnopeutta. Hyvä LCP-arvo on 2,5 sekuntia tai vähemmän. Voit käyttää seuraavaa koodia LCP:n mittaamiseen:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
console.log(`LCP Element: ${entry.element}`);
console.log(`LCP URL: ${entry.url}`);
});
});
observer.observe({ entryTypes: ["largest-contentful-paint"] });
Tämä koodi luo PerformanceObserverin, joka kuuntelee largest-contentful-paint
-merkintöjä ja kirjaa aloitusajan, elementin ja URL-osoitteen konsoliin. Analysoimalla näitä tietoja voit tunnistaa suurimman sisältöelementin ja optimoida sen latausajan optimoimalla kuvan koon, käyttämällä CDN-verkkoa tai esilataamalla resurssin.
Globaali näkökulma: Ota huomioon, että eri käyttäjillä on eri LCP-elementit heidän näyttönsä koon ja resoluution perusteella. Suunnittele sovelluksesi varmistaaksesi hyvän LCP-arvon useilla eri laitteilla ja näyttökooilla.
7. First Input Delay (FID) -mittaus
first-input-delay
-merkintätyyppi mittaa ajan, joka selaimelta kuluu ensimmäiseen käyttäjän vuorovaikutukseen (esim. napsautukseen tai napautukseen) vastaamiseen. FID on toinen Core Web Vitals -mittari, joka heijastaa sivun interaktiivisuutta. Hyvä FID-arvo on 100 millisekuntia tai vähemmän. Voit käyttää seuraavaa koodia FID:n mittaamiseen:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
console.log(`Event Type: ${entry.name}`);
console.log(`Target Element: ${entry.target}`);
});
});
observer.observe({ type: "first-input", buffered: true });
Tämä koodi luo PerformanceObserverin, joka kuuntelee first-input
-merkintöjä ja kirjaa viiveen, tapahtumatyypin ja kohde-elementin konsoliin. Analysoimalla näitä tietoja voit tunnistaa pitkien syöteviiveiden syyt ja optimoida JavaScript-koodiasi vähentääksesi pääsäikeessä käytettävää aikaa.
Toiminnallinen oivallus: Pilko pitkäkestoiset tehtävät pienempiin osiin, käytä web workereita siirtääksesi tehtäviä taustasäikeeseen ja optimoi tapahtumankuuntelijasi vähentääksesi käyttäjän vuorovaikutusten käsittelyaikaa.
Edistyneet tekniikat ja huomiot
Yllä kuvattujen perustapauksien lisäksi Performance Observer API:ta voidaan käyttää edistyneemmissä skenaarioissa syvempien näkemysten saamiseksi verkkosovellusten suorituskyvystä. Tässä on muutamia edistyneitä tekniikoita ja huomioita:
1. Puskuroinnin käyttö
observe()
-metodin buffered
-vaihtoehto mahdollistaa historiallisten suorituskykymerkintöjen noutamisen, jotka on tallennettu ennen PerformanceObserverin luomista. Tämä on hyödyllistä kerättäessä suorituskykytietoja, jotka syntyvät sivun alkuperäisen latauksen aikana tai ennen seurantakoodin latautumista. Esimerkiksi:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(`Entry: ${entry.name}, Type: ${entry.entryType}, Duration: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });
Tämä koodi luo PerformanceObserverin, joka kuuntelee navigation
- ja resource
-merkintöjä ja noutaa kaikki historialliset merkinnät, jotka on tallennettu ennen tarkkailijan luomista.
2. Suorituskykymerkintöjen suodattaminen
Voit suodattaa suorituskykymerkintöjä tiettyjen kriteerien perusteella keskittyäksesi analyysisi kannalta olennaisimpiin tietoihin. Voit esimerkiksi suodattaa resurssimerkintöjä niiden URL-osoitteen tai sisältötyypin perusteella:
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
}
});
});
observer.observe({ entryTypes: ["resource"] });
Tämä koodi luo PerformanceObserverin, joka kuuntelee resource
-merkintöjä ja suodattaa niitä niin, että se sisältää vain kuvien resurssimerkinnät, joiden pääte on .jpg
.
3. Web Workereiden käyttö
Välttääksesi pääsäikeen suorituskykyyn vaikuttamisen, voit siirtää suorituskyvyn seurannan ja analysoinnin web workerille. Tämä mahdollistaa suorituskykytietojen keräämisen ja käsittelyn taustalla estämättä käyttöliittymää. Voit esimerkiksi luoda web workerin, joka kuuntelee suorituskykytapahtumia ja lähettää tiedot pääsäikeeseen analysoitavaksi.
Globaali kirjoitusohje: Käytä esimerkkejä, jotka ovat relevantteja globaalille yleisölle. Vältä esimerkkejä, jotka ovat ominaisia tietylle maalle tai kulttuurille.
4. Integrointi analytiikka-alustoihin
Performance Observer API voidaan integroida analytiikka-alustoihin suorituskykytietojen keräämiseksi ja analysoimiseksi keskitetysti. Tämä mahdollistaa suorituskykytrendien seurannan ajan mittaan, suorituskyvyn heikkenemisten tunnistamisen ja suorituskykymittareiden korreloinnin muiden käyttäjäkäyttäytymistietojen kanssa. Voit lähettää suorituskykymerkintöjä analytiikka-alustallesi sen API:n kautta tai kirjaamalla ne palvelinpuolen päätepisteeseen.
5. Polyfillien käyttö vanhemmille selaimille
Vaikka useimmat nykyaikaiset selaimet tukevat Performance Observer API:ta, se ei välttämättä ole saatavilla vanhemmissa selaimissa. Vanhempien selainten tukemiseksi voit käyttää polyfilliä, joka tarjoaa API:lle varatoteutuksen. Verkossa on saatavilla useita polyfillejä, joita voit käyttää sovelluksessasi.
Parhaat käytännöt Performance Observer API:n käyttöön
Jotta voit hyödyntää Performance Observer API:ta tehokkaasti ja välttää yleisiä sudenkuoppia, noudata näitä parhaita käytäntöjä:
- Seuraa vain niitä mittareita, jotka ovat relevantteja tavoitteidesi kannalta. Vältä liiallisen datan keräämistä, joka voi vaikuttaa suorituskykyyn.
- Käytä suodatusta keskittyäksesi tärkeimpään dataan. Suodata suorituskykymerkintöjä tiettyjen kriteerien perusteella vähentääksesi käsiteltävän datan määrää.
- Siirrä suorituskyvyn seuranta web workerille. Tämä estää suorituskyvyn seurantaa vaikuttamasta pääsäikeen suorituskykyyn.
- Integroi analytiikka-alustoihin seurataksesi suorituskykytrendejä ajan mittaan. Tämä mahdollistaa suorituskyvyn heikkenemisten tunnistamisen ja suorituskykymittareiden korreloinnin muiden käyttäjäkäyttäytymistietojen kanssa.
- Käytä polyfillejä tukeaksesi vanhempia selaimia. Tämä varmistaa, että suorituskyvyn seurantakoodisi toimii laajalla selainvalikoimalla.
- Testaa suorituskyvyn seurantakoodisi perusteellisesti. Varmista, että koodisi ei itsessään aiheuta uusia suorituskykyongelmia.
- Ota huomioon tietosuojamääräykset. Varmista, ettet kerää henkilökohtaisesti tunnistettavia tietoja (PII) ilman käyttäjän suostumusta.
Hakukoneoptimointi (SEO): Luo kiinnostava metakuvaus. Ytimekäs kuvaus, joka tiivistää blogikirjoituksen sisällön, on annettu JSON-metatiedoissa.
Yhteenveto
Performance Observer API on tehokas työkalu, joka mahdollistaa kehittäjien seurata ja analysoida ajonaikaisia suorituskykymittareita, tunnistaa pullonkauloja ja optimoida verkkosovelluksiaan sujuvampaa, nopeampaa ja miellyttävämpää käyttökokemusta varten. Ymmärtämällä API:n keskeiset käsitteet ja ominaisuudet sekä noudattamalla sen käytön parhaita käytäntöjä voit saada arvokkaita näkemyksiä sovellustesi suorituskyvystä ja tarjota paremman käyttökokemuksen käyttäjillesi riippumatta heidän sijainnistaan tai laitteestaan. Verkkosovellusten monimutkaistuessa Performance Observer API pysyy olennaisena työkaluna optimaalisen suorituskyvyn ja käyttäjätyytyväisyyden varmistamisessa.
Muista asettaa käyttökokemus etusijalle. Suorituskyvyn optimoinnin tulee aina perustua tavoitteeseen tarjota saumaton ja miellyttävä kokemus käyttäjillesi. Käyttämällä Performance Observer API:ta tehokkaasti voit saada syvemmän ymmärryksen sovelluksesi suorituskyvystä ja tehdä tietoon perustuvia päätöksiä käyttökokemuksen parantamiseksi.
Harkitsemalla huolellisesti suorituskyvyn globaaleja vaikutuksia kehittäjät voivat luoda verkkosovelluksia, jotka ovat nopeita, reagoivia ja saavutettavissa käyttäjille ympäri maailmaa. Tämä vaatii kokonaisvaltaista lähestymistapaa, joka ottaa huomioon tekijöitä, kuten verkon viiveen, laitteiden ominaisuudet ja kulttuuriset mieltymykset.