Frontend Performance API: Bemästra Navigation och Resource Timing

I dagens digitala landskap är en webbplats prestanda av yttersta vikt. En långsam webbplats kan leda till frustrerade användare, högre avvisningsfrekvens och i slutändan förlorade intäkter. Frontend Performance API tillhandahåller kraftfulla verktyg för att mäta och analysera olika aspekter av din webbplats prestanda, vilket gör att du kan identifiera flaskhalsar och optimera för en snabbare och mer responsiv användarupplevelse. Denna omfattande guide kommer att utforska API:erna för Navigation och Resource Timing, och erbjuda praktiska exempel och handlingskraftiga insikter för utvecklare över hela världen.

Förstå behovet av prestandaövervakning

Innan vi dyker in i detaljerna för API:et, låt oss förstå varför prestandaövervakning är avgörande:

• Användarupplevelse: En snabb webbplats leder till en bättre användarupplevelse, vilket ökar användarnöjdheten och engagemanget.
• Sökmotoroptimering (SEO): Sökmotorer som Google anser att webbplatsens hastighet är en rankningsfaktor.
• Konverteringsgrad: Snabbare webbplatser har ofta högre konverteringsgrader. Användare är mer benägna att slutföra ett köp eller registrera sig för en tjänst om webbplatsen är responsiv.
• Mobil prestanda: Med den ökande användningen av mobila enheter är det viktigt att optimera för mobil prestanda.
• Global räckvidd: Användare från olika delar av världen kan uppleva varierande nätverksförhållanden. Prestandaövervakning hjälper till att säkerställa en konsekvent upplevelse för alla användare, oavsett deras plats.

Introduktion till Frontend Performance API

Frontend Performance API är en samling JavaScript-gränssnitt som ger tillgång till detaljerade prestandamått för en webbsida. Det gör det möjligt för utvecklare att mäta tiden det tar för en sida att laddas, resurser att hämtas och händelser att bearbetas. Denna information kan användas för att identifiera prestandaflaskhalsar och optimera webbplatsen för en bättre användarupplevelse.

Kärngränssnittet är Performance, tillgängligt via window.performance. Detta gränssnitt tillhandahåller metoder och egenskaper för att komma åt olika prestandarelaterade data.

Navigation Timing API: Mätning av sidladdningsprestanda

Navigation Timing API ger detaljerad tidsinformation om de olika stadierna i sidladdningsprocessen. Detta gör att du kan lokalisera exakt var förseningar uppstår och fokusera dina optimeringsinsatser därefter.

Nyckeltal från Navigation Timing

• navigationStart: Tidsstämpeln för när webbläsaren börjar ladda sidan.
• unloadEventStart: Tidsstämpeln för när unload-händelsen startar på föregående sida.
• unloadEventEnd: Tidsstämpeln för när unload-händelsen slutar på föregående sida.
• redirectStart: Tidsstämpeln för när omdirigeringen startar.
• redirectEnd: Tidsstämpeln för när omdirigeringen slutar.
• fetchStart: Tidsstämpeln för när webbläsaren börjar hämta dokumentet.
• domainLookupStart: Tidsstämpeln för när domännamnsuppslagningen startar.
• domainLookupEnd: Tidsstämpeln för när domännamnsuppslagningen slutar.
• connectStart: Tidsstämpeln för när webbläsaren börjar etablera en anslutning till servern.
• connectEnd: Tidsstämpeln för när webbläsaren slutar etablera en anslutning till servern.
• secureConnectionStart: Tidsstämpeln för när webbläsaren startar den säkra anslutningshandskakningen.
• requestStart: Tidsstämpeln för när webbläsaren börjar begära dokumentet från servern.
• responseStart: Tidsstämpeln för när webbläsaren tar emot den första byten av svaret från servern.
• responseEnd: Tidsstämpeln för när webbläsaren slutar ta emot svaret från servern.
• domLoading: Tidsstämpeln för när webbläsaren börjar tolka HTML-dokumentet.
• domInteractive: Tidsstämpeln för när webbläsaren slutar tolka HTML-dokumentet och DOM är redo.
• domContentLoadedEventStart: Tidsstämpeln för när DOMContentLoaded-händelsen startar.
• domContentLoadedEventEnd: Tidsstämpeln för när DOMContentLoaded-händelsen slutar.
• domComplete: Tidsstämpeln för när webbläsaren slutar tolka HTML-dokumentet och alla resurser har laddats.
• loadEventStart: Tidsstämpeln för när load-händelsen startar.
• loadEventEnd: Tidsstämpeln för när load-händelsen slutar.

