Paginasnelheid is tegenwoordig belangrijker dan ooit en een belangrijke factor waarmee rekening moet worden gehouden voor elke website. Het heeft niet alleen een aanzienlijke impact op de gebruikerservaring, maar kan ook een enorme impact hebben op zoekmachineoptimalisatie (SEO).
Sterker nog, in mei 2021 introduceerde Google de Core Web Vitals , die de gebruikerservaring beoordelen bij het laden van elke pagina. Google noemt dit nieuwe signaal het "Page Experience Signal" en het zal een grote impact hebben op alle websites. Website-eigenaren doen er goed aan zich grondig vertrouwd te maken met deze Core Web Vitals, zodat ze mogelijke negatieve rankingveranderingen kunnen minimaliseren.
Largest Contentful Paint (LCP) is een van de drie cruciale statistieken die deel uitmaken van Google's Core Web Vitals. Het doel van deze parameter is ervoor te zorgen dat gebruikers die websites bezoeken tevreden zijn met hun ervaring. Dit omvat content, maar ook presentatie en prestaties. Als de website te lang nodig heeft om de aangeboden content te leveren, is de kans groter dat de bezoeker de pagina direct verlaat. Voor Google betekent dit dat de ervaring niet optimaal was.
Tot de Core Web Vitals behoren ook cumulatieve lay-outverschuiving (CLS) en eerste invoervertraging (FID). We zullen hier kort op ingaan, maar omdat er veel te bespreken valt, richten we ons specifiek op de grootste contentful paint en hoe de eerste rendering van de elementen op een website de algehele webpagina-ervaring beïnvloedt.
Laten we beginnen!
Wat is Largest Contentful Paint: een eenvoudige uitleg
Simpel gezegd meet de grootste contentful paint de tijd die een website nodig heeft om een gebruiker het grootste element op het scherm te tonen, compleet en klaar voor interactie. De analyse van deze statistiek eindigt zodra er gebruikersinteractie plaatsvindt, zoals klikken, scrollen of gebruikersinvoer, zoals het invoeren van tekst in een tekstvak.
Google beweert dat dit een eenvoudigere meting is dan DOM of DOMContentLoad, die in het verleden werden gebruikt. LCP kijkt bovendien naar de waargenomen laadsnelheid van kritieke bronnen, zoals de grootste elementen op blokniveau, zoals een zichtbare afbeelding of tekstblok.
Dit betekent dat als het grootste contentvolle verfelement op uw website, zoals een achtergrondafbeelding of video, lang duurt om te laden tijdens het renderingproces, uw LCP-score waarschijnlijk negatief wordt beïnvloed.
Google heeft aangegeven dat deze metriek alleen specifiek rekening houdt met content boven de vouw, dat wil zeggen met alles wat direct na het laden van de pagina verschijnt, zonder dat er gescrold hoeft te worden.
Wat is de ideale Largest Contentful Paint Score?
Aangezien we hebben vastgesteld dat LCP een betere gebruikerservaring aangeeft en een belangrijke SEO-rankingfactor kan zijn, is het van groot belang om ervoor te zorgen dat uw website een 'goede' hoogste contentful paint score heeft.
Hoewel vaak wordt gezegd dat 1 seconde de tijd is die een gebruiker nodig heeft om zijn of haar aandacht bij een taak te verliezen, is dit slechts een schatting die onderzoekers hebben gemaakt. Voor SEO-rankings en een algehele positieve gebruikerservaring vanuit Google's perspectief wordt een positieve LCP-score van 2,5 seconde of minder als "goed" beschouwd.
Als de score van uw website tussen de 2,5 en 4 seconden ligt, wordt deze beschouwd als 'verbeterbaar'. Alles boven de 4 seconden wordt beschouwd als 'slecht'.
Het is belangrijk om te weten dat de grootste contentful paint ongeveer 25% van je Google Performance Score uitmaakt (ook wel bekend als je 'Page Speed'-score op mobiel en desktop). Om een positief Core Web Vitals-rapport te hebben en de beoordeling te halen, moet je een 'goede' LCP-score hebben en ook goed scoren in CLS en FID. Deze statistieken moet je dus serieus overwegen.
Welke drempelwaarden voor de Largest Contentful Paint (LCP) moet u hanteren?
Om ervoor te zorgen dat je je LCP-doelstelling voor de meeste gebruikers haalt, kun je het beste het 75e percentiel van alle pagina's die naar die website worden geladen, meten. Dit moet worden gesegmenteerd over mobiele en desktopapparaten om ervoor te zorgen dat je elementen op alle apparaten met dezelfde snelheid worden weergegeven.
Simpel gezegd betekent het meten met het 75e percentiel dat als minimaal 75% van de paginaweergaven van een website aan de drempelwaarde 'goed' voldoet, de site als 'goed' wordt beschouwd voor die metriek.
Aan de andere kant, als ten minste 25% van de paginaweergaven de drempelwaarde 'slecht' haalt, wordt de site als 'slecht' beschouwd. Een LCP van 2 seconden in het 75e percentiel wordt bijvoorbeeld als 'goed' beschouwd, terwijl een LCP van 5 seconden in het 75e percentiel als 'slecht' wordt beschouwd.
Er zijn twee redenen waarom het 75e percentiel als de ideale drempelwaarde is vastgesteld. Ten eerste zou het gebruik van dat percentiel ervoor moeten zorgen dat de meeste bezoeken aan een site of pagina het gewenste prestatieniveau bereiken. Ten tweede zou de waarde bij het gekozen percentiel niet ernstig beïnvloed moeten worden door uitschieters.
Als u over een groot aantal render-blokkerende bronnen beschikt, zoals render-blokkerende javascript of CSS, ligt uw score waarschijnlijk onder de ideale drempelwaarde en moet u de tijd nemen om uw LCP te verbeteren, zodat uw website voldoet aan de richtlijnen van Google.
Waarom is mijn Largest Contentful Paint-score zo hoog?
Niet meer spetterenDe hoogste contentful paint scores meten specifieke bronnen die boven de vouw worden weergegeven en die relevant zijn voor de gebruikerservaring, waaronder:
- Achtergrondafbeeldingen met CSS.
- Textelementen, zoals alinea's, koppen en lijsten.
- Afbeeldingen.
- Afbeeldingstags.
- Videominiaturen.
Als er bij een van deze elementen sprake is van langzame laadtijden van bronnen, bepaalt Google dat dit tot een slechte gebruikerservaring zal leiden en dat de LCP-statistiek negatief wordt beïnvloed.
Dit zijn de belangrijkste elementen die nu worden overwogen, maar het is met opzet eenvoudig gehouden toen de kernwebvitals werden gelanceerd. Naarmate er meer onderzoek wordt gedaan, kunnen er aanvullende elementen worden toegevoegd.
Welke hulpmiddelen kunnen worden gebruikt om LCP te meten?
Er zijn diverse veld- en laboratoriuminstrumenten waarmee u de LCP van uw website kunt meten.
Veldtools geven inzicht in hoe echte gebruikers uw pagina of site ervaren. Dit type meting wordt vaak Real User Monitoring (RUM) genoemd. Veldgegevens hebben doorgaans een beperktere set aan statistieken dan labgegevens.
Labtools verzamelen gegevens in een gecontroleerde omgeving en zijn meer gericht op het bieden van reproduceerbare resultaten voor debuggen, met inzichten in hoe een potentiële gebruiker uw website waarschijnlijk zal ervaren. Het nadeel is dat ze mogelijk geen knelpunten detecteren die zich in de praktijk voordoen.
Er zijn diverse lab- en veldtools beschikbaar. Elke tool biedt waardevolle inzichten die u kunt gebruiken om uw gebruikerservaring te optimaliseren.
PageSpeed Insights
PageSpeed Insights (PSI) biedt gedetailleerde rapportage over de prestaties van een pagina op mobiel en desktop, en geeft daarnaast duidelijke suggesties voor optimalisatie. PSI omvat zowel laboratorium- als veldgegevens in de rapporten en houdt ook rekening met alle drie de cumulatieve Core Web Vitals-statistieken, inclusief LCP.
Bovenaan het rapport geeft PSI een score weer die de algehele prestaties van de pagina samenvat. Een score van 90 of hoger wordt als goed beschouwd, terwijl een score tussen 50 en 90 een score is die verbetering behoeft. Een score lager dan 50 wordt als een slecht resultaat beschouwd.
Die score wordt uiteindelijk bepaald door Lighthouse ook te gebruiken om labgegevens over de pagina te verzamelen en te analyseren. Hoewel PageSpeed de door Lighthouse gegenereerde informatie gebruikt en daar vervolgens meer praktijkgegevens aan toevoegt, biedt Lighthouse u meer dan slechts één score. Het biedt meer functies dan alleen het meten van de prestaties van uw website.
Vuurtoren
Suzuki KenichiLighthouse is een geautomatiseerde, open-source labtool die gebruikt wordt om de kwaliteit van webpagina's te verbeteren. In tegenstelling tot PageSpeed Insights meet het niet alleen de prestaties. Het biedt ook audits voor toegankelijkheid, SEO, progressieve webapps en meer.
Terwijl Google PageSpeed een combinatie van laboratorium- en praktijkgegevens gebruikt, gebruikt Lighthouse uitsluitend laboratoriumgegevens (onder consistente omstandigheden) om het rapport te maken.
Omdat Lighthouse nu als geïntegreerde analyse-engine in PageSpeed Insights is geïntegreerd, hebt u toegang tot de gegevens van Lighthouse door eenvoudig een PageSpeed-rapport uit te voeren. Soms wilt u Lighthouse mogelijk gebruiken in combinatie met PageSpeed Insights, bijvoorbeeld wanneer u audits programmatisch wilt uitvoeren, andere aspecten van uw websites wilt evalueren dan alleen laadtijden, of als u de Lighthouse API in uw eigen systemen wilt integreren.
Chrome-gebruikerservaringsrapport
Het rapport over de gebruikerservaring van Chrome is een praktische tool die realistische statistieken over de gebruikerservaring biedt, gebaseerd op de manier waarop Chrome-gebruikers populaire websites ervaren. Het verzamelt gegevens van gebruikers die geen wachtwoordzin voor synchronisatie hebben ingesteld, die zich hebben aangemeld voor synchronisatie van hun browsegeschiedenis en die rapportage van gebruiksstatistieken hebben ingeschakeld.
LCP is een van de meetgegevens die worden gemeten in het rapport over de gebruikerservaring in Chrome. De uiteindelijke gegevens worden beschikbaar gesteld in De resulterende gegevens zijn toegankelijk via het openbare Google BigQuery-project, PageSpeed Insights en het CrUX Dashboard in Data Studio.
Core Web Vitals-rapport (Search Console)
Het rapport 'Core Web Vitals' is ontworpen om u te helpen slechte gebruikerservaringen op uw site te verbeteren door veldgegevens te analyseren. Het laat zien hoe uw pagina's presteren op basis van echte gegevens.
Het rapport is gebaseerd op drie statistieken: grootste contentful paint (LCP), cumulatieve layout shift (CLS) en first-input delay (FID). Als de webpagina die wordt geanalyseerd niet over een minimale hoeveelheid gegevens beschikt om voor een van deze statistieken te worden gerapporteerd, wordt die statistiek uit het rapport uitgesloten.
Zodra een pagina een basishoeveelheid gegevens voor deze drie statistieken heeft, krijgt de pagina de status van de slechtst presterende statistiek.
Chrome DevTools
Chrome DevTools is rechtstreeks ingebouwd in de Chrome-browser en is een reeks tools voor webontwikkelaars waarmee u de netwerkactiviteit van een pagina kunt inspecteren en de weergegeven HTML (DOM), kritieke CSS, niet-kritieke CSS, CSS voor het kritieke pad, ongebruikte CSS, ongebruikte JavaScript, JavaScript-bundels, of er blokkerende JavaScript aanwezig is en meer nader kunt bekijken.
Chrome DevTools kan worden gebruikt om problemen met de advertentieweergave op te lossen en de LCP op een willekeurige pagina te vinden. Voer eenvoudig een prestatie-opname uit en u vindt de LCP in de sectie Timing. Door op de LCP-markering te klikken, wordt het element op de pagina gemarkeerd.
Over het algemeen laat prestatieregistratie zien hoe uw pagina presteert tijdens het laden, in tegenstelling tot wanneer deze actief is. Het toont uw frames per seconde (FPS) en eventuele knelpunten.
WebpaginaTest
FlickrWebPageTest is een gratis tool voor webprestatieanalyse die niet onder de Google-paraplu valt. De tool gebruikt echte browsers om webpagina's te openen en timinggegevens te verzamelen, zodat de algehele prestaties van een website kunnen worden beoordeeld.
De belangrijkste functie van WebPageTest is de SpeedIndex-metriek. Deze meetmethode richt zich specifiek op de snelheid waarmee content boven de vouw wordt weergegeven.
Web Vitals Chrome-extensie
Web Vitals Chrome is misschien wel een van de eenvoudigste tools om LCP en de andere twee Web Vitals-statistieken (CLS en FID0) bij te houden. Het is een eenvoudige extensie die u in uw Chrome-browser kunt installeren.
Op elke webpagina die u laadt, voegt de tool automatisch een laag toe waarin alle drie de statistieken worden weergegeven.
5 bewezen manieren om Largest Contentful Paint (LCP) te versnellen
Het bijhouden van je hoogste contentful paint score is een cruciaal onderdeel van je websiteonderhoud. Maar alleen door verbeteringen aan te brengen, zul je betere resultaten zien. Als je LCP score niet optimaal is en verbetering behoeft, zijn er een aantal eenvoudige en meer uitgebreide dingen die je kunt doen om je score te verhogen en een betere gebruikerservaring te creëren.
Optimaliseer afbeeldingsgroottes
Afbeeldingen kunnen de gebruikerservaring op je website aanzienlijk verbeteren, maar ze kunnen ook grote snelheidsproblemen veroorzaken als ze niet geoptimaliseerd zijn. Gebruik altijd responsieve afbeeldingen met de juiste afmetingen. Je hostingprovider adviseert specifieke afmetingen, zowel voor de desktop- als de mobiele versie. Het optimaliseren van afbeeldingen op je website helpt overbelasting te voorkomen en kan de hoogste contentful paint scores drastisch verbeteren.
Vermijd het gebruik van JavaScript om afbeeldingen te laden
Het zogenaamde JavaScript "lazy loading" is handig voor afbeeldingen onder de vouw, maar wordt afgeraden voor afbeeldingen boven de vouw. Lazy loading houdt in dat in plaats van de hele webpagina in één keer te laden en voor de gebruiker weer te geven, alleen het benodigde gedeelte direct wordt geladen en de resterende content wordt uitgesteld totdat de gebruiker deze nodig heeft.
Omdat u wilt dat afbeeldingen boven de vouw zo snel mogelijk laden, kunt u beter geen JavaScript gebruiken om die afbeeldingen te laden, omdat dit het proces kan vertragen. Dit helpt vertraging te voorkomen en zorgt ervoor dat uw LCP-classificatie binnen het aanbevolen bereik blijft.
Gebruik een Image Content Delivery Network (CDN)
Een Content Delivery Network (CDN)-service kan ervoor zorgen dat afbeeldingen sneller laden door ze op te slaan op strategisch geplaatste servers over de hele wereld. Door geoptimaliseerde afbeeldingen te leveren vanaf een bron die dichter bij de gebruiker ligt die ze aanvraagt, kan een webpagina tot 50% sneller worden gedownload, wat kan leiden tot een betere score voor de grootste contentful paint.
Kies een goede hostingdienst
Een van de makkelijkste manieren om de laadtijd van een webpagina te beïnvloeden, is door gebruik te maken van een hoogwaardige hostingdienst. Zoek een kwaliteitsprovider met een goede reputatie in de markt en, nog belangrijker, een die de benodigde infrastructuur biedt om aan de grootte en behoeften van uw site te voldoen.
Bij twijfel, gebruik het PRPL-patroon
Google raadt het PRPL-patroon aan, dat wordt gebruikt om elke afzonderlijke pagina sneller te laden en interactief te maken. Het staat voor:
- Push (of preload) de belangrijkste bronnen eerst. Hiervoor kan een declaratieve fetch request worden gebruikt, oftewel code die precies aangeeft waar we in de browser in geïnteresseerd zijn.
- Render de initiële route zo snel mogelijk. Eén manier om dit te doen is door de initiële HTML server-side op de pagina te renderen, kritieke JS en CSS inline te plaatsen en extra server-round trips te elimineren met behulp van een async-functie om niet-kritieke CSS uit te stellen.
- Cache de resterende activa vooraf, zodat gebruikers de activa bij volgende bezoeken direct uit de cache kunnen ophalen in plaats van vanaf de server.
- Laad andere routes en niet-kritieke activa, zoals afbeeldingen, zoals eerder besproken.
Het PRPL-patroon kan een gunstige invloed hebben op de responstijden van servers en is zeker de moeite waard om te implementeren.
Hoe verbeter je de grootste contentful paint op WordPress?
Niet meer spetterenHet oplossen van LCP-problemen in WordPress vereist een aantal andere processen dan websites op andere platforms. Hoewel er enige overlap is, zijn de meeste van deze tips voor het verbeteren van de grootste contentful paint direct relevant voor WordPress.
Hoe u uw grootste contentvolle verfelement optimaliseert, ongeacht wat het is
Een groots opgezet verfobject kan per pagina verschillen en kan bestaan uit afbeeldingen, video's, animaties of tekstelementen.
Als het een afbeelding is, zorg er dan voor dat deze gecomprimeerd en vooraf geladen is, de juiste afmetingen heeft, via een CDN wordt aangeleverd en geen last heeft van lazy load-protocollen. Idealiter converteer je afbeeldingen ook naar WebP, een modern afbeeldingsformaat dat superieure lossy en lossless compressie biedt voor webafbeeldingen. Dezelfde stappen kunnen worden gebruikt voor een achtergrondafbeelding.
Als je grootste content-element een video of animatie is, is het verstandig om zelfgehoste video's te vermijden en deze in plaats daarvan naar YouTube te uploaden. Zorg ervoor dat de video gecomprimeerd is voordat je hem uploadt en vermijd indien mogelijk het gebruik van een video of animatie in de hero-sectie van je webpagina, aangezien dit zeer waarschijnlijk een negatieve invloed heeft op je LCP.
Als een HTML-element op blokniveau uw grootste contentful paint is, is de kans klein dat dit uw LCP zo negatief beïnvloedt als een afbeelding, video of animatie. Deze elementen zorgen namelijk doorgaans voor een snellere serverresponstijd.
Elimineer render-blokkerende bronnen
Het elimineren van render-blocking resources kan LCP-problemen aanzienlijk verminderen. Plugins zoals Async JavaScript of Autoptimize kunnen de meeste problemen oplossen, omdat ze specifiek zijn ontwikkeld om bestanden asynchroon te laden, CSS en JavaScript te verkleinen, uit te stellen en inline te gebruiken. Verwijder alle CSS of JavaScript die niet wordt gebruikt, want het vertraagt de boel onnodig.
U kunt ook proberen uw lettertypen lokaal te hosten en ze vooraf te laden. Vermijd indien mogelijk zware plug-ins, zoals pagina-bouwers, omdat deze overtollige JavaScript en ongebruikte CSS aan uw website kunnen toevoegen, wat ook de responstijden van de server kan vertragen.
Maak gebruik van een cache-plug-in
Zonder caching moeten bezoekers bij elk bezoek aan een website een webpagina downloaden. Gelukkig cachen de meeste moderne browsers automatisch, zodat terugkerende gebruikers sneller toegang hebben tot de inhoud van uw website.
Met een WordPress-cacheplugin kun je profiteren van server-side caching, wat een grote impact kan hebben op de content van je WordPress-site. In plaats van content tijdelijk op te slaan aan de clientzijde met een browsercache, wordt deze opgeslagen op de server van een website. Servercaching houdt in dat de caching volledig op de server wordt afgehandeld en beheerd, zonder tussenkomst van de eindgebruiker of browser.
Er zijn ook cacheplugins voor bestanden die je kunt gebruiken, maar server-side caching is doorgaans sneller en kan worden ingeschakeld met plugins zoals SG Optimizer of LiteSpeed Cache. Plugins zoals WP Rocket stellen je in staat om te profiteren van paginacaching, objectcaching en nog veel meer.
Als u momenteel geen cacheplug-in gebruikt en last heeft van trage serverresponstijden op uw website, zult u een aanzienlijke verbetering in de laadtijden van bronnen zien als u een cacheplug-in implementeert.
Conclusie
Hoewel LCP slechts één van de vele factoren is die de snelheid en algehele gebruikerservaring van uw website beïnvloeden, is het niet iets dat u licht moet opvatten. Zoals we hebben geleerd, kan de laadtijd van een webpagina niet alleen een grote impact hebben op de gebruikerservaring, maar kan het ook een belangrijke factor zijn in de SEO-ranking, wat de manier is waarop veel websites in de eerste plaats gebruikersverkeer genereren.
Gebruik de tips die we hebben besproken om uw LCP bij te houden, te optimaliseren en te onderhouden. Houd er rekening mee dat het voortdurende inspanning vergt om dit bij te houden en uw gebruikers de best mogelijke ervaring te bieden.
Als u maandelijks meer dan $ 2.000 aan advertentie-inkomsten genereert, neem dan vandaag nog contact met ons op voor meer informatie over hoe Publift u kan helpen uw advertentie-inkomsten te verhogen en de beschikbare advertentieruimte op uw website of app optimaal te benutten.