First Contentful Paint verbeteren

Arjen Karel Core Web Vitals Consultant
Arjen Karel
linkedin

First Contentful Paint verbeteren

Arjen Karel Core Web Vitals Consultant
Arjen Karel
linkedin

First Contentful Paint verbeteren - in het kort

De First Contentful Paint is het moment waarop een browser het eerste betekenisvolle element op een pagina tekent; met andere woorden, het moment dat een browser voor het eerst iets op het scherm neerzet. De first contentful paint is daarmee een goede manier om een deel van de snelheid van een pagina te meten. De first contentful paint is het moment dat een browser voor de eerste keer iets op het scherm neerzet.

De first contentful paint kun je verbeteren voor door ervoor te zorgen dat een browser meteen kan gaan beginnen met renderen. Wat dat precies is en hoe je dat doet leg ik je uit.

Fix first contentful paint

Wat is de First Contentful Paint (FCP)?

De First Contentful Paint is een maat voor paginasnelheid. Je kunt paginasnelheid niet in samenvatten als in 1 punt in de tijd. Er zijn verschillende momenten tijdens het laden die er voor zorgen dat een bezoeker een site als snel of langzaam ervaart. De first contentful paint meet eigenlijk wanneer er voor het eerst iets belangrijks op het scherm wordt gezet. De first contentful paint is daarom vooral een 'user centered metric' want het zegt iets over de snelheid de een bezoeker ervaart.

De first contentful paint geeft het tijdsverschil aan tussen het opvragen van de pagina en het tijdstip waarop de eerste betekenisvolle inhoud op de pagina wordt weergegeven. Wat heb je daar nu precies aan? De FCP zegt vooral iets over de gebruikservaring. Op het First Contentful Paint moment weet je zeker dat een bezoeker 'iets' op het scherm ziet.

Laten we de woorden uit elkaar trekken: 'First','Contentful' en 'Paint'.

  1. First: Met First bedoelen we natuurlijk de eerste. De eerste inhoudsvolle paint.
  2. Contentful: Met contentful (inhousdvol) inhoudsvol wordt een html-element met inhoud bedoeld. Dus geen opmaak element zoals een leeg element of achtergrondkleur. Maar een stuk tekst, een afbeelding (inclusief achtergrondafbeelding), SVG of canvas.
  3. Paint: Paint betekent (min of meer) dat de browser klaar is om iets op het scherm te plaatsen. Dat lijkt eenvoudig maar eigenlijk is dit de meest ingewikkelde taak van een browser. Om iets op het schermt te kunnen zetten moet een browser klaar zijn met het berekenen van alle kenmerken van een element. Hieronder zie je een voorbeeld van het rendering proces wat nodig is voordat er iets op het scherm gezet kan worden.

Wat is a goede FCP-score?

Een goede, middelmatige of slechte FCP-score. hangt van het met apparaat dat je gebruikt. Google snapt dat een mobiel apparaat vaak een tragere netwerkverbinding en een trage processor heeft. Het is dus normaal dat de FCP op een mobiel langer duurt dan op bijvoorbeeld een snelle desktop computer.

Apparaat Goed Verbetering nodig Slecht
Mobiel 2.3sec <4sec >4sec
Desktop 0.9sec <1.6sec >1.6sec

Voor de fist contentful paint geld altijd: hoe sneller hoe beter.

Een goede FCP-score. is belangrijk voor zowel Google als jouw bezoeker. Sinds the invoering van de Core Web Vitals is de FCP zelf onderdeel van de, door Google gebruikte, ranking signalen geworden. Google wordt dus blij van een goede FCP-score!

Voor jouw bezoeker is een goede FCP-score. minstens net zo belangrijk. Niemand wil te lang op een pagina blijven wachten. Hoe langer het duurt voordat de pagina op het scherm staat, hoe groter de kans is dat de bezoeker wegklikt!

Hoe meet de je First Contentful Paint (FCP)?

Je kunt de First Contentful Paint op verschillende manieren meten. De 2 gemakkelijkste manieren zijn via jouw eigen lighthouse plugin in Chrome of via een externe tool.