Åtkomst till Navigation Timing-data

Du kan komma åt Navigation Timing-data med egenskapen performance.timing:

            
const navigationTiming = performance.timing;

console.log('Navigationsstart:', navigationTiming.navigationStart);
console.log('Domännamnsuppslagningstid:', navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart);
console.log('Anslutningstid:', navigationTiming.connectEnd - navigationTiming.connectStart);
console.log('Svarstid:', navigationTiming.responseEnd - navigationTiming.responseStart);
console.log('DOM interaktiv:', navigationTiming.domInteractive - navigationTiming.navigationStart);
console.log('DOM komplett:', navigationTiming.domComplete - navigationTiming.navigationStart);
console.log('Laddningstid:', navigationTiming.loadEventEnd - navigationTiming.navigationStart);

            

              
                Copy
              
            
          

Tolka Navigation Timing-data

Att analysera Navigation Timing-data kan avslöja värdefulla insikter om din webbplats prestanda. Till exempel:

• Hög DNS-uppslagningstid: Indikerar potentiella problem med din DNS-leverantör eller långsam DNS-upplösning.
• Hög anslutningstid: Tyder på problem med din servers nätverksanslutning eller en långsam TLS-handskakning.
• Hög svarstid: Indikerar långsam bearbetning på serversidan eller stora svarsstorlekar.
• Hög tid till DOM interaktiv: Tyder på ineffektiv JavaScript-kod eller komplex DOM-struktur.
• Hög tid till DOM komplett: Indikerar långsam laddning av resurser som bilder, skript och stilmallar.

Exempel: Beräkna Time to First Byte (TTFB)

Time to First Byte (TTFB) är ett avgörande mått som mäter tiden det tar för webbläsaren att ta emot den första byten data från servern. En låg TTFB är avgörande för en snabb användarupplevelse.

            
const ttfb = performance.timing.responseStart - performance.timing.navigationStart;
console.log('Tid till första byte (TTFB):', ttfb, 'ms');

            

              
                Copy
              
            
          

En hög TTFB kan orsakas av långsam bearbetning på serversidan, nätverkslatens eller problem med serverns infrastruktur. Att optimera din serverkonfiguration, använda ett Content Delivery Network (CDN) och minimera nätverkslatens kan hjälpa till att minska TTFB.

Resource Timing API: Mätning av resursladdningsprestanda

Resource Timing API ger detaljerad tidsinformation om laddningen av enskilda resurser på en webbsida, såsom bilder, skript, stilmallar och typsnitt. Detta gör att du kan identifiera vilka resurser som tar längst tid att ladda och optimera dem därefter.

Nyckeltal från Resource Timing

• name: Resursens URL.
• initiatorType: Typen av element som initierade resursförfrågan (t.ex. img, script, link).
• startTime: Tidsstämpeln för när webbläsaren börjar hämta resursen.
• redirectStart: Tidsstämpeln för när omdirigeringen startar.
• redirectEnd: Tidsstämpeln för när omdirigeringen slutar.
• fetchStart: Tidsstämpeln för när webbläsaren börjar hämta resursen.
• domainLookupStart: Tidsstämpeln för när domännamnsuppslagningen startar.
• domainLookupEnd: Tidsstämpeln för när domännamnsuppslagningen slutar.
• connectStart: Tidsstämpeln för när webbläsaren börjar etablera en anslutning till servern.
• connectEnd: Tidsstämpeln för när webbläsaren slutar etablera en anslutning till servern.
• secureConnectionStart: Tidsstämpeln för när webbläsaren startar den säkra anslutningshandskakningen.
• requestStart: Tidsstämpeln för när webbläsaren börjar begära resursen från servern.
• responseStart: Tidsstämpeln för när webbläsaren tar emot den första byten av svaret från servern.
• responseEnd: Tidsstämpeln för när webbläsaren slutar ta emot svaret från servern.
• duration: Den totala tiden det tog att ladda resursen.

Åtkomst till Resource Timing-data

