Performance Timeline: En Omfattande Guide till Insamling av Mätvärden

I dagens snabba digitala värld är en webbplats prestanda av yttersta vikt. Användare förväntar sig att webbplatser laddas snabbt och svarar omedelbart. En långsam webbplats kan leda till frustration, övergivna sessioner och i slutändan förlorade intäkter. Lyckligtvis tillhandahåller moderna webbläsare kraftfulla verktyg för att mäta och analysera webbplatsprestanda. Ett av de mest värdefulla av dessa verktyg är Performance Timeline API.

Denna omfattande guide kommer att utforska Performance Timeline API i detalj, och täcka allt från dess grundläggande koncept till avancerade tekniker för att samla in och analysera prestandamätvärden. Vi kommer att fördjupa oss i de olika typerna av prestandaposter, demonstrera hur man använder API:et effektivt och ge praktiska exempel för att hjälpa dig att optimera din webbplats prestanda.

Vad är Performance Timeline API?

Performance Timeline API är en uppsättning JavaScript-gränssnitt som ger tillgång till prestandarelaterade data som samlas in av webbläsaren. Det tillåter utvecklare att mäta olika aspekter av en webbplats prestanda, såsom:

• Sidans laddningstid
• Laddningstid för resurser (bilder, skript, stilmallar)
• Mätningar av användartid (user timing)
• Bildfrekvens och renderingsprestanda
• Minnesanvändning

Genom att samla in och analysera dessa data kan utvecklare identifiera prestandaflaskhalsar och implementera optimeringar för att förbättra användarupplevelsen. API:et erbjuder ett standardiserat sätt att komma åt prestandadata, vilket gör det enklare att bygga prestandaövervakningsverktyg som fungerar över olika webbläsare.

Nyckelkoncept och Gränssnitt

Performance Timeline API kretsar kring några få nyckelkoncept och gränssnitt:

• Performance Timeline: Representerar tidslinjen för prestandahändelser som har inträffat under en webbsidas livstid. Det är den centrala punkten för att komma åt prestandadata.
• Performance Entry: Representerar en enskild prestandahändelse, såsom en resursladdningshändelse eller en användardefinierad tidsmätning.
• Performance Observer: Tillåter utvecklare att övervaka Performance Timeline för nya prestandaposter och reagera på dem i realtid.
• `performance`-objektet: Det globala objektet (`window.performance`) som ger tillgång till Performance Timeline och relaterade metoder.

`performance`-objektet

`performance`-objektet är utgångspunkten för att interagera med Performance Timeline API. Det tillhandahåller metoder för att hämta prestandaposter, rensa tidslinjen och skapa prestandaobservatörer. Några av de mest använda metoderna inkluderar:

• `performance.getEntries()`: Returnerar en array med alla prestandaposter på tidslinjen.
• `performance.getEntriesByName(name, entryType)`: Returnerar en array med prestandaposter med ett specifikt namn och posttyp.
• `performance.getEntriesByType(entryType)`: Returnerar en array med prestandaposter av en specifik typ.
• `performance.clearMarks(markName)`: Rensar prestandamarkeringar med ett specifikt namn.
• `performance.clearMeasures(measureName)`: Rensar prestandamätningar med ett specifikt namn.
• `performance.now()`: Returnerar en tidsstämpel med hög upplösning, vanligtvis i millisekunder, som representerar tiden som förflutit sedan navigeringen startade. Detta är avgörande för att mäta varaktigheter.

Typer av prestandaposter (Performance Entry Types)

Performance Timeline API definierar flera olika typer av prestandaposter, där var och en representerar en specifik typ av prestandahändelse. Några av de viktigaste posttyperna inkluderar:

• `navigation`: Representerar navigeringstidpunkten för en sidladdning, inklusive DNS-uppslag, TCP-anslutning, förfrågan och svarstider.
• `resource`: Representerar laddningen av en specifik resurs, som en bild, ett skript eller en stilmall.
• `mark`: Representerar en användardefinierad tidsstämpel på tidslinjen.
• `measure`: Representerar en användardefinierad varaktighet på tidslinjen, beräknad mellan två markeringar.
• `paint`: Representerar tiden det tar för webbläsaren att måla det första innehållet på skärmen (First Paint) och det första meningsfulla innehållet (First Contentful Paint).
• `longtask`: Representerar uppgifter som blockerar huvudtråden under en längre tid (vanligtvis längre än 50 ms), vilket potentiellt kan orsaka ryckighet i gränssnittet (UI jank).
• `event`: Representerar en webbläsarhändelse, som ett musklick eller en tangenttryckning.
• `layout-shift`: Representerar oväntade förskjutningar i sidans layout som kan störa användarupplevelsen (Cumulative Layout Shift).
• `largest-contentful-paint`: Representerar tiden det tar för det största innehållselementet i visningsområdet att bli synligt.