FCP in lighthouse meten

  1. Open de pagina waarvan je de FCP wilt meten in Chrome. Let er op dat je dit incognito doet. Zo heb je geen last van plugins die de FCP van jouw pagina kunnen vertragen.
  2. Klik met jouw rechtermuisknop op de pagina en selecteer 'element inspecteren'. Op deze manier open je de 'dev-console' van Chrome
  3. Bovenaan de console zie je een tabblad lighthouse. Klik hier op en selecteer bij 'Categories' alleen 'performance' en bij device kies je Mobiel.
  4. Klik nu op 'Rapport Genereren'. Lighthouse maakt nu een snelheidsrapportage van jouw pagina. Links bovenaan het rapport zie je wat de First Contentful Paint van jouw pagina is.

Dit is een screenshot van de Lighthouse rapportage voor deze pagina. De First Contentful Paint van deze pagina op een mobiel apparaat is 0.8 seconden! Niet slecht toch?

FCP meten met een online-tool

Je kunt de FCP ook meten met een aantal online tools. De bekendste zijn PageSpeed Insights van Google, GTMetrix pingdom en Web.dev. Deze tools werken erg gemakkelijk en wij gebruiken ze ook af en toe. Helaas zijn deze tools vanwege hun populariteit niet altijd even betrouwbaar. Some geven deze tools te hoge waarden voor de FCP.

First Contentful Paint verbeteren

Nu je weet wat de first contentful paint is kunnen we aan de slag gaan met het verbeteren van de first contentful paint. Het idee achter een snelle first contentful paint is eigenlijk heel eenvoudig. Zorg ervoor dat een browser direct kan beginnen met renderen. Alles wat er voor kan zorgen dat het renderen wordt uitgesteld zorgt voor een slechtere FCP score.

Hieronder vind je 14 oplossingen die ik vaak inzet voor het verbeteren van de First Contentful Paint. Maar pas op, het inzetten van een oplossing op de verkeerde plek kan juist voor vertraging zorgen. Daarom kun je, voordat je zelf aan de slag gaat, dit het beste met een pagespeed expert overleggen.

1. Snelle server reactie (TTFB)

De html die de server verstuurd is altijd de eerste stap in het rendering proces. Vanaf dat punt gaat jouw browser multitasken en neemt de invloed van verdere optimalisaties af. De HTML code is het enige verzoek dat direct invloed heeft op alle snelheidsmetrics.
De snelheid waarmee de HTML code van de server wordt verstuurd wordt vaak gemeten als de time to first byte. Het is belangrijk deze zo kort mogelijk te maken. Vaak doe je dit door server side caching in the stellen.

Een goede Time to First Byte ligt volgens Lighthouse onder de 600 ms. Voor de Time to First byte geld ook, lager is altijd beter. Wij proberen onze time to first byte onder de 50ms te houden over heel de wereld.

Je kunt de time to first byte gemakkelijk zelf meten. Dat doe je als volgt:

  1. Gebruik de shortcut Ctrl-Shift-I op de developers console van Google Chrome te openen.
  2. Bovenaan de console zie je een tabblad Netwerk. Klik hierop.
  3. Herlaad de pagina met Ctrl-R.
  4. Je ziet nu alle netwerkverzoeken die Chrome naar jouw server heeft verstuurd
  5. Klik op het bovenste netwerkverzoek, dat is het verzoek voor jouw pagina zelf.
  6. Je krijg nu meer informatie over dit netwerkverzoek. Klik op het tabblad timing bovenaan deze informatie om te kijken wat de TTFB voor jouw pagina is.

2. HTTP/3

HTTP/3 is alweer de derde versie van het HTTP protocol. HTTP/3 overkomt een flink deel van de problemen die zijn gevonden in de oudere HTTP/1.1 en HTTP/2 protocollen. Zo kun je sinds HTTP/2 meerdere bestanden tegelijkertijd door dezelfde verbinding versturen . HTTP/3 zorgt voor een snellere eerste verbinding en minder last van kleine netwerkonderbreking.

