Heb je problemen met de tijden van First Contentful Paint (FCP) op je site?
Of je überhaupt weet wat First Contentful Paint is of op zoek bent naar specifieke tips om de First Contentful Paint tijden op je site te versnellen, dit artikel is voor jou!
We beginnen met uit te leggen wat First Contentful Paint is en hoe je het kunt meten op je site.
Daarna delen we een aantal tactieken die je kunt gebruiken om de FCP tijden op je site te versnellen. En om dit artikel zo toegankelijk mogelijk te maken, proberen we niet-technische tools en WordPress plugins te gebruiken om je te helpen alles te implementeren.
Laten we beginnen!
Wat is First Contentful Paint (FCP)?
First Contentful Paint, vaak afgekort tot FCP, is een prestatiemeting gericht op gebruikerservaring die meet hoe lang het duurt voordat het eerste deel van de pagina zichtbaar is op het scherm van de gebruiker.
FCP is een belangrijke meetwaarde omdat het de waargenomen prestaties beïnvloedt. Wanneer een bezoeker je site voor het eerst bezoekt, zal zijn browser een leeg scherm tonen, wat geen goede ervaring is voor bezoekers.
Zodra de content begint te laden, heeft de bezoeker tenminste het gevoel dat er “iets” gebeurt en zal de volledige content van de pagina snel laden. Een snelle FCP tijd kan de gebruiker dus het gevoel geven dat je website snel is, zelfs als het nog steeds iets langer duurt voordat de rest van de inhoud geladen is.
Een langzame FCP tijd daarentegen is frustrerend voor gebruikers, omdat het echt duidelijk maakt dat het laden van de pagina lang duurt. Er is niets erger dan bezoekers die naar hun lege scherm zitten te staren en zich afvragen of je website wel werkt.
First Contentful Paint vs Largest Contentful Paint
Largest Contentful Paint (LCP) is een andere populaire op de user experience gerichte statistiek die vergelijkbaar werkt met First Contentful Paint.
Omdat de metingen zo op elkaar lijken, kan het moeilijk zijn om de verschillen tussen First Contentful Paint en Largest Contentful Paint te begrijpen.
Hier is het basisverschil tussen beide:
- FCP – meet hoe lang het duurt voordat het eerste object verschijnt. Dat kan van alles zijn – zolang er maar iets van inhoud op de pagina verschijnt.
- LCP – meet hoe lang het duurt voordat de hoofdinhoud van de pagina verschijnt.
Vanwege dit verschil moet de FCP tijd van je pagina altijd ten minste iets sneller zijn dan de LCP tijd van je pagina. Volgens de definitie van de deze statistieken is het onmogelijk dat je LCP tijd sneller is dan je FCP-tijd. Hoewel ze technisch gezien gelijk zouden kunnen zijn als het “eerste” element dat wordt geladen hetzelfde is als het “belangrijkste” element, zal dit op de meeste pagina’s niet gebeuren.
Om dit te illustreren zie je hier een visuele filmstrip tijdlijn van een WebPageTest analyse die we hebben uitgevoerd op de homepage van Kinsta.
- FCP komt voor in de filmstrip van 1,0 seconde (0,924 seconden om precies te zijn). Dit is de eerste keer dat de pagina van een lege witte pagina overgaat in visuele inhoud.
- LCP treedt op in de filmstrip van 1,3 seconden (1,217 seconden om precies te zijn). Dit is het moment waarop de “belangrijkste” inhoud van de pagina zichtbaar wordt.
Wat is een goede First Contentful Paint tijd?
Google raadt aan om te streven naar een First Contentful Paint tijd van 1,8 seconden of minder op de pagina’s van je site.
Google beschouwt FCP tijden tussen 1,8 en 3,0 seconden als “Needs improvement”, terwijl FCP tijden boven 3,0 seconden “Poor” zijn
Hoe meet je de First Contentful Paint tijd van een pagina?
De eenvoudigste manier om de First Contentful Paint tijd van een pagina op je site te meten is met de PageSpeed Insights tool van Google, hoewel er ook andere tools zijn die je kunt gebruiken.
Het mooie van PageSpeed Insights is dat het je zowel gesimuleerde testresultaten geeft als FCP gegevens van echte gebruikers (als je site genoeg verkeer heeft om opgenomen te worden in het Chrome User Experience rapport).
Het heeft ook betrekking op zowel desktop- als mobiele prestaties, omdat de FCP tijd van je pagina varieert afhankelijk van het apparaat en de verbindingssnelheid van de gebruiker.
Zo test je een pagina:
- Open de PageSpeed Insights pagina.
- Voer de URL in van de pagina op je site die je wilt testen.
- Klik op de knop Analyse.
Na even wachten zou je je resultaten moeten zien.
Als je site genoeg verkeer heeft om te worden opgenomen in het Chrome User Experience rapport, zie je 2 verschillende FCP tijden:
- De tijd in het gedeelte “Discover what your real users are experiencing” is de gemiddelde FCP tijd voor echte menselijke bezoekers van je site.
- De tijd in het gedeelte “Diagnose performance issues” is gebaseerd op een gesimuleerde test. Je kunt de voorwaarden voor de simulatie zien in het grijze vak onder de getallen.
Je kunt ook schakelen tussen mobiele en desktopresultaten met de tabbladen bovenaan.
Om andere pagina’s op je site te testen, kun je hetzelfde proces herhalen.
Je FCP tijden variëren per pagina, dus we raden aan om meerdere pagina’s te testen om een goed gevoel te krijgen van de prestaties van je site.
Je kunt bijvoorbeeld de homepage, de blogpagina, een enkele blogpost enzovoort testen. En nogmaals, zorg ervoor dat je zowel mobiele als desktopgegevens bekijkt.
Andere manieren om de First Contentful Paint tijden te meten
Hoewel PageSpeed Insights een van de eenvoudigste manieren biedt om zowel echte als gesimuleerde FCP-tijden voor je site te bekijken, zijn er ook andere tools voor het testen van de prestaties die je kunt gebruiken als aanvulling of vervanging voor PageSpeed Insights.
Hier zijn enkele goede plaatsen om te beginnen:
- WebPageTest – Hiermee kun je gesimuleerde tests uitvoeren met verschillende verbindingssnelheden, apparaten en locaties.
- Chrome Developer Tools – hiermee kun je direct vanuit je browser prestatietests uitvoeren.
- DebugBear – Hiermee kun je gesimuleerde tests uitvoeren vanaf zowel desktop- als mobiele apparaten en het bevat een heleboel gegevens naast FCP.
- GTmetrix – Hiermee kun je gesimuleerde tests uitvoeren vanaf verschillende locaties. Je kunt de FCP tijd zien op het tabblad Performance – onze volledige gids voor GTmetrix testen gaat hier dieper op in.
Wat kan de FCP tijden van je site beïnvloeden?
Op een hoog niveau zijn er 2 “emmers” met problemen die FCP kunnen vertragen:
- Trage responstijd van de server – als je server er te lang over doet om de gegevens van je site aan de browsers van gebruikers te leveren, zal je pagina een trage FCP tijd hebben. Hierbij kun je denken aan zaken als trage hosting of DNS, het niet gebruiken van caching (waardoor de server meer werk moet doen voordat hij een pagina kan serveren), het niet gebruiken van een content delivery network (CDN), enzovoort.
- Slecht geoptimaliseerde websitecode – zelfs als je server snel reageert, kun je nog steeds een trage FCP hebben als de code van je site slecht is geoptimaliseerd. Je pagina kan bijvoorbeeld veel JavaScript bevatten die het laden van zichtbare inhoud blokkeert. Er kunnen ook problemen zijn met CSS, afbeeldingen of andere delen van de code van je site.
Afhankelijk van je site kun je problemen hebben op slechts één gebied of op beide gebieden.
Hoe je First Contentful Paint kunt versnellen: 10 tips die werken
Nu je meer weet over wat First Contentful Paint is en waarom het belangrijk is, gaan we verder met een aantal bruikbare tips die je kunt implementeren om de tijden van je site te verbeteren.
Het leuke van het implementeren van deze tips is dat ze alle prestatiecijfers van je site verbeteren, niet alleen FCP.
Hier is een korte samenvatting van de lijst – we zullen ze hieronder in detail bespreken:
1. Stap over naar snellere hosting
Er is één onontkoombaar feit als het gaat om FCP:
Als de onderliggende hosting van je site traag is, zal je FCP nog steeds traag zijn, zelfs als je een perfect geoptimaliseerde site hebt.
Als je de andere tips op deze lijst toepast, zullen de FCP tijden van je site beter worden, maar de prestaties van je site zullen altijd geblokkeerd worden door de kwaliteit van je hosting.
Dus – je kunt doorgaan en eerst de andere tips op deze lijst implementeren. Maar als je na alles gedaan te hebben nog steeds worstelt met trage FCP tijden, moet je misschien gewoon overstappen op snellere hosting.
Als je niet zeker weet waar je moet beginnen, dan is Kinsta’s managed WordPress hosting een uitstekende keuze.
Niet alleen is de onderliggende infrastructuur geoptimaliseerd voor maximale prestaties, maar Kinsta kan je ook helpen bij het automatisch implementeren van veel van de andere strategieën op deze lijst, waaronder caching, content delivery network (CDN), geoptimaliseerde DNS, geoptimaliseerde afbeeldingen en meer.
2. Gebruik pagina caching (idealiter op serverniveau)
Als je je website met WordPress hebt gebouwd, moet deze (standaard) voor elke bezoeker dynamisch server-side code verwerken.
Wanneer iemand je pagina bezoekt, moet je hostingserver het PHP van WordPress uitvoeren en de database van je site bevragen om het voltooide HTML document te genereren dat aan de browser van de gebruiker wordt geleverd.
Dit kost tijd, vooral op hosting met weinig vermogen, wat een groot effect kan hebben op de FCP tijden van je site.
Met pagina caching kun je de voltooide HTML versie van elke pagina “cachen”. In plaats van bij elk bezoek server-side code te moeten verwerken, zal je server onmiddellijk reageren met de voltooide HTML vanuit de cache.
Als je Kinsta hosting gebruikt, zal Kinsta automatisch pagina caching voor je implementeren via de Edge Caching functionaliteit.
Het unieke aan Kinsta’s Edge Caching aanpak is dat het de pagina’s uit de cache kan leveren vanuit het wereldwijde netwerk van Cloudflare. We zullen in de volgende paragraaf bespreken wat een content delivery network is, maar het grote voordeel is dat je hiermee zeer snelle globale laadtijden kunt bereiken.
Als je elders host, kun je kijken of je host een cachingfunctie op serverniveau heeft of een van de vele WordPress cachingplugins gebruiken, zoals WP Rocket en FlyingPress.
3. Gebruik een content delivery network (CDN)
Een content delivery network (CDN) is een wereldwijd netwerk van servers die een kopie van sommige of alle content/bestanden van je site opslaan.
Wanneer iemand je site bezoekt, levert het CDN automatisch de bestanden van je site vanaf de locatie die fysiek het dichtst bij de bezoeker is.
Omdat fysieke afstand nog steeds een rol speelt bij laadtijden (we hebben de lichtsnelheid nog niet bereikt!), zal de browser van de bezoeker de bestanden van je site sneller ontvangen, waardoor je FCP tijd verbetert.
Als je Kinsta hosting afneemt: Kinsta implementeert automatisch een gratis door Cloudflare aangedreven CDN voor alle pagina’s van je site, wat de snelste wereldwijde prestaties biedt.
Als je ergens anders host, kun je zelf een CDN implementeren door providers als Cloudflare, Amazon CloudFront, Fastly en anderen te gebruiken.
4. Gebruik een snellere DNS provider
Voordat de browser van een gebruiker verbinding kan maken met de server van je website, moet deze eerst het DNS (Domain Name System) gebruiken om de eigenlijke webserver te vinden die is gekoppeld aan de domeinnaam van je site.
De DNS provider waarvoor je je domeinnaam hebt ingesteld, heeft invloed op hoe lang dit proces duurt en dus op de FCP van je site.
Volgens DNSPerf is het verschil tussen de snelste en de langzaamste provider bijvoorbeeld meer dan 130 ms, wat behoorlijk significant is.
Als je host bij Kinsta, krijg je al toegang tot premium DNS van Amazon Route53 als je de nameservers van Kinsta gebruikt.
Als je elders host, biedt Cloudflare een van de beste gratis DNS diensten.
5. Optimaliseer de CSS van je site
Nu je de problemen met de reactietijden van de server hebt opgelost, is het tijd om de code van je site te optimaliseren, te beginnen met de CSS.
CSS bepaalt het ontwerp en de stijl van de elementen op je pagina. Hoewel het een essentieel onderdeel is van elke website, kan je CSS je FCP vertragen als het op een niet-geoptimaliseerde manier wordt geladen en/of je onnodig CSS laadt op pagina’s waar het niet nodig is.
We hebben een heel artikel gewijd aan het optimaliseren van CSS, maar laten we de belangrijkste tactieken voor het versnellen van FCP doornemen.
Verwijder ongebruikte CSS
Allereerst wil je alle ongebruikte CSS verwijderen van pagina’s waar het niet nodig is.
Een manier om dit te doen is de handmatige methode. Een tool als PurifyCSS kan je pagina’s scannen op ongebruikte CSS en dan kun je die code handmatig verwijderen. PageSpeed Insights zal ongebruikte CSS ook markeren in het gedeelte “Reduce unused CSS” van zijn diagnostiek.
Als je WordPress gebruikt, zijn er echter een aantal handige plugins die het hele proces voor je kunnen automatiseren, wat een stuk eenvoudiger is (vooral voor niet-ontwikkelaars). Enkele goede opties om te overwegen zijn WP Rocket, FlyingPress en Perfmatters.
Al deze plugins zijn premium tools. We denken echter dat ze de investering waard kunnen zijn, omdat ze je ook kunnen helpen bij het implementeren van veel van de andere tips op deze lijst.
Plaats kritieke CSS inline en stel niet-kritieke CSS uit
Standaard zal je site waarschijnlijk wachten tot alle CSS code is geladen voordat het begint met het renderen van de boven de “fold” geplaatste content. Dit is echter niet helemaal optimaal vanuit het oogpunt van gebruikerservaring, omdat je eigenlijk alleen de CSS nodig hebt die nodig is voor de boven de fold geplaatste content – al het andere kan wachten tot later.
De CSS voor de boven de fold geplaatste inhoud van een pagina wordt de kritieke CSS genoemd.
Om de FCP en andere prestatiekenmerken van je pagina te versnellen, kun je deze CSS direct in de<head> sectie van de pagina plaatsen (oftewel door het inline) in plaats van het te laden als onderdeel van een extern stylesheet.
Gevorderde gebruikers kunnen de CSS van een pagina handmatig genereren met een tool zoals deze.
Maar nogmaals, op WordPress kun je dit proces automatiseren voor elke afzonderlijke pagina op je site met behulp van FlyingPress of WP Rocket.
Als je eenmaal de kritieke CSS op een pagina hebt onderstreept, kun je het laden van de rest van de CSS van de pagina veilig uitstellen tot later in het laadproces van de pagina (nadat de boven de fold geplaatste content al is gerenderd).
Zowel WP Rocket als FlyingPress doen dit automatisch voor je als onderdeel van hun functionaliteit voor kritieke CSS, wat nog een reden is om te overwegen ze te gebruiken.
Minificeer CSS code
Tot slot is er nog een manier om de CSScode van je site een klein beetje beter te maken: minificeren van de code. Wanneer je de CSS code minificeert, verwijder je overbodige karakters en witruimtes, wat nog meer marginale besparingen kan opleveren.
Plugins zoals WP Rocket en FlyingPress kunnen dit voor je doen. Je kunt ook plugins vinden die specifiek minificeren zoals Fast Velocity Minify.
6. Optimaliseer JavaScript op je site
Naast CSS is ook JavaScript een gebied waar je wat tijd wilt besteden aan het optimaliseren van de code van je site.
Net als bij CSS zijn er verschillende strategieën die je kunt implementeren om de invloed van JavaScript op de FCP tijden van je site te verminderen.
Gebruik geen van JavaScript afhankelijke elementen boven de fold
Als je vertrouwt op JavaScript voor belangrijke functionaliteit boven het scherm, zoals het navigatiemenu van je site (dit is vooral gebruikelijk voor de mobiele versie van een site, omdat veel mobiele menu’s afhankelijk zijn van JavaScript), kan dit je FCP tijd vertragen omdat de browsers van gebruikers het zware JavaScript moeten laden voordat ze kunnen beginnen met het renderen van de pagina.
Als je WordPress gebruikt, kun je dit voorkomen door een thema te kiezen dat voor prestaties is geoptimaliseerd, omdat goede ontwikkelaars zullen voorkomen dat JavaScript nodig is voor deze functies.
Je kunt ook proberen om het gebruik van sliders en andere elementen met JavaScript in boven de fold vallende gebieden te vermijden.
Verwijder onnodige JavaScript
Hoewel je speciale nadruk wilt leggen op het verminderen van JavaScript gebruik in boven de fold geplaatste elementen, is het ook in het algemeen een goed idee om zoveel mogelijk onnodige JavaScript van elke pagina te verwijderen.
Om te beginnen wil je alle WordPress plugins verwijderen die je site niet zinvol verbeteren, omdat veel WordPress plugins voor hun functionaliteit afhankelijk zijn van JavaScript.
Een andere optie is om een scriptbeheer-plugin zoals Asset CleanUp of Perfmatters te gebruiken om JavaScript per pagina uit te schakelen, waardoor je scripts kunt uitschakelen op pagina’s waar ze niet nodig zijn, terwijl ze op andere pagina’s wel ingeschakeld blijven.
We hebben ook een meer technische handleiding voor het uitschakelen van plugins per pagina.
Elimineer render-blocking JavaScript (uitstellen of vertragen)
Wat er ook gebeurt, je zult waarschijnlijk nog steeds JavaScript moeten laden op je pagina. Om ervoor te zorgen dat dit JavaScript het laden van boven de vouw geplaatste inhoud niet belemmert, zijn er 2 veelgebruikte strategieën die je kunt implementeren:
- Render-blocking JavaScript uitstellen – je kunt voorkomen dat het laden van andere inhoud wordt geblokkeerd door het laden van JavaScript uit te stellen tot later in het renderproces van de pagina. Je kunt defer of async gebruiken en er zijn WordPress plugins om dit proces te automatiseren.
- Het laden van JavaScript uitstellen tot interactie met de gebruiker – je kunt volledig wachten met het laden van sommige of alle JavaScript op je site tot een gebruiker interactie heeft met de pagina (bijvoorbeeld klikken of scrollen). Dit biedt de beste prestatieverbetering, maar het kan zijn dat je bepaalde scripts handmatig moet uitsluiten om problemen te voorkomen.
Je kunt beide tactieken toepassen in WordPress via plugins zoals WP Rocket of FlyingPress.
We hebben ook handleidingen over hoe je het parsen van JavaScript kunt uitstellen en hoe je render-blocking bronnen kunt elimineren.
JavaScript code minificeren
Tot slot wil je de resterende JavaScript van je site minificeren om wat extra kleine prestatievoordelen te behalen door onnodige tekens te verwijderen.
Net als bij het minimaliseren van CSS kunnen de meeste caching- en prestatieplugins (waaronder WP Rocket en FlyingPress) dit voor je doen. Je kunt ook een gerichte plugin zoals Fast Velocity Minify gebruiken.
7. Schakel lazy loading uit voor afbeeldingen boven de fold
Met lazy loading van afbeeldingen kun je het laden van de afbeeldingen op je site uitstellen totdat ze nodig zijn (bijvoorbeeld als een gebruiker naar beneden scrolt op de pagina).
Normaal gesproken is dit goed voor de prestaties als je afbeeldingen onder de fold lazy loadt. Maar het gebruik van lazy loading voor afbeeldingen boven de fold kan de FCP- en LCP tijden van je site juist negatief beïnvloeden.
Zorg er daarom voor dat je afbeeldingen boven de fold uitsluit van het lazy loaden.
Als je de core feature van lazy loaden in WordPress gebruikt, zou WordPress dit automatisch moeten doen. Maar als je problemen ondervindt, kun je dit gedrag handmatig aanpassen met de wp_omit_loading_attr_threshold functie.
Als je een plugin gebruikt voor lazy loaden, dan zou de plugin je hopelijk een optie moeten geven om dit te doen. Met Perfmatters kun je bijvoorbeeld automatisch een bepaald aantal belangrijke afbeeldingen uitsluiten en indien nodig handmatig specifieke afbeeldingen uitsluiten.
Als je plugin deze functie niet biedt, overweeg dan om over te stappen op een plugin die dit wel doet.
8. Optimaliseer de levering van lettertypes
Om ervoor te zorgen dat tekstinhoud zichtbaar is tijdens het laden (wat van invloed kan zijn op je FCP tijden en gebruikerservaring), is het belangrijk om ook te optimaliseren hoe lettertypen laden als je aangepaste lettertypen gebruikt (zoals lettertypen die je hebt gevonden op Google Fonts).
Om problemen te voorkomen kun je Font-Display: Optioneel of Font-Display: Swap CSS descriptors gebruiken.
Met Font-Display: Optioneel kun je de browsers van gebruikers vertellen dat ze een fallback lettertype moeten gebruiken als het aangepaste lettertype niet snel genoeg laadt.
Als je dit niet wilt toevoegen met je eigen CSS, dan zijn er een aantal WordPress plugins die het laden van lettertypen voor je kunnen optimaliseren, waaronder WP Rocket, FlyingPress en Perfmatters.
9. Probeer de DOM zo klein mogelijk te maken
Volgens Mozilla is het Document Object Model (DOM) “de gegevensrepresentatie van de objecten die de structuur en inhoud van een document op het web vormen.”
Hoewel menselijke bezoekers niet direct interactie hebben met het DOM, is het DOM van een pagina belangrijk om webbrowsers te helpen de inhoud van een pagina te begrijpen en weer te geven.
Als algemene regel geldt dat een grotere en complexere DOM leidt tot langzamere FCP tijden dan een kortere, geoptimaliseerde DOM-structuur.
Hier volgen enkele tips om de DOM van je site te verkleinen:
- Gebruik een voor prestaties geoptimaliseerd WordPress thema – op WordPress speelt je thema een grote rol in de DOM grootte van je site. Bekijk onze berichten met gegevens over de snelste WordPress thema’s en de snelste WooCommerce-thema’s.
- Gebruik het blok Page End – je kunt een lange pagina opbreken met het blok Page End.
- Optimaliseer paginering – je kunt paginering in WordPress gebruiken om de pagina’s met je blogberichten (of andere aangepaste berichttypes) op te breken.
- Toon excerpts – in plaats van de volledige tekst te tonen op pagina’s met aanbiedingen, kun je overwegen om een uittreksel te tonen.
- Beperk of vermijd het gebruik van “zware” paginabouwers – hoewel visuele, drag-and-drop paginabouwers heel mooi en handig kunnen zijn vanuit een ontwerpperspectief, kunnen ze ook een hoop onnodigheden toevoegen aan het DOM. Vanuit het oogpunt van prestaties kun je beter bij de ingebouwde editor blijven. Het kan zijn dat het prestatieverlies van een visuele bouwer het waard is voor de extra ontwerpkracht, en dat is meestal prima zolang je de andere tips toepast.
10. Vermijd redirects (vooral meervoudige redirects)
Met redirects (omleidingen) kun je verkeer van de ene URL naar een andere URL sturen voordat de pagina wordt geladen. Je kunt bijvoorbeeld iemand die de HTTP versie van je site bezoekt omleiden naar de HTTPS versie.
Maar omdat de omleiding moet worden voltooid voordat de browser van de gebruiker de pagina kan laden, voegt elke omleiding meestal honderden milliseconden vertraging toe aan de FCP tijd van je site (en andere prestatiestatistieken).
Hier volgen enkele tips om onnodige redirects te vermijden:
- Werk hard-coded URL’s bij als je overstapt van HTTP naar HTTPS – als je je site verplaatst naar HTTPS, moet je eigenlijk alle URL’s in de database van je site bijwerken om HTTPS te gebruiken in plaats van te vertrouwen op omleidingen.
- Verwijs URL’s naar de juiste WWW- of niet-WW-versie – zorg ervoor dat al je URL’s de juiste versie gebruiken om te voorkomen dat ze van WWW naar niet-WW worden omgeleid (of omgekeerd).
- Repareer gebroken interne links – werk alle doodlopende interne links bij in plaats van te vertrouwen op redirects om gebruikers naar de juiste plek te sturen.
- Vraag andere sites om dode externe links te repareren (als dat de moeite waard is) – als je veel verkeer krijgt naar een dode link van een externe site, kun je contact opnemen met de eigenaar van de site en hem vragen om de link te repareren in plaats van te vertrouwen op omleidingen.
Om problemen met redirects te vinden, kun je de gratis redirect checker van Kinsta gebruiken. We hebben ook een artikel over WordPress redirect best practices.
Hier kun je bijvoorbeeld zien dat Kinsta’s redirect checker meerdere redirects detecteerde toen we http://www.wordpress.org als URL invulden:
- Eén redirect van HTTP naar HTTPS.
- Een tweede redirect van WWW naar niet-WWW.
Als je meerdere omleidingen zoals deze ziet, wil je ze repareren.
Samenvatting
First Contentful Paint is een op gebruikerservaring gerichte prestatiemeter waarmee je kunt zien hoe lang het duurt voordat het eerste stuk content zichtbaar wordt op je pagina. Het is vergelijkbaar met, maar iets anders dan, Largest Contentful Paint.
Als je de First Contentful Paint tijd van je site optimaliseert, zal dit als natuurlijk effect hebben dat ook de Largest Contentful Paint tijd verbetert, samen met de meeste andere prestatiecijfers voor je site.
Om je tijden te versnellen, moet je je richten op het optimaliseren van zowel de frontend code van je site als de responstijd van de server.
Als je een site met geoptimaliseerde code op snelle WordPress hosting zoals Kinsta zet, zou je de FCP tijden van je site ruim onder de 1,8 seconden moeten kunnen krijgen die Google als “Good” beschouwt
Laat een reactie achter