Samla in prestandamätvärden

Det finns flera sätt att samla in prestandamätvärden med hjälp av Performance Timeline API. De vanligaste metoderna inkluderar:

• Hämta poster direkt från tidslinjen: Använda `performance.getEntries()`, `performance.getEntriesByName()` eller `performance.getEntriesByType()` för att hämta specifika prestandaposter.
• Använda en Performance Observer: Övervaka tidslinjen för nya poster och reagera på dem i realtid.

Hämta poster direkt

Det enklaste sättet att samla in prestandamätvärden är att hämta poster direkt från tidslinjen. Detta är användbart för att samla in data efter att en specifik händelse har inträffat, till exempel efter att sidan har laddats eller efter att en användare har interagerat med ett specifikt element.

Här är ett exempel på hur man hämtar alla resursposter från tidslinjen:

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

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

            

              
                Copy
              
            
          

Denna kod hämtar alla poster av typen "resource" och loggar namnet och varaktigheten för varje resurs till konsolen.

Använda en Performance Observer

En Performance Observer låter dig övervaka Performance Timeline för nya prestandaposter och reagera på dem i realtid. Detta är särskilt användbart för att samla in data när den blir tillgänglig, utan att behöva avfråga tidslinjen upprepade gånger.

Här är ett exempel på hur man använder en Performance Observer för att övervaka nya resursposter:

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

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

            

              
                Copy
              
            
          

Denna kod skapar en Performance Observer som lyssnar efter nya poster av typen "resource". När en ny resurspost läggs till på tidslinjen körs observatörens callback-funktion, som loggar resursens namn och varaktighet till konsolen. Metoden `observer.observe()` specificerar vilka posttyper observatören ska övervaka.

Mäta användartid (User Timing)

Performance Timeline API låter dig också definiera dina egna anpassade prestandamätvärden med hjälp av posttyperna `mark` och `measure`. Detta är användbart för att mäta tiden det tar för specifika delar av din applikation att exekvera, som att rendera en komponent eller bearbeta användarinmatning.

För att mäta användartid skapar du först en `mark` för att markera början och slutet av den sektion du vill mäta. Sedan skapar du en `measure` för att beräkna varaktigheten mellan de två markeringarna.

Här är ett exempel på hur man mäter tiden det tar att rendera en komponent:

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