Zonder al te veel in details te treden zorgt HTTP/3 voor een behoorlijke snelheidswinst, vooral op een wat trager netwerk zoals een mobiel netwerk.
Jouw netwerkbeheerder kan jou vertellen of jouw webserver al geschikt is voor het snellere HTTP/3 protocol.

Je kunt zelf nagaan of jouw website al gebruik maakt van het snellere HTTP/3 protocol. Gebruik de shortcut Ctrl-Shift-I op de network inspector van Google Chrome te openen. Klik met jouw rechtermuisknop op de tabel header en selecteer 'Protocol'. Herlaad nu de pagina om te zien welk protocol jouw site gebruikt.


3. Browser Caching

De netwerk verbinding is vaak een zwakke schakel als het gaat om pagespeed. Zou het niet handig zijn om het netwerk helemaal over te slaan?

Wanneer een bezoeker jouw site al een keer eerder heeft bezocht kun je aangeven of, en hoe lang de netwerkbronnen (als een stylseheet) door de browser van de bezoeker opgeslagen kunnen worden. Iedere volgende keer dan de bezoekers 1 van deze bestanden nodig heeft worden ze razendsnel uit de cache van de browser gehaald. Dat zorgt er voor dat de browser veel sneller kan beginnen met renderen en de FCP sneller op het scherm kan zetten.

4. Compressie

In bijna alle gevallen is de netwerksnelheid een zwakke schakel. Voor een goede First Contentful paint is het juist zo belangrijk dat de bestanden zo snel mogelijk door het netwerk worden verzonden. Door compressie wordt het aantal bytes dat vanaf de server verstuurd moet worden verminderd. Minder bytes betekent minder lang wachten op een netwerkbron. Compressie is in mijn mening een techniek waar te weinig aandacht aan besteed wordt. Ik zie helaas te vaak dat een webmaster 'compressie aanzet' om er vervolgens niet meer naar te kijken. En dat is zonde want het is een gemakkelijke manier om net iets sneller te zijn.

Er zijn 2 populaire compressie technieken. Gzip en Brotli. Gzip is de meestgebruikte compressie techniek maar dit wordt snel ingehaald door Brotli. Brotli is gemaakt door Google zelf en geeft 15 tot 20% betere resultaten dan Gzip compressie wanneer het gaat om HTML, JavaScript of CSS bestanden. Brotli is dus uitermate geschikt voor het web.

Daarnaast is er verschil tussen dynamische compressie en statische compressie. Bij dynamische compressie comprimeer je het bestand net voordat je het verzend via jouw webserver. Bij statische compressie wordt het bestand gecomprimeerd op de server opgeslagen. Dat is dus vaak een veel slimmere manier van compressie maar wordt maar zelden toegepast.

5. Gebruik geen scripts voor lay-out

Wanneer JavaScript nodig is om lay-out elementen op de pagina te plaatsen heeft dat altijd een vertragende invloed op de First Contentful Paint. Je kunt JavaScript daardoor namelijk niet meer uitstellen want dan stel je ook de lay-out uit. Bovendien is JavaScript veel trager dan HTML en CSS.

Een pagina die niet goed laadt zonder JavaScript

Pas op met het gebruik van:

  • Slider plugins
  • Advertenties in het zichtbare gedeelte van de pagina
  • Social media widgets
  • Plugins zoals een mega menu

6. Maak gebruik van Resource Hints

Resource hints starten een download of netwerkverbinding voordat de browser dit uit zichzelf zou gaan doen. Sommige netwerk resources zoals webfonts of afbeeldingen worden pas gedownload nadat de browser zeker weet dat ze op het scherm gezet moeten worden.

Wanneer jij zeker weet dat een resource nodig is om het zichtbare gedeelte van de site te 'renderen' is het bijna altijd een goed idee om dit aan te geven via een 'resource hint'. Dit zorgt er voor dat de browser direct aan de slag gaat met het downloaden of verbinden waardoor de bron eerder beschikbaar is en de browser dus eerder kan gaan renderen.

Maar pas op met resource hints, gebruik je ze verkeerd dan kan het jouw pagina juist vertragen.

