Frontend Performance API Resurstidsaggregering: Analys av Laddningsprestanda

I strävan efter att leverera exceptionella användarupplevelser är optimering av frontend-prestanda av yttersta vikt. En kritisk aspekt av denna optimering ligger i att förstå hur resurser laddas på din webbplats eller applikation. Resource Timing API, en del av den bredare Performance API-sviten, ger detaljerade insikter om tidsåtgången för varje resurs som hämtas av webbläsaren. Denna information är ovärderlig för att identifiera flaskhalsar och förbättra den övergripande laddningsprestandan. Denna omfattande guide utforskar hur man utnyttjar Resource Timing API, aggregerar dess data och använder den för analys av laddningsprestanda.

Förstå Resource Timing API

Resource Timing API ger detaljerad tidsinformation för resurser som laddas av en webbsida, såsom bilder, skript, stilmallar och andra tillgångar. Detta inkluderar mätvärden som:

• Initiator Type: Typen av element som initierade förfrågan (t.ex. 'img', 'script', 'link').
• Name: Resursens URL.
• Start Time: Tidsstämpeln när webbläsaren börjar hämta resursen.
• Fetch Start: Tidsstämpeln omedelbart innan webbläsaren börjar hämta resursen från diskcachen eller nätverket.
• Domain Lookup Start/End: Tidsstämplarna som indikerar när DNS-uppslagsprocessen startar och slutar.
• Connect Start/End: Tidsstämplarna som indikerar när TCP-anslutningen till servern startar och slutar.
• Request Start/End: Tidsstämplarna som indikerar när HTTP-förfrågan startar och slutar.
• Response Start/End: Tidsstämplarna som indikerar när HTTP-svaret startar och slutar.
• Transfer Size: Storleken på den överförda resursen i bytes.
• Encoded Body Size: Storleken på den kodade (t.ex. GZIP-komprimerade) resurskroppen.
• Decoded Body Size: Storleken på den avkodade resurskroppen.
• Duration: Total tid som spenderats på att hämta resursen (responseEnd - startTime).

Dessa mätvärden gör det möjligt för utvecklare att peka ut specifika områden där prestandaförbättringar kan göras. Till exempel kan långa DNS-uppslagstider tyda på att man bör byta till en snabbare DNS-leverantör eller utnyttja ett CDN. Långsamma anslutningstider kan indikera nätverksstockning eller problem på serversidan. Stora överföringsstorlekar kan belysa möjligheter för bildoptimering eller kodminifiering.

Åtkomst till Resurstidsdata

Resource Timing API nås via performance-objektet i JavaScript:

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

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

            

              
                Copy
              
            
          

Detta kodavsnitt hämtar alla resurstidsposter och loggar namnet och varaktigheten för varje resurs till konsolen. Notera att webbläsare av säkerhetsskäl kan begränsa detaljnivån som tillhandahålls av Resource Timing API. Detta styrs ofta av timingAllowOrigin-huvudet, vilket tillåter resurser från andra ursprung att exponera sin tidsinformation.

Aggregera Resurstidsdata

Rå resurstidsdata är användbar, men för att få handlingsbara insikter måste den aggregeras och analyseras. Aggregering innebär att gruppera och sammanfatta data för att identifiera trender och mönster. Detta kan göras på flera sätt:

Efter Resurstyp

Att gruppera resurser efter typ (t.ex. bilder, skript, stilmallar) låter dig jämföra de genomsnittliga laddningstiderna för varje kategori. Detta kan avslöja om vissa typer av resurser är konsekvent långsammare än andra.

            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
              
            
          

Denna kod beräknar den genomsnittliga laddningstiden för varje resurstyp och loggar den till konsolen. Du kan till exempel upptäcka att bilder har en betydligt högre genomsnittlig laddningstid än skript, vilket indikerar ett behov av bildoptimering.

Efter Domän

Att gruppera resurser efter domän låter dig bedöma prestandan hos olika innehållsleveransnätverk (CDN) eller tredjepartstjänster. Detta kan hjälpa dig att identifiera långsamma domäner och överväga alternativa leverantö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
              
            
          

Denna kod beräknar den genomsnittliga laddningstiden för varje domän och loggar den till konsolen. Om du märker att ett visst CDN är konsekvent långsamt, kanske du vill undersöka dess prestanda eller byta till en annan leverantör. Tänk dig till exempel ett scenario där du använder både Cloudflare och Akamai. Denna aggregering skulle låta dig direkt jämföra deras prestanda i ditt specifika sammanhang.

Efter Sida

Att aggregera data per sida (eller rutt) gör det möjligt att identifiera sidor med särskilt dålig prestanda. Detta kan hjälpa dig att prioritera optimeringsinsatser och fokusera på de sidor som har störst inverkan på användarupplevelsen.

