Core Web Vitals groen krijgen op een echte applicatie

Elke performance-audit levert hetzelfde document: veertig bevindingen, geen volgorde, en een noot dat een rewrite zou helpen. Dat is niet bruikbaar voor een team met een roadmap. Wat volgt is de volgorde waarin wij werken, grofweg dalende impact per eenheid risico.

Largest Contentful Paint: waar wacht de browser op?

LCP meet wanneer het grootste ding in de viewport klaar is met renderen. Het is bijna nooit traag omdat de server traag is. Het is traag omdat de browser niet vroeg genoeg aan het belangrijke ding kon beginnen.

Eerst render-blocking requests. Elke stylesheet en elk synchroon script in de head moet opgehaald, geparsed en uitgevoerd worden voordat er iets paintt. Tel ze op je traagste pagina. Inline wat de eerste viewport écht nodig heeft, defer de rest, en wees wantrouwig als de volledige build van een CSS-framework naar een pagina gaat die 5% ervan gebruikt.

Fonts, de meest voorkomende enkele schuldige. Een webfont dat in een CSS-bestand ontdekt wordt, zit twee round trips diep voordat de browser weet dat hij bestaat. Host zelf, preload de één of twee gewichten die je écht gebruikt, en zet font-display: swap zodat tekst meteen in een fallback paintt. Alleen dat schuift LCP vaak honderden milliseconden.

Daarna de hero-afbeelding. Juiste afmetingen in plaats van een 3000px-origineel dat kleiner geschaald wordt, een modern format, fetchpriority="high" op de ene afbeelding die het LCP-element is, en lazy loading op alles onder de vouw maar expliciet niet op die ene. De hero lazy-loaden is een zelf toegebrachte wond, en een verrassend frequente.

Interaction to Next Paint: stop de main thread te blokkeren

INP meet de vertraging tussen een gebruikersactie en het bijwerken van het scherm. De oorzaak is bijna altijd JavaScript dat de main thread bezet houdt als de tap binnenkomt.

Begin met te auditen wat je shipty. Third-party tags (analytics, tag managers, chatwidgets, session recording) zijn meestal de grootste bijdragers en het makkelijkst uit te stellen, achter consent te zetten, of gewoon te verwijderen. Elke is een onderhandeling tussen een marketingeis en een meetbare kost, en die kost is nu meetbaar, wat helpt.

Voor je eigen code, zoek lange taken in een profiel en knip ze op. Geef tussen stukken werk toe aan de browser. Verplaats écht zware berekening naar een worker. Vermijd layout thrashing: een geometrie-property lezen na er een te schrijven forceert een synchrone reflow, en dat in een lus doen is hoe een scrollhandler tot stotteren wordt.

Cumulative Layout Shift: reserveer de ruimte

CLS is de meest fixbare van de drie, omdat de oorzaak altijd hetzelfde is: iets kwam na de layout binnen en duwde content opzij.

Zet width en height op elke afbeelding en video, zodat de browser de box reserveert voordat de bytes aankomen. Geef ads, embeds en iframes een vaste container. Voeg nooit een banner boven bestaande content in na het laden. Zet hem vanaf het begin in de markup, of overlay hem. Gebruik font-display: optional of een metrics-gematchte fallback als font swapping je koppen zichtbaar laat verspringen.

Hoe dat er op deze site uitzag

Deze site scoort 100 op de homepage, op een stack die deels gekozen is om dat haalbaar te maken. Concreet: fonts zelf gehost en gepreload; helemaal geen third-party scripts, wat ook betekent geen cookiebanner; de mock-UI-panelen zijn HTML en CSS in plaats van afbeeldingen, dus ze kosten niks om te downloaden en blijven scherp; en de marketingpagina’s shippen ongeveer 19 KB gzipte JavaScript omdat ze alleen Alpine laden, met het componentframework gereserveerd voor de ene pagina met een formulier.

Die laatste beslissing is de generaliseerbare. De meeste pagina’s op de meeste sites hebben de JavaScript die ze laden niet nodig. Per pagina beslissen in plaats van per site is een build-time zorg met een echte payoff.

De volgorde, ingekort

1. Verwijder of defer render-blocking CSS en JavaScript.
2. Host fonts zelf en preload ze; font-display: swap.
3. Maat, format en prioriteer de LCP-afbeelding correct.
4. Defer, gate of verwijder third-party scripts.
5. Zet expliciete afmetingen op alle media en embeds.
6. Profileer op lange taken en knip ze op.
7. Meet field data, niet alleen labscores.

Stappen één tot vijf zijn meestal een paar dagen op een bestaande codebase, en meestal genoeg. Stap zes is waar het resterende werk zit, en stap zeven is wat je vertelt of iets daarvan je echte gebruikers bereikte.