Core/Dash Begrijp de Metric Breakdown Dashboards

Begrijp het Metric Breakdown Dashboard

Samengestelde metrics 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 performance in granulaire fasen om de specifieke bottleneck te identificeren.

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

Anatomie van het Breakdown Dashboard

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

• Contribution Donut: Visualiseert het relatieve gewicht van elk subonderdeel. Het beantwoordt de vraag: "Wat is de grootste factor?" Als `Time to First Byte` 70% van de grafiek beslaat, weet je dat het probleem backend-gerelateerd is.
• Historische Tijdlijn: Toont de trends van de absolute waarden van elke component in de loop van de tijd. Gebruik dit om verschuivingen in performance te correleren met specifieke events zoals deployments.
• Gesegmenteerde Datatabel: Sleutelt de metric uit per dimensie (URL, Device, etc.). Elke rij bevat een distributiebalk die het unieke profiel van dat segment onthult, wat helpt bij het opsporen van uitschieters.

LCP-componenten (Largest Contentful Paint)

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

• TTFB (Time to First Byte): De responstijd van de server. Een hoge TTFB duidt op trage database-queries of een gebrek aan edge caching.
• Load Delay: Het gat tussen de initiële HTML-respons en de start van de download van de LCP-resource. Dit meet de latency van resource discovery.
• Load Time: De tijd die nodig is om de LCP-asset (afbeelding of font) over het netwerk te downloaden. Dit correleert met bestandsgrootte en bandbreedte.
• Render Delay: De tijd tussen het voltooien van de download van de resource 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 proxy voor de reactiesnelheid van de server. Deze breakdown isoleert de fasen van de netwerkverbinding:

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

INP-componenten (Interaction to Next Paint)

INP meet interactiviteit. We segmenteren de levenscyclus van de interactie om main thread blocking nauwkeurig aan te wijzen:

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

Diagnostische Workflow

Volg deze volgorde om een regressie te diagnosticeren:

• Kwantificeer de Bottleneck: Bekijk de Donut-grafiek om het dominante subonderdeel te vinden. Als `TTFB` hoog is, controleer dan de server. Als `Resource Load Delay` hoog is, controleer dan de prioriteit van je assets.
• Stel Causaliteit Vast: Controleer de Tijdlijn om de piek te correleren met een specifieke deployment of content-update.
• Isoleer de Context: Gebruik de Datatabel om te zien of dit patroon geldt voor alle pagina's of specifiek is voor een bepaald template. Het vinden van het patroon is essentieel voor het uitrollen van een schaalbare oplossing.

Optimaliseren van Core Web Vitals

Gebruik deze breakdowns om tickets naar het juiste engineering-team te sturen. Wijs TTFB-problemen toe aan Backend. Wijs Load Delay en Render Delay toe aan Frontend. Wijs DNS/Connection-latency toe aan Infrastructure. Dit gestroomlijnde triageproces verkort de onderzoekstijd en versnelt de oplossing.