Detta kräver ofta integration med din applikations rotningssystem. Du skulle behöva associera varje resurstidspost med den aktuella sidans URL eller rutt. Implementeringen skulle variera beroende på vilket ramverk du använder (t.ex. React, Angular, Vue.js).

Skapa anpassade mätvärden

Utöver de standardmätvärden som tillhandahålls av Resource Timing API kan du skapa anpassade mätvärden för att spåra specifika aspekter av din applikations prestanda. Du kanske till exempel vill mäta tiden det tar att ladda en viss komponent eller rendera ett specifikt element.

Detta kan uppnås med hjälp av metoderna performance.mark() och 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
              
            
          

Detta kodavsnitt mäter tiden det tar att ladda en komponent och loggar den till konsolen. Du kan sedan aggregera dessa anpassade mätvärden på samma sätt som standardmätvärdena från Resource Timing API.

Analysera Resurstidsdata för Prestandainsikter

När du har aggregerat resurstidsdata kan du använda den för att identifiera specifika områden för prestandaförbättring. Här är några vanliga scenarier och potentiella lösningar:

Långa DNS-uppslagstider

• Orsak: Långsam DNS-server, avlägsen DNS-server, sällsynta DNS-uppslag.
• Lösning: Byt till en snabbare DNS-leverantör (t.ex. Cloudflare, Google Public DNS), utnyttja ett CDN för att cacha DNS-poster närmare användarna, implementera DNS-förhämtning (prefetching).
• Exempel: En webbplats som riktar sig till användare globalt upplevde långsamma laddningstider i vissa regioner. Analys av resurstidsdata avslöjade långa DNS-uppslagstider i dessa regioner. Att byta till ett CDN med globala DNS-servrar minskade DNS-uppslagstiderna avsevärt och förbättrade den övergripande prestandan.

Långsamma Anslutningstider

• Orsak: Nätverksstockning, problem på serversidan, brandväggsstörningar.
• Lösning: Optimera serverinfrastrukturen, använd ett CDN för att distribuera innehåll närmare användarna, konfigurera brandväggar för att tillåta effektiv kommunikation.
• Exempel: En e-handelswebbplats upplevde långsamma anslutningstider under rusningstid. Analys av resurstidsdata pekade på överbelastning av servern som den primära orsaken. Uppgradering av serverhårdvara och optimering av databasfrågor förbättrade anslutningstiderna och förhindrade prestandaförsämring under hög trafik.

Stora Överföringsstorlekar

• Orsak: Ooptimerade bilder, ominifierad kod, onödiga tillgångar.
• Lösning: Optimera bilder (t.ex. komprimera, ändra storlek, använd moderna format som WebP), minifiera JavaScript- och CSS-kod, ta bort oanvänd kod och tillgångar, aktivera GZIP- eller Brotli-komprimering.
• Exempel: En nyhetswebbplats använde stora, ooptimerade bilder som avsevärt ökade sidans laddningstider. Att optimera bilder med verktyg som ImageOptim och implementera lazy loading minskade bildöverföringsstorlekarna och förbättrade sidans laddningsprestanda.
• Internationaliseringshänsyn: Se till att bildoptimeringen tar hänsyn till olika skärmstorlekar och upplösningar som är vanliga i olika regioner.

Långsamma Server-svarstider

• Orsak: Ineffektiv kod på serversidan, databasflaskhalsar, nätverkslatens.
• Lösning: Optimera kod på serversidan, förbättra databasprestanda, använd ett CDN för att cacha innehåll närmare användarna, implementera HTTP-cachning.
• Exempel: En social medieplattform upplevde långsamma server-svarstider på grund av ineffektiva databasfrågor. Att optimera databasfrågor och implementera cachningsmekanismer minskade server-svarstiderna avsevärt och förbättrade den övergripande prestandan.

Renderingsblockerande Resurser

• Orsak: Synkron JavaScript och CSS som blockerar renderingen av sidan.
• Lösning: Skjut upp laddningen av icke-kritisk JavaScript, inline-a kritisk CSS, använd asynkron laddning för skript, eliminera oanvänd CSS.
• Exempel: En bloggwebbplats använde en stor, renderingsblockerande CSS-fil som fördröjde den initiala renderingen av sidan. Att inline-a kritisk CSS och skjuta upp laddningen av icke-kritisk CSS förbättrade webbplatsens upplevda prestanda.

Integrera Resurstidsdata i Prestandaövervakningsverktyg

Att manuellt samla in och analysera resurstidsdata kan vara tidskrävande. Lyckligtvis kan flera prestandaövervakningsverktyg automatisera denna process och ge realtidsinsikter om din webbplats prestanda. Dessa verktyg samlar vanligtvis in resurstidsdata i bakgrunden och presenterar den i en användarvänlig instrumentpanel.