Du kan komma åt Resource Timing-data med metoden performance.getEntriesByType('resource'):

            
const resourceTimings = performance.getEntriesByType('resource');

resourceTimings.forEach(resource => {
  console.log('Resursnamn:', resource.name);
  console.log('Initiator-typ:', resource.initiatorType);
  console.log('Varaktighet:', resource.duration, 'ms');
});

            

              
                Copy
              
            
          

Tolka Resource Timing-data

Att analysera Resource Timing-data kan hjälpa dig att identifiera långsamt laddande resurser och optimera dem för snabbare laddningstider. Till exempel:

• Stora bilder: Optimera bilder genom att komprimera dem och använda lämpliga filformat (t.ex. WebP).
• Ooptimerade skript och stilmallar: Minimera och komprimera skript och stilmallar för att minska deras filstorlekar.
• Långsamt laddande typsnitt: Använd webbtypsnitt effektivt genom att dela upp dem (subsetting) och använda font-display-egenskaper.
• Tredjepartsresurser: Utvärdera prestandapåverkan från tredjepartsresurser och överväg alternativ om det behövs.

Exempel: Identifiera långsamt laddande bilder

Detta exempel visar hur man identifierar långsamt laddande bilder med hjälp av Resource Timing API:

            
const resourceTimings = performance.getEntriesByType('resource');

const slowImages = resourceTimings.filter(resource => resource.initiatorType === 'img' && resource.duration > 500);

if (slowImages.length > 0) {
  console.warn('Långsamt laddande bilder upptäckta:');
  slowImages.forEach(image => {
    console.log('Bild-URL:', image.name);
    console.log('Varaktighet:', image.duration, 'ms');
  });
}

            

              
                Copy
              
            
          

När du har identifierat långsamt laddande bilder kan du optimera dem genom att komprimera dem, ändra deras storlek på lämpligt sätt och använda tekniker för lat laddning (lazy loading).

Praktiska exempel och användningsfall

Verklighetsscenario: Optimering av en e-handelswebbplats

Tänk dig en e-handelswebbplats som betjänar kunder globalt. Analys av Navigation och Resource Timing-data avslöjar följande problem:

• Hög TTFB för användare i Asien: Indikerar långsam bearbetning på serversidan eller nätverkslatens mellan ursprungsservern och användare i Asien.
• Långsamt laddande produktbilder: Bilderna är inte optimerade för webben, vilket resulterar i långa laddningstider.
• Ooptimerade JavaScript-filer: JavaScript-filer är inte minimerade och komprimerade, vilket leder till ökade filstorlekar.

Baserat på dessa resultat kan följande optimeringar implementeras:

• Implementera ett Content Delivery Network (CDN): Distribuera webbplatsens innehåll över flera servrar globalt för att minska latensen för användare i olika regioner.
• Optimera produktbilder: Komprimera bilder med verktyg som ImageOptim eller TinyPNG och använd lämpliga filformat som WebP.
• Minimera och komprimera JavaScript-filer: Använd verktyg som UglifyJS eller Terser för att minimera JavaScript-filer och Gzip eller Brotli för att komprimera dem.
• Latladdning (lazy load) av bilder: Implementera latladdning för bilder som inte är direkt synliga (below the fold) för att förbättra den initiala sidladdningstiden.

Efter att ha implementerat dessa optimeringar förbättras webbplatsens prestanda avsevärt, vilket resulterar i en bättre användarupplevelse, högre konverteringsgrader och förbättrade SEO-rankingar.

Optimering av mobil prestanda

Mobilanvändare upplever ofta långsammare nätverksanslutningar jämfört med datoranvändare. Att optimera för mobil prestanda är avgörande för att ge en sömlös användarupplevelse på mobila enheter.

Här är några mobilspecifika optimeringstekniker:

• Använd responsiva bilder: Servera olika bildstorlekar baserat på enhetens skärmstorlek för att minska mängden data som överförs över nätverket.
• Optimera för touch: Se till att knappar och länkar är tillräckligt stora och har tillräckligt med utrymme för att vara lätta att trycka på på pekskärmsenheter.
• Minimera HTTP-förfrågningar: Minska antalet HTTP-förfrågningar genom att kombinera CSS- och JavaScript-filer, infoga kritisk CSS (inlining) och använda CSS-sprites.
• Prioritera innehåll "ovanför vecket" (above-the-fold): Ladda det innehåll som är synligt på skärmen först för att förbättra webbplatsens upplevda prestanda.

