Ytelsestidslinje: En omfattende guide til innsamling av målinger

I dagens hektiske digitale verden er nettstedets ytelse avgjørende. Brukere forventer at nettsteder lastes raskt og responderer umiddelbart. Et tregt nettsted kan føre til frustrasjon, avbrutte økter og til syvende og sist tapte inntekter. Heldigvis tilbyr moderne nettlesere kraftige verktøy for å måle og analysere nettstedets ytelse. Et av de mest verdifulle av disse verktøyene er Performance Timeline API.

Denne omfattende guiden vil utforske Performance Timeline API i detalj, og dekker alt fra dets grunnleggende konsepter til avanserte teknikker for innsamling og analyse av ytelsesmålinger. Vi vil dykke ned i de ulike typene ytelsesoppføringer, demonstrere hvordan du bruker API-et effektivt, og gi praktiske eksempler for å hjelpe deg med å optimalisere nettstedets ytelse.

Hva er Performance Timeline API?

Performance Timeline API er et sett med JavaScript-grensesnitt som gir tilgang til ytelsesrelaterte data samlet inn av nettleseren. Det lar utviklere måle ulike aspekter av nettstedets ytelse, som for eksempel:

• Lastetid for siden
• Lastetid for ressurser (bilder, skript, stilark)
• Brukertidsmålinger
• Bildefrekvens og renderingsytelse
• Minnebruk

Ved å samle inn og analysere disse dataene kan utviklere identifisere ytelsesflaskehalser og implementere optimaliseringer for å forbedre brukeropplevelsen. API-et gir en standardisert måte å få tilgang til ytelsesdata på, noe som gjør det enklere å bygge ytelsesovervåkingsverktøy som fungerer på tvers av nettlesere.

Nøkkelkonsepter og grensesnitt

Performance Timeline API kretser rundt noen få nøkkelkonsepter og grensesnitt:

• Performance Timeline: Representerer tidslinjen for ytelseshendelser som har skjedd i løpet av en nettsides levetid. Det er det sentrale punktet for tilgang til ytelsesdata.
• Performance Entry: Representerer en enkelt ytelseshendelse, som for eksempel en ressurslastingshendelse eller en brukerdefinert tidsmåling.
• Performance Observer: Lar utviklere overvåke Performance Timeline for nye ytelsesoppføringer og respondere på dem i sanntid.
• `performance`-objekt: Det globale objektet (`window.performance`) som gir tilgang til Performance Timeline og relaterte metoder.

`performance`-objektet

`performance`-objektet er utgangspunktet for å samhandle med Performance Timeline API. Det gir metoder for å hente ytelsesoppføringer, tømme tidslinjen og opprette ytelsesobservatører. Noen av de mest brukte metodene inkluderer:

• `performance.getEntries()`: Returnerer en matrise av alle ytelsesoppføringer i tidslinjen.
• `performance.getEntriesByName(name, entryType)`: Returnerer en matrise av ytelsesoppføringer med et spesifikt navn og oppføringstype.
• `performance.getEntriesByType(entryType)`: Returnerer en matrise av ytelsesoppføringer av en spesifikk type.
• `performance.clearMarks(markName)`: Fjerner ytelsesmerker med et spesifikt navn.
• `performance.clearMeasures(measureName)`: Fjerner ytelsesmålinger med et spesifikt navn.
• `performance.now()`: Returnerer et høyoppløselig tidsstempel, vanligvis i millisekunder, som representerer tiden som har gått siden navigasjonen startet. Dette er avgjørende for å måle varigheter.

Typer ytelsesoppføringer

Performance Timeline API definerer flere forskjellige typer ytelsesoppføringer, der hver representerer en spesifikk type ytelseshendelse. Noen av de viktigste oppføringstypene inkluderer:

• `navigation`: Representerer navigasjonstidsberegningen for en sidelasting, inkludert DNS-oppslag, TCP-tilkobling, forespørsel og responstider.
• `resource`: Representerer lasting av en spesifikk ressurs, som et bilde, skript eller stilark.
• `mark`: Representerer et brukerdefinert tidsstempel i tidslinjen.
• `measure`: Representerer en brukerdefinert varighet i tidslinjen, beregnet mellom to merker.
• `paint`: Representerer tiden det tar for nettleseren å tegne det første innholdet på skjermen (First Paint) og det første meningsfulle innholdet (First Contentful Paint).
• `longtask`: Representerer oppgaver som blokkerer hovedtråden i en lengre periode (vanligvis lenger enn 50 ms), noe som potensielt kan forårsake hakking i brukergrensesnittet.
• `event`: Representerer en nettleserhendelse, for eksempel et museklikk eller tastetrykk.
• `layout-shift`: Representerer uventede forskyvninger i sideoppsettet som kan forstyrre brukeropplevelsen (Cumulative Layout Shift).
• `largest-contentful-paint`: Representerer tiden det tar for det største innholdselementet i visningsområdet å bli synlig.

