First Contentful Paint (FCP) optimaliseren voor Google

IN DEZE HANDLEIDING:

1 De First Contentful Paint (FCP) en Google’s Core Web Vitals.
2 Wat is First Contentful Paint (FCP)?
3 Hoe FCP te meten
4 Wat is een goede FCP Score?
5 Real User Monitoring (RUM)
6 Hoe uw FCP Score te optimaliseren

De First Contentful Paint (FCP) en Google’s Core Web Vitals.

De First Contentful Paint (FCP) van uw website is een van de meest betekenisvolle metrieken in Google’s Core Web Vitals. In tegenstelling tot andere paint en loading metrieken, is FCP niet een puur technische metriek met betrekking tot de responstijd. FCP is gericht op de ervaring van de gebruiker en wat hij als eerste waarneemt op de site, niet wat er op de achtergrond wordt geladen. Door de First Contentful Paint van uw site te optimaliseren, versnelt u niet alleen de algemene laadtijden en verhoogt u de snelheid van de pagina’s, u toont uw bezoekers ook letterlijk dat hun verzoeken worden behandeld en dat het laden niet is vastgelopen.

In dit artikel gaan we dieper in op wat First Contentful Paint is, hoe het te meten en te optimaliseren, en enkele veelgestelde vragen over FCP te beantwoorden zodat u er zeker van kunt zijn dat uw site zo efficiënt en bruikbaar is als maar mogelijk is.

Google Core Web Vitals betekenis voor SEO -LCP FID CLS

24 mei 2021 Geen reacties

De nieuwe Google Core Web Vitals is een belangrijke aankondiging van Google hoe ze uw…

Lees meer

Wat is First Contentful Paint (FCP)?

De First Contentful Paint van uw website is het moment waarop de browser het eerste DOM-element op uw pagina rendert. Dit omvat afbeeldingen, canvas elementen (niet-wit), of tekst. In gewoon Nederlands is FCP het moment waarop de gebruiker een deel van je pagina kan zien veranderen. Vaak komt dit als een header bar of achtergrondafbeelding. Dit element is misschien niet het eerste dat wordt gerenderd of geladen vanaf de server, maar het is wel het eerste dat de gebruiker kan zien, waardoor het van het grootste belang is voor de UX van uw site.

Alles wat uw website binnen een iframe bevat, wordt niet in aanmerking genomen met FCP. Evenmin als niet-inhoudelijke schilderingen zoals een verandering in achtergrondkleur. Dat is First Paint, niet First Contentful Paint.

FCP is een interessante metriek. Hoewel je het kwantitatief kunt meten, is het ook relatief subjectief. Het hebben van een snelle First Contentful Paint is belangrijk omdat het ervoor zorgt dat de gebruiker waarneemt dat uw site snel laadt. Of dat nu werkelijk zo is of niet. Uw site kan een veel langere First Interactive Delay (de tijd waarna de gebruiker met de site aan de slag kan) hebben dan die van de concurrentie, maar het kan voor de gebruiker sneller lijken door uw snellere FCP.

FCP gaat niet over het misleiden van uw gebruikers. Een lage FCP-tijd is een goede indicator van de paginasnelheid in het algemeen, en de methoden waarmee u deze optimaliseert kunnen ook van invloed zijn op andere metrieken van paginasnelheid (zoals Grootste Inhoudsopgave).

Hoe FCP te meten

Hoewel FCP belangrijk is vanwege de perceptie van de gebruiker, is het een kwantificeerbare metriek die u kunt meten en beoordelen. Je kunt deze tools wel gebruiken om aan te geven of de impact van FCP in het veld (met echte gebruikers) versus in het lab (gesimuleerde pagina loads voor testdoeleinden).

Wat is een goede FCP Score?

Voor je je verdiept in de verschillende tools om je FCP te controleren, moet je weten wat als een goede FCP score wordt beschouwd. Uit Google’s documentatie over het bepalen van metrische scores, kunnen we zien dat ze FCP tijden beoordelen in drie categorieën-goed, moet worden verbeterd, en slecht-en bespreekt hoe ze tot de percentiel scores komen die worden gebruikt door hun Lighthouse tool.

Goed – tussen 0 seconden en 1,8 seconden
Verbetering nodig – tussen 1,8 seconden en 3 seconden
Slecht – meer dan 3 seconden

Hieronder hebben we verschillende tools opgesomd die je kunt gebruiken om te zien in welke van deze categorieën je site belandt.

Veld hulpmiddelen
Field tools zijn tools die je kunt gebruiken om bij te houden hoe de pagina overkomt bij je gebruikers. Echte gebruikers. Deze tools zijn niet afhankelijk van API’s en veronderstellingen over uw site. Ze werken rechtstreeks tegen uw server in real time, zodat u de meest accurate en actuele informatie krijgt die mogelijk is.

Google’s documentatie voor FCP op https://web.dev toont deze als de beste veldtools voor het bepalen van FCP:

Real User Monitoring (RUM)

Daarnaast is misschien wel het beste hulpmiddel Real User Monitoring (RUM). Dat is waar je echte gebruikers volgt en ziet hoe ze met je site omgaan. U kunt hun laadtijden kwantitatief volgen met behulp van de hierboven genoemde instrumenten, en dan kunt u hun subjectieve perceptie van FCP en uw paginaladsnelheid rechtstreeks van hen krijgen. In termen van het meest complete beeld van FCP en de impact ervan op je bezoekers, staat RUM zeker bovenaan de lijst. Het is echter ook het meest ingewikkeld en moeilijk uit te voeren.

Wanneer u een site ontwikkelt die nog niet in productie is genomen, is het onmogelijk deze onder praktijkomstandigheden te testen. Het gebruik van labtools kan u ook helpen benchmarks en mijlpalen te creëren terwijl uw project zich in de ontwikkelingscyclus bevindt.

Hoe uw FCP Score te optimaliseren

De bovenstaande tools geven u een overzicht en score van waar uw website snelheid en FCP zijn, zeker. Maar ze – net als andere zoals GT Metrix en Pingdom – geven je ook inzicht in wat je kunt doen om je FCP score te optimaliseren en het nog sneller te laten schilderen.

We gaan door een overzicht van wat een aantal van de meest voorkomende stappen voor hoe om te herstellen First Contentful Paint tijden: