Aggregering av ressurs-timing for frontend-ytelse: Analyse av lastingsytelse

I jakten på å levere eksepsjonelle brukeropplevelser er optimalisering av frontend-ytelse avgjørende. Et kritisk aspekt ved denne optimaliseringen er å forstå hvordan ressurser lastes på nettstedet eller i applikasjonen din. Resource Timing API, en del av den bredere Performance API-pakken, gir detaljert innsikt i timingen for hver ressurs som hentes av nettleseren. Denne informasjonen er uvurderlig for å identifisere flaskehalser og forbedre den generelle lastingsytelsen. Denne omfattende guiden utforsker hvordan du kan utnytte Resource Timing API, aggregere dataene og bruke dem til analyse av lastingsytelse.

Forstå Resource Timing API

Resource Timing API gir detaljert timing-informasjon for ressurser som lastes av en nettside, som bilder, skript, stilark og andre ressurser. Dette inkluderer målinger som:

• Initiator Type: Typen element som initierte forespørselen (f.eks. 'img', 'script', 'link').
• Name: URL-en til ressursen.
• Start Time: Tidsstempelet for når nettleseren begynner å hente ressursen.
• Fetch Start: Tidsstempelet rett før nettleseren begynner å hente ressursen fra disk-cache eller nettverket.
• Domain Lookup Start/End: Tidsstemplene som indikerer når DNS-oppslagsprosessen starter og slutter.
• Connect Start/End: Tidsstemplene som indikerer når TCP-tilkoblingen til serveren starter og slutter.
• Request Start/End: Tidsstemplene som indikerer når HTTP-forespørselen starter og slutter.
• Response Start/End: Tidsstemplene som indikerer når HTTP-svaret starter og slutter.
• Transfer Size: Størrelsen på den overførte ressursen i byte.
• Encoded Body Size: Størrelsen på den kodede (f.eks. GZIP-komprimerte) ressurskroppen.
• Decoded Body Size: Størrelsen på den dekodede ressurskroppen.
• Duration: Total tid brukt på å hente ressursen (responseEnd - startTime).

Disse målingene lar utviklere identifisere spesifikke områder der ytelsesforbedringer kan gjøres. For eksempel kan lange DNS-oppslagstider tyde på at man bør bytte til en raskere DNS-leverandør eller utnytte et CDN. Trege tilkoblingstider kan indikere nettverksbelastning eller problemer på serversiden. Store overføringsstørrelser kan fremheve muligheter for bildeoptimalisering eller minifisering av kode.

Tilgang til ressurs-timing-data

Resource Timing API er tilgjengelig gjennom performance-objektet i JavaScript:

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

resourceTimingEntries.forEach(entry => {
  console.log(entry.name, entry.duration);
});

            

              
                Copy
              
            
          

Dette kodeutdraget henter alle ressurs-timing-oppføringer og logger navnet og varigheten for hver ressurs til konsollen. Merk at nettlesere av sikkerhetsgrunner kan begrense detaljnivået som gis av Resource Timing API. Dette styres ofte av timingAllowOrigin-headeren, som lar ressurser fra andre opphav eksponere sin timing-informasjon.

Aggregering av ressurs-timing-data

Rå ressurs-timing-data er nyttig, men for å få handlingsrettet innsikt må de aggregeres og analyseres. Aggregering innebærer å gruppere og oppsummere dataene for å identifisere trender og mønstre. Dette kan gjøres på flere måter:

Etter ressurstype

Ved å gruppere ressurser etter type (f.eks. bilder, skript, stilark) kan du sammenligne de gjennomsnittlige lastetidene for hver kategori. Dette kan avsløre om visse typer ressurser er konsekvent tregere enn andre.

            const resourceTypes = {};

resourceTimingEntries.forEach(entry => {
  const initiatorType = entry.initiatorType;
  if (!resourceTypes[initiatorType]) {
    resourceTypes[initiatorType] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceTypes[initiatorType].count++;
  resourceTypes[initiatorType].totalDuration += entry.duration;
});

for (const type in resourceTypes) {
  resourceTypes[type].averageDuration = resourceTypes[type].totalDuration / resourceTypes[type].count;
  console.log(type, resourceTypes[type].averageDuration);
}

            

              
                Copy
              
            
          

Denne koden beregner den gjennomsnittlige lastetiden for hver ressurstype og logger den til konsollen. For eksempel kan du finne ut at bilder har en betydelig høyere gjennomsnittlig lastetid enn skript, noe som indikerer et behov for bildeoptimalisering.

Etter domene

Ved å gruppere ressurser etter domene kan du vurdere ytelsen til forskjellige innholdsleveringsnettverk (CDN-er) eller tredjepartstjenester. Dette kan hjelpe deg med å identifisere domener med dårlig ytelse og vurdere alternative leverandører.

            const resourceDomains = {};

resourceTimingEntries.forEach(entry => {
  const domain = new URL(entry.name).hostname;
  if (!resourceDomains[domain]) {
    resourceDomains[domain] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceDomains[domain].count++;
  resourceDomains[domain].totalDuration += entry.duration;
});

for (const domain in resourceDomains) {
  resourceDomains[domain].averageDuration = resourceDomains[domain].totalDuration / resourceDomains[domain].count;
  console.log(domain, resourceDomains[domain].averageDuration);
}

            

              
                Copy
              
            
          

Denne koden beregner den gjennomsnittlige lastetiden for hvert domene og logger den til konsollen. Hvis du legger merke til at et bestemt CDN er konsekvent tregt, kan det være lurt å undersøke ytelsen eller bytte til en annen leverandør. For eksempel, tenk deg et scenario der du bruker både Cloudflare og Akamai. Denne aggregeringen vil tillate deg å sammenligne deres ytelse direkte i din spesifikke kontekst.

Etter side

Ved å aggregere data etter side (eller rute) kan du identifisere sider med spesielt dårlig ytelse. Dette kan hjelpe deg med å prioritere optimaliseringstiltak og fokusere på sidene som har størst innvirkning på brukeropplevelsen.

Dette krever ofte integrasjon med applikasjonens ruting-system. Du må knytte hver ressurs-timing-oppføring til den nåværende sidens URL eller rute. Implementeringen vil variere avhengig av rammeverket du bruker (f.eks. React, Angular, Vue.js).

Opprette egendefinerte målinger

Utover standardmålingene som tilbys av Resource Timing API, kan du lage egendefinerte målinger for å spore spesifikke aspekter ved applikasjonens ytelse. For eksempel kan du ønske å måle tiden det tar å laste en bestemt komponent eller gjengi et spesifikt element.

Dette kan oppnås ved hjelp av metodene performance.mark() og performance.measure():

            performance.mark('component-start');

// Load the component

performance.mark('component-end');

performance.measure('component-load', 'component-start', 'component-end');

const componentLoadTime = performance.getEntriesByName('component-load')[0].duration;

console.log('Component load time:', componentLoadTime);

            

              
                Copy
              
            
          

Dette kodeutdraget måler tiden det tar å laste en komponent og logger den til konsollen. Du kan deretter aggregere disse egendefinerte målingene på samme måte som standardmålingene fra Resource Timing API.

Analyse av ressurs-timing-data for ytelsesinnsikt

Når du har aggregert ressurs-timing-data, kan du bruke dem til å identifisere spesifikke områder for ytelsesforbedring. Her er noen vanlige scenarier og potensielle løsninger:

Lange DNS-oppslagstider

• Årsak: Treg DNS-server, DNS-server langt unna, sjeldne DNS-oppslag.
• Løsning: Bytt til en raskere DNS-leverandør (f.eks. Cloudflare, Google Public DNS), utnytt et CDN for å cache DNS-poster nærmere brukerne, implementer DNS-prefetching.
• Eksempel: Et nettsted rettet mot globale brukere opplevde trege lastetider i visse regioner. Analyse av ressurs-timing-data avslørte lange DNS-oppslagstider i disse regionene. Bytte til et CDN med globale DNS-servere reduserte DNS-oppslagstidene betydelig og forbedret den generelle ytelsen.

Trege tilkoblingstider

• Årsak: Nettverksbelastning, problemer på serversiden, brannmur-interferens.
• Løsning: Optimaliser serverinfrastrukturen, bruk et CDN for å distribuere innhold nærmere brukerne, konfigurer brannmurer for å tillate effektiv kommunikasjon.
• Eksempel: Et e-handelsnettsted opplevde trege tilkoblingstider under perioder med høy trafikk. Analyse av ressurs-timing-data pekte på serveroverbelastning som hovedårsak. Oppgradering av servermaskinvare og optimalisering av databasespørringer forbedret tilkoblingstidene og forhindret ytelsesforringelse under trafikktopper.

Store overføringsstørrelser

• Årsak: Uoptimaliserte bilder, uminifisert kode, unødvendige ressurser.
• Løsning: Optimaliser bilder (f.eks. komprimer, endre størrelse, bruk moderne formater som WebP), minifiser JavaScript- og CSS-kode, fjern ubrukt kode og ressurser, aktiver GZIP- eller Brotli-komprimering.
• Eksempel: Et nyhetsnettsted brukte store, uoptimaliserte bilder som betydelig økte sidens lastetider. Optimalisering av bilder med verktøy som ImageOptim og implementering av lazy loading reduserte overføringsstørrelsene for bilder og forbedret sidens lastingsytelse.
• Hensyn til internasjonalisering: Sørg for at bildeoptimalisering tar hensyn til ulike skjermstørrelser og oppløsninger som er vanlige i forskjellige regioner.

Trege serversvartider

• Årsak: Ineffektiv kode på serversiden, databaseflaskehalser, nettverksforsinkelse.
• Løsning: Optimaliser kode på serversiden, forbedre databaseytelsen, bruk et CDN for å cache innhold nærmere brukerne, implementer HTTP-caching.
• Eksempel: En sosial medieplattform opplevde trege serversvartider på grunn av ineffektive databasespørringer. Optimalisering av databasespørringer og implementering av cache-mekanismer reduserte serversvartidene betydelig og forbedret den generelle ytelsen.

Gjengivelsesblokkerende ressurser

• Årsak: Synkron JavaScript og CSS som blokkerer gjengivelsen av siden.
• Løsning: Utsett lasting av ikke-kritisk JavaScript, inline kritisk CSS, bruk asynkron lasting for skript, fjern ubrukt CSS.
• Eksempel: Et bloggnettsted brukte en stor, gjengivelsesblokkerende CSS-fil som forsinket den første gjengivelsen av siden. Ved å inline kritisk CSS og utsette lasting av ikke-kritisk CSS ble den oppfattede ytelsen til nettstedet forbedret.

Integrering av ressurs-timing-data i verktøy for ytelsesovervåking

Å samle inn og analysere ressurs-timing-data manuelt kan være tidkrevende. Heldigvis finnes det flere verktøy for ytelsesovervåking som kan automatisere denne prosessen og gi sanntidsinnsikt i nettstedets ytelse. Disse verktøyene samler vanligvis inn ressurs-timing-data i bakgrunnen og presenterer dem i et brukervennlig dashbord.

Populære verktøy for ytelsesovervåking som støtter ressurs-timing-data inkluderer:

• Google PageSpeed Insights: Gir anbefalinger for å forbedre sidehastigheten basert på ulike ytelsesmålinger, inkludert ressurs-timing-data.
• WebPageTest: Lar deg teste nettstedets ytelse fra forskjellige steder og nettlesere, og gir detaljert ressurs-timing-informasjon.
• New Relic: Tilbyr omfattende muligheter for ytelsesovervåking, inkludert sanntids ressurs-timing-data og visualiseringer.
• Datadog: Gir detaljerte ressurs-timing-målinger sammen med bredere infrastruktur- og applikasjonsovervåking, og gir et helhetlig bilde av ytelsen.
• Sentry: Primært fokusert på feilsporing, men Sentry tilbyr også funksjoner for ytelsesovervåking, inkludert ressurs-timing-data for å korrelere ytelsesproblemer med spesifikke feil.
• Lighthouse: Et åpen kildekode-verktøy for å forbedre kvaliteten på nettsider. Det har revisjoner for ytelse, tilgjengelighet, progressive webapper, SEO og mer. Kan kjøres fra Chrome DevTools, fra kommandolinjen eller som en Node-modul.

Ved å integrere ressurs-timing-data i disse verktøyene kan du få en dypere forståelse av nettstedets ytelse og identifisere forbedringsområder mer effektivt.

Etiske hensyn og personvern

Når du samler inn og analyserer ressurs-timing-data, er det avgjørende å vurdere etiske implikasjoner og brukernes personvern. Vær åpen med brukerne om dataene du samler inn og hvordan de brukes. Sørg for at du overholder relevante personvernforskrifter, som GDPR og CCPA.

Unngå å samle inn personlig identifiserbar informasjon (PII) og anonymiser eller pseudonymiser data der det er mulig. Implementer passende sikkerhetstiltak for å beskytte data mot uautorisert tilgang eller utlevering. Vurder å tilby brukere muligheten til å velge bort ytelsesovervåking.

Avanserte teknikker og fremtidige trender

Resource Timing API er i stadig utvikling, og nye funksjoner og teknikker dukker opp for å ytterligere forbedre frontend ytelsesanalyse. Her er noen avanserte teknikker og fremtidige trender du bør følge med på:

Server Timing API

Server Timing API lar servere eksponere timing-informasjon om deres behandlingstid for en forespørsel. Denne informasjonen kan kombineres med ressurs-timing-data for å gi et mer komplett bilde av ende-til-ende-ytelsen.

Long Tasks API

Long Tasks API identifiserer oppgaver som blokkerer hovedtråden i lengre perioder, noe som forårsaker hakking i brukergrensesnittet og responsproblemer. Denne informasjonen kan brukes til å optimalisere JavaScript-kode og forbedre brukeropplevelsen.

WebAssembly (Wasm)

WebAssembly er et binært instruksjonsformat for virtuelle maskiner som gir nesten-native ytelser i nettleseren. Å bruke Wasm for ytelseskritiske oppgaver kan forbedre lastetider og generell ytelse betydelig.

HTTP/3

HTTP/3 er den nyeste versjonen av HTTP-protokollen, som bruker transportprotokollen QUIC for å gi forbedret ytelse og pålitelighet. HTTP/3 tilbyr flere fordeler over HTTP/2, inkludert redusert ventetid og forbedret tilkoblingshåndtering.

Konklusjon

Resource Timing API er et kraftig verktøy for å forstå og optimalisere frontend-ytelse. Ved å aggregere og analysere ressurs-timing-data kan du identifisere flaskehalser, forbedre lastetider og levere en bedre brukeropplevelse. Enten du er en erfaren frontend-utvikler eller nettopp har begynt, er det essensielt å mestre Resource Timing API for å bygge høyytelses webapplikasjoner. Omfavn kraften i datadrevet optimalisering og lås opp det fulle potensialet til nettstedet eller applikasjonen din. Husk å prioritere brukernes personvern og etiske hensyn når du samler inn og analyserer ytelsesdata. Ved å holde deg informert om de nyeste trendene og teknikkene, kan du sikre at nettstedet ditt forblir raskt, responsivt og brukervennlig i årene som kommer. Å utnytte disse teknikkene og verktøyene vil bidra til et mer ytelsesdyktig og globalt tilgjengelig web.

Handlingsrettet innsikt: Begynn med å implementere grunnleggende aggregering av ressurs-timing etter ressurstype og domene. Dette gir umiddelbar innsikt i hvor ytelsesflaskehalsene dine er. Deretter kan du integrere med et verktøy for ytelsesovervåking som Google PageSpeed Insights eller WebPageTest for å automatisere datainnsamling og analyse.