Vooraf laden met "preload"

<link rel="preload" href="/static/font/opensans600.woff2" as="font" type="font/woff2" crossorigin>

De preload link is 1 van de meest krachtige tools in het pagespeed arsenaal. Via de preload link download je alvast een netwerk bron die je later nodig hebt. Dit is vaak een heel goed idee bij fonts, kritieke scripts en afbeeldingen op het zichtbare gedeelte van de site.

Vooraf verbinden met "preconnect"

De preconnect link maakt alvast een verbinding met een server. Dit is handig wanneer je bestanden host op de server van een derde partij zoals een CDN of Google analytics.

De volgende pagina laden met prefetch

<link rel="prefetch" href="page2">

Met prefetch kun je resources ophalen met lage prioriteit. Dat is een handige manier om bronnen op te halen die je denkt later nodig te hebben. Bijvoorbeeld wanneer je verwacht dat iemand op een 'volgende pagina' link zal klikken.

7. Vermijd redirects

Een veelgemaakte fout is een te lange redirect ketting. Ik zal dat uitleggen. Waarschijnlijk loopt jouw site via een beveiligde verbinding. Wanneer een bezoeker jouw site intypt zonder https ervoor dan gaat deze standaard naar de niet-beveiligde versie van jouw website. Als alles goed staan ingesteld wordt de bezoeker daarna vanzelf direct omgeleid naar de beveiligde website. Dit kun je zien in het groene voorbeeld.

Maar soms gaat het omleiden via een 1 of meerdere tussenstappen zoals in het rode voorbeeld. Juist die tussenstappen zorgen voor een tragere website en een slechtere First Contentful Paint score. Iedere tussenstap kost namelijk wat extra tijd en dat kan al snel oplopen. Zorg daarom altijd dat je binnen 1 redirect op de uiteindelijke pagina kunt uitkomen.

8. Verklein CSS

Een extern CSS bestand is altijd render-blocking. Dat wil zeggen dat een browser normaal gesproken niet kan beginnen met het tonen van inhoud voordat alle stylesheets zijn gedownload en ge-analyseert. Daarom is het handig om Stylesheets zo klein mogelijk te houden. Zo hoef je minder lang te wachten totdat het stylesheet is gedownload.

CSS verkleinen met shortcode

1 van de manieren om CSS te verkleinen is door gebruik te maken van SchortCodes. Dit zijn one-liners waarmee je de belangrijkste eigenschappen van een CSS selector in 1 regel op kunt schrijven

body{
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-size: 0.94rem;
    line-height: 1.6;
    font-family: "Segoe UI", "Segoe UI", system-ui, -apple-system, sans-serif;
}

Kun je ook schrijven als

body{font: 400 .94rem/1.6 Segoe UI,Segoe UI,system-ui,-apple-system, sans-serif;}

CSS verder verkleinen

Je kunt CSS nog kleiner maken door selectors samen te voegen met een komma, enters en spaties te verwijderen en bijvoorbeeld kleurcodes korter op te schijven

h1{
  color : #000000;
}
h2{
  color : #000000;
}
h3{
  color : #000000;
}
h4{
  color : #000000;
}
h5{
  color : #000000;
}

Kun je ook schrijven als