// Kod för att rendera komponenten

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(`Komponentens renderingstid: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Denna kod skapar två markeringar, `component-render-start` och `component-render-end`, före och efter koden som renderar komponenten. Sedan skapar den en mätning som kallas `component-render-time` för att beräkna varaktigheten mellan de två markeringarna. Slutligen hämtar den mätposten från tidslinjen och loggar varaktigheten till konsolen.

Analysera prestandamätvärden

När du har samlat in prestandamätvärden måste du analysera dem för att identifiera prestandaflaskhalsar och implementera optimeringar. Det finns flera verktyg och tekniker du kan använda för detta ändamål:

• Webbläsarens utvecklarverktyg: De flesta moderna webbläsare erbjuder inbyggda utvecklarverktyg som låter dig visualisera och analysera prestandadata. Dessa verktyg inkluderar vanligtvis en Prestanda-panel som visar en tidslinje över prestandahändelser, samt verktyg för att profilera JavaScript-kod och analysera minnesanvändning.
• Verktyg för prestandaövervakning: Det finns många tredjepartsverktyg för prestandaövervakning som kan hjälpa dig att samla in, analysera och visualisera prestandadata. Dessa verktyg erbjuder ofta avancerade funktioner som realtidsövervakning, avvikelsedetektering och automatiserad rapportering. Exempel inkluderar New Relic, Datadog och Sentry.
• Web Vitals: Googles Web Vitals-initiativ tillhandahåller en uppsättning mätvärden som anses vara avgörande för att mäta användarupplevelsen. Dessa mätvärden inkluderar Largest Contentful Paint (LCP), First Input Delay (FID) och Cumulative Layout Shift (CLS). Att övervaka dessa mätvärden kan hjälpa dig att identifiera och åtgärda vanliga prestandaproblem.

Använda webbläsarens utvecklarverktyg

Webbläsarens utvecklarverktyg är en kraftfull och lättillgänglig resurs för att analysera prestanda. Så här kan du använda Prestanda-panelen i Chrome Developer Tools (andra webbläsare har liknande funktioner):

1. Öppna utvecklarverktygen: Högerklicka på webbsidan och välj "Inspektera" eller tryck på F12.
2. Navigera till Prestanda-panelen: Klicka på fliken "Performance".
3. Starta inspelning: Klicka på inspelningsknappen (vanligtvis en cirkel) för att börja samla in prestandadata.
4. Interagera med sidan: Utför de åtgärder du vill analysera, som att ladda sidan, klicka på knappar eller rulla.
5. Stoppa inspelning: Klicka på stoppknappen för att avsluta inspelningen.
6. Analysera tidslinjen: Prestanda-panelen visar en tidslinje över prestandahändelser, inklusive laddningstider, JavaScript-exekvering, rendering och målning.

Tidslinjen ger detaljerad information om varje händelse, inklusive dess varaktighet, starttid och förhållande till andra händelser. Du kan zooma in och ut, filtrera händelser efter typ och inspektera enskilda händelser för att få mer information. Flikarna "Bottom-Up", "Call Tree" och "Event Log" ger olika perspektiv på datan, vilket gör att du kan identifiera prestandaflaskhalsar och optimera din kod.

Web Vitals: Mäta användarupplevelse

Web Vitals är en uppsättning mätvärden definierade av Google för att mäta användarupplevelsen på en webbplats. Att fokusera på dessa mätvärden kan avsevärt förbättra användarnöjdheten och SEO-rankningen.

• Largest Contentful Paint (LCP): Mäter tiden det tar för det största innehållselementet i visningsområdet att bli synligt. Ett bra LCP-värde är 2,5 sekunder eller mindre.
• First Input Delay (FID): Mäter tiden det tar för webbläsaren att svara på den första användarinteraktionen (t.ex. att klicka på en knapp eller trycka på en länk). Ett bra FID-värde är 100 millisekunder eller mindre.
• Cumulative Layout Shift (CLS): Mäter mängden oväntade layoutförskjutningar som inträffar på sidan. Ett bra CLS-värde är 0,1 eller mindre.

Du kan mäta Web Vitals med olika verktyg, inklusive:

• Chrome User Experience Report (CrUX): Ger verklig prestandadata för webbplatser baserat på anonymiserad Chrome-användardata.
• Lighthouse: Ett automatiserat verktyg som granskar prestanda, tillgänglighet och SEO för webbsidor.
• Web Vitals Extension: Ett Chrome-tillägg som visar Web Vitals-mätvärden i realtid när du surfar på webben.
• PerformanceObserver API: Fånga web vitals-data direkt från webbläsaren när händelser inträffar.

Praktiska exempel och användningsfall

Här är några praktiska exempel och användningsfall på hur du kan använda Performance Timeline API för att optimera din webbplats prestanda:

• Identifiera långsamt laddande resurser: Använd posttypen `resource` för att identifiera bilder, skript och stilmallar som tar lång tid att ladda. Optimera dessa resurser genom att komprimera dem, använda ett Content Delivery Network (CDN) eller ladda dem med lazy-loading. Till exempel förlitar sig många e-handelsplattformar som Shopify, Magento eller WooCommerce på bilder för att sälja produkter. Att optimera bildladdning med hjälp av data från prestandatidslinjen kommer att förbättra kundupplevelsen, särskilt för mobila användare.
• Mäta exekveringstid för JavaScript: Använd posttyperna `mark` och `measure` för att mäta tiden det tar för specifika JavaScript-funktioner att exekvera. Identifiera långsamma funktioner och optimera dem genom att använda effektivare algoritmer, cacha resultat eller skjuta upp exekveringen till ett senare tillfälle.
• Upptäcka långa uppgifter (Long Tasks): Använd posttypen `longtask` för att identifiera uppgifter som blockerar huvudtråden under en längre tid. Dela upp dessa uppgifter i mindre bitar eller flytta dem till en bakgrundstråd för att förhindra ryckighet i gränssnittet.
• Övervaka First Contentful Paint (FCP) och Largest Contentful Paint (LCP): Använd posttyperna `paint` och `largest-contentful-paint` för att övervaka tiden det tar för det första innehållet och det största innehållet att visas på skärmen. Optimera den kritiska renderingssökvägen för att förbättra dessa mätvärden.
• Analysera Cumulative Layout Shift (CLS): Använd posttypen `layout-shift` för att identifiera element som orsakar oväntade layoutförskjutningar. Reservera utrymme för dessa element eller använd `transform`-egenskapen för att animera dem utan att orsaka layoutförskjutningar.

Avancerade tekniker

När du har en solid förståelse för grunderna i Performance Timeline API kan du utforska några avancerade tekniker för att ytterligare optimera din webbplats prestanda:

• Real User Monitoring (RUM): Samla in prestandadata från riktiga användare i fält för att få en mer korrekt bild av din webbplats prestanda. Använd ett RUM-verktyg eller implementera din egen anpassade RUM-lösning med hjälp av Performance Timeline API. Denna data kan sedan användas för att fastställa regionala prestandaskillnader. Till exempel kan en webbplats som hostas i USA uppleva långsammare laddningstider i Asien på grund av nätverkslatens.
• Syntetisk övervakning: Använd syntetisk övervakning för att simulera användarinteraktioner och mäta prestanda i en kontrollerad miljö. Detta kan hjälpa dig att identifiera prestandaproblem innan de påverkar riktiga användare.
• Automatiserad prestandatestning: Integrera prestandatestning i din pipeline för kontinuerlig integration/kontinuerlig distribution (CI/CD) för att automatiskt upptäcka prestandaregressioner. Verktyg som Lighthouse CI kan användas för att automatisera denna process.
• Prestandabudgetering: Sätt prestandabudgetar för nyckelmätvärden, som sidladdningstid, resursstorlek och JavaScript-exekveringstid. Använd automatiserade verktyg för att övervaka dessa budgetar och varna dig när de överskrids.

Kompatibilitet mellan webbläsare

Performance Timeline API stöds i stor utsträckning av moderna webbläsare, inklusive Chrome, Firefox, Safari och Edge. Det kan dock finnas vissa skillnader i implementeringen och beteendet hos API:et mellan olika webbläsare.

För att säkerställa kompatibilitet mellan webbläsare är det viktigt att testa din kod i olika webbläsare och använda funktionsdetektering för att gradvis nedgradera funktionaliteten om API:et inte stöds. Bibliotek som `modernizr` kan hjälpa till med funktionsdetektering.

Bästa praxis

Här är några bästa praxis för att använda Performance Timeline API:

• Använd Performance Observers för realtidsövervakning: Performance Observers erbjuder ett effektivare sätt att samla in prestandadata än att upprepade gånger avfråga tidslinjen.
• Var medveten om prestandapåverkan av att samla in prestandadata: Att samla in för mycket data kan negativt påverka din webbplats prestanda. Samla bara in den data du behöver och undvik att utföra kostsamma operationer i Performance Observers callback-funktion.
• Använd meningsfulla namn för markeringar och mätningar: Detta gör det lättare att analysera data och identifiera prestandaflaskhalsar.
• Testa din kod i olika webbläsare: Säkerställ kompatibilitet mellan webbläsare genom att testa din kod i olika webbläsare och använda funktionsdetektering.
• Kombinera med andra optimeringstekniker: Performance Timeline API hjälper till att mäta och identifiera problem. Använd det i kombination med etablerade bästa praxis för webboptimering (bildoptimering, minifiering, CDN-användning) för helhetsmässiga prestandaförbättringar.

Slutsats

Performance Timeline API är ett kraftfullt verktyg för att mäta och analysera en webbplats prestanda. Genom att förstå API:ets nyckelkoncept och gränssnitt kan du samla in värdefulla prestandamätvärden och använda dem för att identifiera prestandaflaskhalsar och implementera optimeringar. Genom att fokusera på Web Vitals och implementera avancerade tekniker som RUM och automatiserad prestandatestning kan du leverera en snabbare, smidigare och mer njutbar användarupplevelse. Att omfamna Performance Timeline API och integrera prestandaanalys i ditt utvecklingsarbetsflöde kommer att leda till betydande förbättringar av din webbplats prestanda och användarnöjdhet i dagens prestandadrivna webbmiljö.