Core/Dash Forstå Metric Breakdown-dashboards

Forstå Metric Breakdown-dashboardet

Sammensatte metrikker som LCP og INP aggregerer flere forskellige timing-hændelser. Optimering af den samlede score kræver, at du isolerer disse underliggende komponenter. Metric Breakdown-dashboardet dissekerer ydeevnen i detaljerede faser for at identificere den specifikke flaskehals.

Dette værktøj erstatter bred optimering med præcise tekniske mål. Det henfører forsinkelsen til serveren, netværket eller kørslen på klienten.

Breakdown-dashboardets anatomi

Dashboardet giver tre synkroniserede visninger til at isolere rodårsagen til forsinkelsen:

• Contribution Donut: Visualiserer den relative vægt af hver delkomponent. Den besvarer spørgsmålet: "Hvad er den største faktor?" Hvis `Time to First Byte` udgør 70 % af diagrammet, ved du, at problemet er relateret til backend.
• Historical Timeline: Viser tendensen for de absolutte værdier for hver komponent over tid. Brug den til at sammenholde ændringer i ydeevnen med specifikke begivenheder som fx deployments.
• Segmented Data Table: Opdeler metrikken efter dimension (URL, enhed osv.). Hver række indeholder en distributionsbar, der viser segmentets unikke profil, hvilket hjælper dig med at spotte outliers.

LCP-komponenter (Largest Contentful Paint)

LCP måler indlæsningsydeevne. Vi opdeler denne metrik i fire faser:

• TTFB (Time to First Byte): Serverens svartid. Høj TTFB indikerer langsomme databaseforespørgsler eller manglende edge-caching.
• Load Delay: Tiden mellem det første HTML-svar og starten på download af LCP-ressourcen. Dette måler forsinkelsen i at opdage ressourcen.
• Load Time: Den tid, det tager at downloade LCP-aktivet (billede eller skrifttype) over netværket. Dette korrelerer med filstørrelse og båndbredde.
• Render Delay: Tiden fra ressourcen er færdigdownloadet, til den tegnes på skærmen. Høj Render Delay skyldes ofte, at main thread blokeres af JavaScript.

TTFB-komponenter (Time to First Byte)

TTFB fungerer som en proxy for serverens responstid. Denne opdeling isolerer netværksforbindelsens faser:

• Waiting: Den tid, browseren venter på, at serveren genererer et svar (backend-behandling).
• Cache: Tid brugt på at kontrollere lokale eller mellemliggende caches.
• DNS: Varigheden af Domain Name System-opslaget.
• Connection: Den tid, det tager at etablere TCP-forbindelsen.
• Request: Den tid, det tager at sende HTTP-request-headere.

INP-komponenter (Interaction to Next Paint)

INP måler interaktivitet. Vi opdeler interaktionslivscyklussen for at lokalisere blokering af main thread:

• Input Delay: Tiden mellem brugerinteraktion og afvikling af event handler. Høj Input Delay betyder, at main thread var optaget.
• Processing: Den tid, det tager at afvikle event-callbacks. Dette repræsenterer effektiviteten af din JavaScript-logik.
• Presentation: Den tid, det tager for browseren at beregne layout og tegne den næste frame.

Diagnosticeringsflow

Følg denne rækkefølge for at diagnosticere en regression:

• Kvantificér flaskehalsen: Kig på Donut-diagrammet for at finde den dominerende delkomponent. Hvis `TTFB` er høj, skal du tjekke din server. Hvis `Resource Load Delay` er høj, skal du tjekke din ressourceprioritering.
• Etablér kausalitet: Tjek Timeline for at sammenholde spiken med et specifikt deployment eller en indholdsopdatering.
• Isolér konteksten: Brug Data Table til at se, om dette mønster gælder for alle sider, eller om det er specifikt for en bestemt skabelon. At finde mønsteret er nøglen til at udrulle en skalérbar løsning.

Optimering af Core Web Vitals

Brug disse breakdowns til at sende sager videre til det rigtige udviklingsteam. Tildel TTFB-problemer til Backend. Tildel Load Delay- og Render Delay-problemer til Frontend. Tildel DNS/forbindelsesforsinkelse til Infrastruktur. Denne strømlinede triage-proces reducerer undersøgelsestiden og fremskynder løsningen.