Core/Dash Diagnosis

CoreDash Diagnosis: de root cause-engine

Real User Monitoring geeft je de vitale functies. Je LCP is 3,2 seconden. Je CLS is 0,25. Je INP faalt. Dit is precies waarvoor RUM is ontworpen. Het toont de metrics die ertoe doen. Het vertelt je dat de prestaties zijn verslechterd en waar je op moet focussen. Het is de eerste en essentiële stap bij het oplossen van de Core Web Vitals.

Maar zodra je de data hebt, begint het echte werk pas. Een falende LCP kan liggen aan een trage server, een te grote afbeelding, een render-blocking script of alle drie. RUM toont het symptoom. De volgende logische stap is de diagnose.

CoreDash Diagnosis is de intelligentielaag die metrics omzet in fixes. Het breidt je RUM-data uit met geautomatiseerd performance-forensisch onderzoek, waarbij gedetailleerde uitvoeringsprofielen uit de browser worden vastgelegd om de exacte bottleneck te identificeren en de exacte oplossing te genereren die is afgestemd op je CMS!.

Van meting naar root cause

Je hebt het dashboard. LCP: 3,2s. Je weet waar het probleem zit. Nu moet je weten waarom. Is het de hero-afbeelding? De scripts van derden? De responstijd van de server? Je kunt uren besteden aan het auditen van de waterfall, het profileren van de main thread en het testen van theorieën. Of je laat de diagnostic engine het voor je doen.

CoreDash Diagnosis neemt de volgende logische stap. Het meet niet alleen prestaties. Het reverse-engineert het falen.

LCP Diagnosis: vier fasen, één antwoord

We ontleden Largest Contentful Paint in de vier afzonderlijke fasen: TTFB, Load Delay, Load Duration en Render Delay. Als een fase faalt, markeren we die niet alleen. We leggen hem uit.

• Vendor-attributie: We rapporteren geen "hoge scripting-tijd". We rapporteren dat het tracking-script van HubSpot de paint 150ms blokkeerde of dat Google Tag Manager de render met 300ms vertraagde. Je ziet de vendor, de kosten en de impact.
• Anti-pattern-detectie: We scannen op 14 specifieke architecturale fouten: lazy loading van de LCP-afbeelding, deze verbergen in een CSS-achtergrond, of deze laden vanaf een niet-geoptimaliseerd CDN. We vangen de fouten die audits missen.
• Herstel op codeniveau: We genereren de fix. Als je LCP-afbeelding geen priority hint heeft, schrijven we de <link rel="preload">-tag voor je. Als een script de render blokkeert, laten we je zien waar je defer moet toevoegen. De fix is copy-paste-ready.

CLS Diagnosis: vang de ghost-bug

Layout shifts zijn de moeilijkst te reproduceren bugs. Een lettertype laadt te laat op een bepaalde verbinding. Een advertentie rendert trager op mobiel. De shift gebeurt één keer en je ziet hem nooit meer.

CoreDash Diagnosis legt elk frame vast. We registreren de shift, identificeren het element en achterhalen de root cause.

• Het element: We vertellen je exact welke DOM-node is verschoven. Niet "ergens in de header". De specifieke <div> met de specifieke class.
• De trigger: We vertellen je waarom het element is verschoven. Een webfont is gewisseld zonder fallback-declaratie. Een banner-advertentie heeft zichzelf ingevoegd zonder gereserveerde ruimte. Een afbeelding is geladen zonder afmetingen.
• De fix: We schrijven de CSS. Voeg aspect-ratio: 16/9 toe aan de afbeelding. Stel font-display: swap in op de font face. Reserveer min-height: 250px voor de advertentie-container. De shift vindt nooit meer plaats.

INP Diagnosis: vind de freeze

Interaction to Next Paint meet de reactiesnelheid. Wanneer deze faalt, bevriest de interface. De gebruiker klikt op een knop en er gebeurt niets.

RUM-data vertelt je "INP is slecht" en waar bezoekers interactie met je pagina hebben gehad.  Wij vertellen je welke functie de main thread blokkeert en hoe je dit fixt!

• Isoleer de interactie: We identificeren het exacte input-event: een klik op een knop, een formulierverzending, een toetsaanslag. We weten welke interactie is mislukt.
• Profileer de handler: We meten je event listener. We tonen je de uitvoeringstijd van je eigen code, tot op de individuele functie nauwkeurig. Als je click handler een synchrone bewerking van 200ms uitvoert, laten we je die 200ms zien.
• Detecteer interferentie: Soms is je code snel. De browser is alleen druk. Een analytics-bibliotheek van derden verwerkt data. Een trackingpixel vuurt een netwerkverzoek af. We markeren de achtergrondtaak die CPU-cycli steelt van de interactie van de gebruiker.

Je stopt met blind optimaliseren. Je optimaliseert de functie die daadwerkelijk de freeze veroorzaakt.

Platformspecifieke oplossingen

Generieke aanbevelingen zijn nutteloos.

"Serve images in next-gen formats" helpt een Shopify-merchant niet die geen controle heeft over het CDN. "Reduce JavaScript execution time" helpt een WordPress site-owner niet die niet weet welke plugin het probleem is.

CoreDash Diagnosis detecteert je stack en genereert native code.

WordPress? We geven je de PHP-snippet of de specifieke plugin-instelling om te wijzigen.
Next.js? We geven je de next.config.js-aanpassing.
Shopify? We vertellen je welk Liquid-template je moet bewerken en tonen je de exacte regel die je moet toevoegen.

We ondersteunen Shopify, WordPress, WooCommerce, Magento, Drupal, Squarespace, Wix, Next.js, React, Vue.js en Nuxt.js.

De aanbeveling is niet theoretisch. Deze is uitvoerbaar.

Het verschil tussen zien en oplossen

RUM vertelt je dat je site traag is.

CoreDash Diagnosis vertelt je dat de Intercom-chatwidget de main thread 200ms blokkeert tijdens de initial paint, en hier is de script-tag die je moet aanpassen om het laden uit te stellen.

Dat is het verschil tussen een metric en een oplossing.