Innsamling av ytelsesmålinger

Det er flere måter å samle inn ytelsesmålinger på ved hjelp av Performance Timeline API. De vanligste tilnærmingene inkluderer:

• Hente oppføringer direkte fra tidslinjen: Bruke `performance.getEntries()`, `performance.getEntriesByName()` eller `performance.getEntriesByType()` for å hente spesifikke ytelsesoppføringer.
• Bruke en Performance Observer: Overvåke tidslinjen for nye oppføringer og respondere på dem i sanntid.

Hente oppføringer direkte

Den enkleste måten å samle inn ytelsesmålinger på er å hente oppføringer direkte fra tidslinjen. Dette er nyttig for å samle inn data etter at en spesifikk hendelse har skjedd, for eksempel etter at siden er lastet eller etter at en bruker har interagert med et spesifikt element.

Her er et eksempel på hvordan du henter alle ressursoppføringer fra tidslinjen:

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

resourceEntries.forEach(entry => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Denne koden henter alle oppføringer av typen "resource" og logger navnet og varigheten til hver ressurs i konsollen.

Bruke en Performance Observer

En Performance Observer lar deg overvåke Performance Timeline for nye ytelsesoppføringer og respondere på dem i sanntid. Dette er spesielt nyttig for å samle inn data etter hvert som de blir tilgjengelige, uten å måtte sjekke tidslinjen gjentatte ganger.

Her er et eksempel på hvordan du bruker en Performance Observer for å overvåke nye ressursoppføringer:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Denne koden oppretter en Performance Observer som lytter etter nye oppføringer av typen "resource". Når en ny ressursoppføring legges til i tidslinjen, utføres observatørens tilbakekallingsfunksjon, som logger navnet og varigheten til ressursen i konsollen. `observer.observe()`-metoden spesifiserer hvilke oppføringstyper observatøren skal overvåke.

Måling av brukertiming

Performance Timeline API lar deg også definere dine egne tilpassede ytelsesmålinger ved hjelp av oppføringstypene `mark` og `measure`. Dette er nyttig for å måle tiden det tar for spesifikke deler av applikasjonen din å utføre, som for eksempel å rendre en komponent eller behandle brukerinput.

For å måle brukertiming oppretter du først et `mark` for å markere starten og slutten på seksjonen du vil måle. Deretter oppretter du en `measure` for å beregne varigheten mellom de to merkene.

Her er et eksempel på hvordan du måler tiden det tar å rendre en komponent:

            
performance.mark("component-render-start");

// Code to render the component

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Component render time: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Denne koden oppretter to merker, `component-render-start` og `component-render-end`, før og etter koden som rendrer komponenten. Deretter oppretter den en måling kalt `component-render-time` for å beregne varigheten mellom de to merkene. Til slutt henter den målingsoppføringen fra tidslinjen og logger varigheten til konsollen.

Analyse av ytelsesmålinger

Når du har samlet inn ytelsesmålinger, må du analysere dem for å identifisere ytelsesflaskehalser og implementere optimaliseringer. Det finnes flere verktøy og teknikker du kan bruke til dette formålet:

• Utviklerverktøy i nettleseren: De fleste moderne nettlesere har innebygde utviklerverktøy som lar deg visualisere og analysere ytelsesdata. Disse verktøyene inkluderer vanligvis et Ytelsespanel som viser en tidslinje over ytelseshendelser, samt verktøy for profilering av JavaScript-kode og analyse av minnebruk.
• Verktøy for ytelsesovervåking: Det finnes mange tredjepartsverktøy for ytelsesovervåking som kan hjelpe deg med å samle inn, analysere og visualisere ytelsesdata. Disse verktøyene tilbyr ofte avanserte funksjoner som sanntidsovervåking, avviksdeteksjon og automatisert rapportering. Eksempler inkluderer New Relic, Datadog og Sentry.
• Web Vitals: Googles Web Vitals-initiativ gir et sett med målinger som anses som essensielle for å måle brukeropplevelsen. Disse målingene inkluderer Largest Contentful Paint (LCP), First Input Delay (FID) og Cumulative Layout Shift (CLS). Å overvåke disse målingene kan hjelpe deg med å identifisere og løse vanlige ytelsesproblemer.

Bruk av utviklerverktøy i nettleseren

Utviklerverktøy i nettleseren er en kraftig og lett tilgjengelig ressurs for å analysere ytelse. Slik kan du bruke Ytelsespanelet i Chrome Developer Tools (andre nettlesere har lignende funksjonalitet):

1. Åpne Utviklerverktøy: Høyreklikk på nettsiden og velg "Inspiser" eller trykk F12.
2. Naviger til Ytelsespanelet: Klikk på fanen "Performance".
3. Start opptak: Klikk på opptaksknappen (vanligvis en sirkel) for å begynne å fange ytelsesdata.
4. Interager med siden: Utfør handlingene du vil analysere, som å laste siden, klikke på knapper eller rulle.
5. Stopp opptak: Klikk på stoppknappen for å avslutte opptaket.
6. Analyser tidslinjen: Ytelsespanelet vil vise en tidslinje over ytelseshendelser, inkludert lastetider, JavaScript-kjøring, rendering og tegning.

Tidslinjen gir detaljert informasjon om hver hendelse, inkludert varighet, starttid og forhold til andre hendelser. Du kan zoome inn og ut, filtrere hendelser etter type, og inspisere individuelle hendelser for å få mer informasjon. Fanene "Bottom-Up", "Call Tree" og "Event Log" gir forskjellige perspektiver på dataene, slik at du kan identifisere ytelsesflaskehalser og optimalisere koden din.

Web Vitals: Måling av brukeropplevelse

Web Vitals er et sett med målinger definert av Google for å måle brukeropplevelsen på et nettsted. Å fokusere på disse målingene kan betydelig forbedre brukertilfredshet og SEO-rangering.

• Largest Contentful Paint (LCP): Måler tiden det tar for det største innholdselementet i visningsområdet å bli synlig. En god LCP-score er 2,5 sekunder eller mindre.
• First Input Delay (FID): Måler tiden det tar for nettleseren å respondere på den første brukerinteraksjonen (f.eks. å klikke på en knapp eller trykke på en lenke). En god FID-score er 100 millisekunder eller mindre.
• Cumulative Layout Shift (CLS): Måler mengden uventede layoutforskyvninger som skjer på siden. En god CLS-score er 0,1 eller mindre.

Du kan måle Web Vitals ved hjelp av ulike verktøy, inkludert:

• Chrome User Experience Report (CrUX): Gir reelle ytelsesdata for nettsteder basert på anonymiserte Chrome-brukerdata.
• Lighthouse: Et automatisert verktøy som reviderer ytelsen, tilgjengeligheten og SEO-en til nettsider.
• Web Vitals Extension: En Chrome-utvidelse som viser Web Vitals-målinger i sanntid mens du surfer på nettet.
• PerformanceObserver API: Fang Web Vitals-data direkte fra nettleseren etter hvert som hendelsene skjer.

Praktiske eksempler og bruksområder

Her er noen praktiske eksempler og bruksområder for hvordan du kan bruke Performance Timeline API til å optimalisere nettstedets ytelse:

• Identifisere trege ressurser: Bruk `resource`-oppføringstypen for å identifisere bilder, skript og stilark som tar lang tid å laste. Optimaliser disse ressursene ved å komprimere dem, bruke et Content Delivery Network (CDN), eller laste dem ved behov (lazy-loading). For eksempel er mange e-handelsplattformer som Shopify, Magento eller WooCommerce avhengige av bilder for å selge produkter. Optimalisering av bildeinnlasting ved hjelp av data fra ytelsestidslinjen vil forbedre kundeopplevelsen, spesielt for mobilbrukere.
• Måle JavaScript-kjøringstid: Bruk `mark`- og `measure`-oppføringstypene for å måle tiden det tar for spesifikke JavaScript-funksjoner å kjøre. Identifiser funksjoner som kjører sakte, og optimaliser dem ved å bruke mer effektive algoritmer, cache resultater, eller utsette kjøringen til et senere tidspunkt.
• Oppdage lange oppgaver: Bruk `longtask`-oppføringstypen for å identifisere oppgaver som blokkerer hovedtråden i en lengre periode. Del opp disse oppgavene i mindre biter eller flytt dem til en bakgrunnstråd for å forhindre hakking i brukergrensesnittet.
• Overvåke First Contentful Paint (FCP) og Largest Contentful Paint (LCP): Bruk `paint`- og `largest-contentful-paint`-oppføringstypene for å overvåke tiden det tar for det første innholdet og det største innholdet å vises på skjermen. Optimaliser den kritiske renderingsstien for å forbedre disse målingene.
• Analysere Cumulative Layout Shift (CLS): Bruk `layout-shift`-oppføringstypen for å identifisere elementer som forårsaker uventede layoutforskyvninger. Reserver plass for disse elementene eller bruk `transform`-egenskapen for å animere dem uten å forårsake layoutforskyvninger.

Avanserte teknikker

Når du har en solid forståelse av det grunnleggende i Performance Timeline API, kan du utforske noen avanserte teknikker for å ytterligere optimalisere nettstedets ytelse:

• Real User Monitoring (RUM): Samle inn ytelsesdata fra ekte brukere i felten for å få et mer nøyaktig bilde av nettstedets ytelse. Bruk et RUM-verktøy eller implementer din egen tilpassede RUM-løsning ved hjelp av Performance Timeline API. Disse dataene kan deretter brukes til å bestemme regionale ytelsesforskjeller. For eksempel kan et nettsted som er hostet i USA oppleve tregere lastetider i Asia på grunn av nettverkslatens.
• Syntetisk overvåking: Bruk syntetisk overvåking for å simulere brukerinteraksjoner og måle ytelse i et kontrollert miljø. Dette kan hjelpe deg med å identifisere ytelsesproblemer før de påvirker ekte brukere.
• Automatisert ytelsestesting: Integrer ytelsestesting i din kontinuerlige integrasjons-/kontinuerlige leveringspipeline (CI/CD) for automatisk å oppdage ytelsesregresjoner. Verktøy som Lighthouse CI kan brukes til å automatisere denne prosessen.
• Ytelsesbudsjettering: Sett ytelsesbudsjetter for nøkkelmålinger, som sidelastetid, ressursstørrelse og JavaScript-kjøringstid. Bruk automatiserte verktøy for å overvåke disse budsjettene og varsle deg når de overskrides.

Kompatibilitet på tvers av nettlesere

Performance Timeline API er bredt støttet av moderne nettlesere, inkludert Chrome, Firefox, Safari og Edge. Det kan imidlertid være noen forskjeller i implementeringen og oppførselen til API-et på tvers av forskjellige nettlesere.

For å sikre kompatibilitet på tvers av nettlesere, er det viktig å teste koden din i forskjellige nettlesere og bruke funksjonsdeteksjon for å degradere funksjonaliteten på en elegant måte hvis API-et ikke støttes. Biblioteker som `modernizr` kan hjelpe med funksjonsdeteksjon.

Beste praksis

Her er noen beste praksiser for bruk av Performance Timeline API:

• Bruk Performance Observers for sanntidsovervåking: Performance Observers gir en mer effektiv måte å samle inn ytelsesdata på enn å gjentatte ganger sjekke tidslinjen.
• Vær bevisst på ytelsespåvirkningen av å samle inn ytelsesdata: Å samle inn for mye data kan ha en negativ innvirkning på nettstedets ytelse. Samle bare inn de dataene du trenger, og unngå å utføre kostbare operasjoner i Performance Observer-tilbakekallingsfunksjonen.
• Bruk meningsfulle navn for merker og målinger: Dette vil gjøre det lettere å analysere dataene og identifisere ytelsesflaskehalser.
• Test koden din i forskjellige nettlesere: Sikre kompatibilitet på tvers av nettlesere ved å teste koden din i forskjellige nettlesere og bruke funksjonsdeteksjon.
• Kombiner med andre optimaliseringsteknikker: Performance Timeline API hjelper med å måle og identifisere problemer. Bruk det i kombinasjon med etablerte beste praksiser for weboptimalisering (bildeoptimalisering, minifikasjon, CDN-bruk) for helhetlige ytelsesforbedringer.

Konklusjon

Performance Timeline API er et kraftig verktøy for å måle og analysere nettstedets ytelse. Ved å forstå nøkkelkonseptene og grensesnittene til API-et, kan du samle inn verdifulle ytelsesmålinger og bruke dem til å identifisere ytelsesflaskehalser og implementere optimaliseringer. Ved å fokusere på Web Vitals og implementere avanserte teknikker som RUM og automatisert ytelsestesting, kan du levere en raskere, jevnere og mer fornøyelig brukeropplevelse. Å omfavne Performance Timeline API og integrere ytelsesanalyse i utviklingsarbeidsflyten din vil føre til betydelige forbedringer i nettstedets ytelse og brukertilfredshet i dagens ytelsesdrevne nettmiljø.