Core/Dash De Metric Breakdown Dashboards Begrijpen

Het Metric Breakdown Dashboard Begrijpen

Samengestelde metrieken zoals LCP en INP aggregeren meerdere afzonderlijke timing events. Het optimaliseren van de totale score vereist het isoleren van deze onderliggende componenten. Het Metric Breakdown dashboard ontleedt prestaties in granulaire fasen om de specifieke bottleneck te identificeren.

Deze tool vervangt brede optimalisatie door nauwkeurige engineering doelen. Het wijst latency toe aan de server, het netwerk of de client-uitvoering.

Anatomie van het Breakdown Dashboard

Het dashboard biedt drie gesynchroniseerde weergaven om de oorzaak van latency te isoleren:

• Contribution Donut: Visualiseert het relatieve gewicht van elk sub-onderdeel. Het beantwoordt de vraag "Wat is de grootste factor?" Als `Time to First Byte` 70% van de grafiek in beslag neemt, weet je dat het probleem backend-gerelateerd is.
• Historical Timeline: Toont de trends van de absolute waarden van elke component in de loop van de tijd. Gebruik dit om prestatieverschuivingen te correleren met specifieke gebeurtenissen zoals deployments.
• Segmented Data Table: Breek de metriek af per dimensie (URL, Apparaat, enz.). Elke rij bevat een distributiebalk die het unieke profiel van dat segment onthult, wat helpt om uitschieters te spotten.

LCP Componenten (Largest Contentful Paint)

LCP meet de laadprestaties. We splitsen deze metriek op in vier fasen:

• TTFB (Time to First Byte): De reactietijd van de server. Een hoge TTFB duidt op trage database query's of een gebrek aan edge caching.
• Load Delay: De kloof tussen de initiële HTML-respons en de start van de LCP resource download. Dit meet de latentie van resource-ontdekking.
• Load Time: De duur die nodig is om de LCP asset (afbeelding of lettertype) over het netwerk te downloaden. Dit correleert met bestandsgrootte en bandbreedte.
• Render Delay: De tijd tussen het voltooien van de resource download en het renderen op het scherm. Een hoge Render Delay duidt vaak op main thread blocking door JavaScript.

TTFB Componenten (Time to First Byte)

TTFB dient als een proxy voor de reactiesnelheid van de server. Deze breakdown isoleert netwerkverbinding fasen:

• Waiting: De tijd die de browser doorbrengt met wachten tot de server een antwoord genereert (Backend verwerking).
• Cache: Tijd besteed aan het controleren van lokale of tussenliggende caches.
• DNS: De duur van de Domain Name System lookup.
• Connection: Tijd genomen om de TCP-verbinding tot stand te brengen.
• Request: Tijd genomen om de HTTP request headers te verzenden.

INP Componenten (Interaction to Next Paint)

INP meet interactiviteit. We segmenteren de interactie-levenscyclus om main thread blocking te pinpointen:

• Input Delay: De tijd tussen gebruikersinteractie en de uitvoering van de event handler. Een hoge Input Delay betekent dat de main thread bezig was.
• Processing: De tijd die nodig is om de event callbacks uit te voeren. Dit vertegenwoordigt de efficiëntie van je JavaScript logica.
• Presentation: De tijd die de browser nodig heeft om de lay-out te berekenen en het volgende frame te renderen.

Diagnostische Workflow

Volg deze reeks om een regressie te diagnosticeren:

• Kwantificeer de Bottleneck: Kijk naar de Donut chart om het dominante sub-onderdeel te vinden. Als `TTFB` hoog is, controleer je server. Als `Resource Load Delay` hoog is, controleer je asset prioriteit.
• Stel Causaliteit Vast: Controleer de Timeline om de piek te correleren met een specifieke deployment of content update.
• Isoleer de Context: Gebruik de Data Table om te zien of dit patroon geldt voor alle pagina's of als het specifiek is voor een bepaalde template. Het vinden van het patroon is de sleutel tot het implementeren van een schaalbare fix.

Core Web Vitals Optimaliseren

Gebruik deze breakdowns om tickets naar het juiste engineering team te routeren. Wijs TTFB problemen toe aan Backend. Wijs Load Delay en Render Delay toe aan Frontend. Wijs DNS/Connection latency toe aan Infrastructuur. Dit gestroomlijnde triage proces vermindert de onderzoekstijd en versnelt de resolutie.