Populära prestandaövervakningsverktyg som stöder resurstidsdata inkluderar:

• Google PageSpeed Insights: Ger rekommendationer för att förbättra sidhastigheten baserat på olika prestandamått, inklusive resurstidsdata.
• WebPageTest: Låter dig testa din webbplats prestanda från olika platser och webbläsare, och ger detaljerad information om resurstid.
• New Relic: Erbjuder omfattande prestandaövervakningsfunktioner, inklusive realtidsdata för resurstid och visualiseringar.
• Datadog: Ger detaljerade resurstidsmått tillsammans med bredare infrastruktur- och applikationsövervakning, vilket ger en helhetsbild av prestandan.
• Sentry: Primärt fokuserat på felspårning, erbjuder Sentry även prestandaövervakningsfunktioner, inklusive resurstidsdata för att korrelera prestandaproblem med specifika fel.
• Lighthouse: Ett automatiserat verktyg med öppen källkod för att förbättra kvaliteten på webbsidor. Det har granskningar för prestanda, tillgänglighet, progressiva webbappar, SEO med mera. Kan köras från Chrome DevTools, kommandoraden eller som en Node-modul.

Genom att integrera resurstidsdata i dessa verktyg kan du få en djupare förståelse för din webbplats prestanda och identifiera förbättringsområden mer effektivt.

Etiska Överväganden och Användarintegritet

När du samlar in och analyserar resurstidsdata är det avgörande att beakta etiska implikationer och användarintegritet. Var transparent mot användare om den data du samlar in och hur den används. Se till att du följer relevanta integritetsbestämmelser, såsom GDPR och CCPA.

Undvik att samla in personligt identifierbar information (PII) och anonymisera eller pseudonymisera data där det är möjligt. Implementera lämpliga säkerhetsåtgärder för att skydda data från obehörig åtkomst eller avslöjande. Överväg att erbjuda användare möjligheten att välja bort prestandaövervakning.

Avancerade Tekniker och Framtida Trender

Resource Timing API utvecklas ständigt, och nya funktioner och tekniker dyker upp för att ytterligare förbättra analysen av frontend-prestanda. Här är några avancerade tekniker och framtida trender att hålla utkik efter:

Server Timing API

Server Timing API tillåter servrar att exponera tidsinformation om sin bearbetningstid för en förfrågan. Denna information kan kombineras med resurstidsdata för att ge en mer komplett bild av prestandan från början till slut.

Long Tasks API

Long Tasks API identifierar uppgifter som blockerar huvudtråden under längre perioder, vilket orsakar ryckighet i gränssnittet (UI jank) och problem med responsivitet. Denna information kan användas för att optimera JavaScript-kod och förbättra användarupplevelsen.

WebAssembly (Wasm)

WebAssembly är ett binärt instruktionsformat för virtuella maskiner som möjliggör nästan-nativ prestanda i webbläsaren. Att använda Wasm för prestandakritiska uppgifter kan avsevärt förbättra laddningstider och övergripande prestanda.

HTTP/3

HTTP/3 är den senaste versionen av HTTP-protokollet, som använder transportprotokollet QUIC för att ge förbättrad prestanda och tillförlitlighet. HTTP/3 erbjuder flera fördelar jämfört med HTTP/2, inklusive minskad latens och förbättrad anslutningshantering.

Slutsats

Resource Timing API är ett kraftfullt verktyg för att förstå och optimera frontend-prestanda. Genom att aggregera och analysera resurstidsdata kan du identifiera flaskhalsar, förbättra laddningstider och leverera en bättre användarupplevelse. Oavsett om du är en erfaren frontend-utvecklare eller nybörjare, är det avgörande att bemästra Resource Timing API för att bygga högpresterande webbapplikationer. Omfamna kraften i datadriven optimering och frigör den fulla potentialen hos din webbplats eller applikation. Kom ihåg att prioritera användarintegritet och etiska överväganden när du samlar in och analyserar prestandadata. Genom att hålla dig informerad om de senaste trenderna och teknikerna kan du säkerställa att din webbplats förblir snabb, responsiv och användarvänlig i många år framöver. Att utnyttja dessa tekniker och verktyg kommer att bidra till en mer presterande och globalt tillgänglig webb.

Handlingsbar Insikt: Börja med att implementera grundläggande aggregering av resurstid efter resurstyp och domän. Detta ger omedelbara insikter om var dina prestandaflaskhalsar finns. Integrera sedan med ett prestandaövervakningsverktyg som Google PageSpeed Insights eller WebPageTest för att automatisera datainsamling och analys.