h1,h2,h3,h4,h5{color:#000}

9. Kritieke CSS

We kunnen nog een stapje verder gaan met CSS door gebruik te maken van kritieke CSS. Kritieke CSS is een must have voor een snelle website en een snelle First Contentful Paint.

Kritieke CSS is een verzameling van alle selectors (zoals body,p,h1 etc) die je nodig hebt om het zichtbare gedeelte van de pagina te laten zien. Deze kritieke CSS zet je niet in een apart stylesheet maar direct in de <head> van de pagina. Zo hoef je geen nieuw bestand te downloaden en kan de browser razendsnel beginnen met renderen. Dat zorgt voor een snellere first contentful paint. De CSS die je niet direct nodig hebt voor het zichtbare gedeelte van de pagina laad je nadat de eerste render cyclus is voltooid. Voor jouw bezoeker is de pagina al lang af, dat er op de achtergrond nog nieuwe styles worden toegevoegd dat merkt eigenlijk niemand.

Kritieke CSS kun je gemakkelijk genereren met onze eigen kritieke CSS tool. Plak simpelweg de URL van jouw webpagina in de tool en wij doen de rest voor je!

10. Stel het laden van JavaScript uit

1 van de meest voorkomende redenen voor een trage FCP is JavaScript. Afhankelijk van hoe je JavaScript gebruik kan het het 'renderen' van de pagina blokkeren.

Normaal JavaScript word gedownload en uitgevoerd voordat de 'render tree' wordt opgebouwd. Zonder de render tree kan een browser niets op het scherm zetten. Dus ook niet de First Contentful Paint. JavaScript blokkeert dan het opbouwen van de pagina tijdens het downloaden en het uitvoeren van het script

We kunnen hier omheen werken door JavaScript uit te stellen. Dat kun je op 3 manieren doen:

Async JavaScript

<script async src="async.js"></script>

Door het async attribuut aan een script tag wordt mee te geven wordt het opbouwen van de pagina niet meer geblokkeerd tijdens het downloaden van het JavaScript. Het async attribuut geeft aan dat het downloaden en het opbouwen ben van de render tree tegelijkertijd mag gebeuren.
Zodra het script wordt uitgevoerd wordt de pagina wel geblokkeerd. In de meeste gevallen heeft de browser door het async attribuut voldoende tijd gehad om een belangrijk deel van de pagina op te bouwen en staat de First Contentful Paint al op de pagina.

Defer JavaScript

<script defer src="async.js"></script>

Het defer attribuut werk min of meer hetzelfde als he async attribuut met enkele kleine verschillen. Door het defer attribuut aan een script tag wordt mee te geven mag ook dit script parallel aan het opbouwen van de pagina worden gedownload. Nadat alle scripts zijn gedownload worden ze uitgevoerd in de volgorde uitgevoerd waarop ze gevonden zijn in de HTML code. Dit kan het tonen van de pagina ook blokkeren maar in veel gevallen staat de First Contentful Paint ook al op het scherm.

JavaScript verder uitstellen

window.addEventListener('load',
function() {
            var _scripts = ['lazy.js','lazy2.js']
            for (var i in _scripts) {
                var node = document.createElement('script');
                node.src = _scripts[i];
                document.getElementsByTagName('head')[0].appendChild(node);
            }
});

Het is ook mogelijk om JavaScript pas te download en uit te voeren op een later moment. Dit doe je door scripts te injecteren in de pagina. Maar pas op, scripts zullen nu later worden ge-download en uitgevoerd. Dus wees er zeker van dat je de scripts niet eerder nodig hebt (bijvoorbeeld wanneer je JavaScript gebruikt om jouw menu open en dicht te klappen).

11. Gebruik geen externe bronnen

Externe bronnen zoals externe fonts, externe afbeeldingen, externe stylesheets of externe scripts zijn een mogelijke bottleneck wanneer het gaat over de First Contentful Paint.

Omdat je geen controle hebt over de server waar de bestanden op zijn gehost weet je ook niet hoe snel ze verzonden zullen worden.

Daarnaast kun je geen gebruik maken van de bestaande verbinding naar de webserver. Er moet een nieuwe verbinding naar een nieuwe server worden opgezet en dat kost tijd.

Blokkerende externe bronnen

Geen externe bronnen

12. Gebruik het snelste font formaat

Fonts verdienen extra aandacht wanneer het gaat om de First Contentful Paint. Op 9 van de 10 pagina's die we bekijken is het First Contentful Paint element een tekstregel. Wanneer je externe webfonts gebruikt dan moeten deze fonts eerst worden ge-download van een server. En dat downloaden kost tijd.

De afgelopen jaren is er veel aandacht geweest voor webfonts en er zijn nieuwe, snellere font formaten gemaakt. Het snelste font formaat is op dit moment woff2, gevolgd door woff. Woff2 word door iedere moderne browser ondersteund.

Je kunt de voorkeurs-volgorde voor jouw webfont opgeven in de CSS fontface declaratie. Dat doe je als volgt:

 @font-face {  
   font-family: 'myFont';  
   font-weight: 400;  
   font-style: normal;  
   font-display: swap;
   unicode-range: U+000-5FF 
   src: local('myFont'),
        url('/fonts/myFont.woff2') format('woff2'),
        url('/fonts/myFont.woff') format('woff');
}

13. Font display:swap

Wanneer je gebruik maakt van webfonts is het standaard gedrag van deze fonts om de tekst op de pagina niet te lazen zien totdat het font is geladen. Dat gaat meestal direct ten koste van de First Contenful Paint.

Je kunt dit oplossen door gebruik te maken van de font-display:swap. Hiermee kun je er voor kiezen om de tekst op de pagina toch te laten zien, in een lettertype dat de browser wel kent, terwijl het webfont op de achtergrond wordt geladen.

Zonder font-display:swapFOIT met een webfont

Met display:swapGeen FOIT met een webfont

Je kunt hier meer over lezen op ons artikel "Ensure text remains visible during webfont load" In Lighthouse oplossen

14. Minimaliseer de DOM grootte

Een webpagina bestaat uit HTML. Het eerste wat een browser doet is de HTML omzetten naar DOM-nodes. Dat is een boomstructuur van html elementen die later wordt gebruikt om de render tree mee te bouwen. Vanuit de render tree begint een browser met 'renderen' en komt uiteindelijk de webpagina op het beeld te staan.

Hoe veel DOM nodes (HTML elementen) je hebt en hoe diep deze DOM-nodes in de boomstructuur liggen bepaalt hoe ingewikkeld het is voor een browser om jouw pagina op te bouwen. Ook CSS en JavaScript kost meer tijd om te analyseren bij een te groot aantal DOM nodes. Dit gaat allemaal direct ten koste van de First Contentful Paint.

Los dit op door:

  • Lazy-load delen van jouw webpagina.
    Om de eerste weergave te versnellen, kun je overwegen om delen van uw website op een later moment via AJAX te laden. Bijvoorbeeld de footer.
  • Maak gebruik van content-visibility.
    De CSS-eigenschap content-visibility vertelt een browser om stijl, lay-out en paint over te slaan tijdens het renderen. Dat gebeurt pas op net voordat het element zichtbaar wordt.
  • Splits grote pagina's in meerdere pagina's.
    Door grote pagina's op te splitsen in meerdere pagina's, kan het aantal DOM-nodes worden verminderd .
  • Implementeer oneindige scroll.
    Oneindig scrollen is in feite lazy-loading, bij het scrollen door herhaalde elementen zoals afbeeldingen (pinterest) of grote tabellen met gegevens kan infinite-scroll jouw pagina aanzienlijk versnellen.
  • Vermijd JavaScript DOM interactie.
    Wees extra voorzichtig met JavaScript wanneer je een groot aantal DOM nodes op jouw pagina hebt staan Een opdracht document.getElementsByTagName('div'); kan dan een groot aantal DOMnodes laden, waardoor het geheugengebruik toeneemt.
  • Vermijd ingewikkelde CSS declaraties.
    Wees extra voorzichtig met ingewikkelde CSS opdrachten bij een groot aantal DOM Nodes. Bijvoorbeeld. div:last-child;moet de last-child-status voor elk div-element op jouw pagina controleren.
  • Gebruik web-workers om de main-thread van jouw browser te ontzien.
    Web workers zijn JavaScript die parallel aan jouw webpagina kunnen draaien. Je kunt deze web-workers in de opdrachten geven die op de achtergrond worden uitgevoerd. Wanneer de webworker de opdracht heeft uitgevoerd geeft deze het door aan de oorspronkelijke pagina. Het voordeel hiervan is dat dat je toch ingewikkelde JavaScripts uit kunt voeren zonder dat de pagina 'bevriest'.

I help teams pass the Core Web Vitals:

lighthouse 100 score

A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?"

First Contentful Paint verbeterenCore Web Vitals First Contentful Paint verbeteren