Bortom Navigation och Resource Timing: Utforska andra prestanda-API:er

Även om Navigation och Resource Timing är väsentliga, erbjuder Frontend Performance API en mängd andra verktyg för djupgående prestandaanalys:

• User Timing API: Låter dig definiera anpassade prestandamått och mäta tiden det tar för specifika händelser att inträffa i din applikation.
• Long Tasks API: Hjälper dig att identifiera långvariga uppgifter som blockerar huvudtråden och påverkar din applikations responsivitet.
• Paint Timing API: Tillhandahåller mätvärden relaterade till sidans rendering, såsom First Paint (FP) och First Contentful Paint (FCP).
• Largest Contentful Paint (LCP): Mäter tiden det tar för det största innehållselementet i visningsområdet att bli synligt.
• Cumulative Layout Shift (CLS): Mäter mängden oväntade layoutförskjutningar som inträffar under sidladdningen.
• Event Timing API: Erbjuder detaljerad tidsinformation om användarinteraktioner med sidan, som klick- och tangenttryckningshändelser.

Verktyg för att analysera prestandadata

Flera verktyg kan hjälpa dig att analysera data från Navigation och Resource Timing och identifiera prestandaflaskhalsar:

• Webbläsarens utvecklarverktyg: De flesta moderna webbläsare har inbyggda utvecklarverktyg som låter dig inspektera data från Navigation och Resource Timing, analysera nätverksförfrågningar och profilera JavaScript-kod.
• WebPageTest: Ett gratis onlineverktyg som låter dig testa din webbplats prestanda från olika platser och webbläsare.
• Lighthouse: Ett automatiserat open source-verktyg för att förbättra kvaliteten på webbsidor. Det har granskningar för prestanda, tillgänglighet, progressiva webbappar, SEO med mera.
• Google PageSpeed Insights: Ett gratis onlineverktyg som analyserar din webbplats prestanda och ger rekommendationer för förbättringar.
• New Relic, Datadog och andra APM-verktyg: Erbjuder detaljerade funktioner för prestandaövervakning och analys för webbapplikationer.

Bästa praxis för optimering av webbprestanda

Här är några allmänna bästa praxis för optimering av webbprestanda:

• Minimera HTTP-förfrågningar: Minska antalet HTTP-förfrågningar genom att kombinera CSS- och JavaScript-filer, använda CSS-sprites och infoga kritisk CSS (inlining).
• Använd ett Content Delivery Network (CDN): Distribuera din webbplats innehåll över flera servrar globalt för att minska latensen för användare i olika regioner.
• Optimera bilder: Komprimera bilder, använd lämpliga filformat (t.ex. WebP) och använd responsiva bilder.
• Minimera och komprimera CSS och JavaScript: Minska filstorlekarna på CSS- och JavaScript-filer genom att minimera och komprimera dem.
• Utnyttja webbläsarens cache: Konfigurera din server för att ställa in lämpliga cache-headers så att webbläsare kan cacha statiska resurser.
• Optimera webbtypsnitt: Dela upp webbtypsnitt (subsetting), använd font-display-egenskaper och hosta typsnitt på din egen domän.
• Skjut upp laddning av icke-kritiska resurser: Använd latladdning (lazy loading) för bilder som inte är direkt synliga och skjut upp laddningen av icke-kritiska JavaScript-filer.
• Övervaka prestandan regelbundet: Övervaka kontinuerligt din webbplats prestanda med hjälp av Frontend Performance API och andra verktyg för att proaktivt identifiera och åtgärda prestandaproblem.

Slutsats

Frontend Performance API, särskilt API:erna för Navigation och Resource Timing, ger ovärderliga insikter om din webbplats prestanda. Genom att förstå och använda dessa API:er kan du identifiera prestandaflaskhalsar, optimera din webbplats för snabbare laddningstider och i slutändan ge en bättre användarupplevelse för din globala publik. Kom ihåg att kontinuerligt övervaka din webbplats prestanda och anpassa dina optimeringsstrategier efter behov för att ligga steget före och säkerställa en snabb, responsiv och engagerande onlineupplevelse.