Hoe u de grootste inhoudsverf van uw website kunt meten
Voer een gratis websitesnelheidstest uit om erachter te komen. Uw LCP-snelheid wordt onmiddellijk weergegeven.
De resultaten van de snelheidstest vertellen u of:
LCP-drempel bereikt. U moet elke andere Core Web Vital optimaliseren.
Hoe wordt het grootste gehalte verf berekend?
Google analyseert het 75e percentiel van ervaringen, dit betekent dat 25% van de daadwerkelijke websitebezoekers een LCP-laadtijd van 3,09 seconden of meer ervaart, terwijl voor 75% van de gebruikers de LCP minder dan 3,09 seconden is.
In dit voorbeeld wordt het daadwerkelijke gebruikers-LCP weergegeven als 3,09 seconden.
Screenshot van Core Web Vitals-gegevens van DebugBear.com, november 2022
Wat zijn de resultaten van de laboratoriumtest op mijn vitale gegevens op het web?
Met deze specifieke websnelheidstest zie je ook labstatistieken die zijn verzameld in een gecontroleerde testomgeving. Hoewel deze statistieken niet direct van invloed zijn op de Google-ranglijst, hebben deze gegevens twee voordelen:
Statistieken worden bijgewerkt zodra u uw website verbetert, terwijl het 28 dagen duurt voordat de real-time gegevens van Google volledig zijn bijgewerkt. Naast statistieken krijg je gedetailleerde rapporten, die je kunnen helpen bij het optimaliseren van je website.
Daarnaast biedt PageSpeed Insights ook laboratoriumgegevens, maar houd er rekening mee dat de gegevens die het rapporteert soms misleidend kunnen zijn vanwege de gesimuleerde versnelling die het gebruikt om een langzamere netwerkverbinding te emuleren.
Hoe vind je je grootste schilderelement van inhoud?
Wanneer u een paginasnelheidstest uitvoert met DebugBear, wordt het LCP-element gemarkeerd in het testresultaat.
Soms kan het LCP-element een grote afbeelding zijn en soms kan het een groot stuk tekst zijn.
Ongeacht of uw LCP-element een afbeelding of een stuk tekst is, de LCP-inhoud wordt pas weergegeven als uw pagina begint met renderen.
Op de volgende pagina is bijvoorbeeld een achtergrondafbeelding verantwoordelijk voor het grotere schilderij.
Screenshot van DebugBear.com, november 2022
In plaats daarvan is het LCP op deze pagina een alinea met tekst.
Screenshot van DebugBear.com, november 2022
Om de Largest Content Paint (LCP) van uw website te verbeteren, moet u ervoor zorgen dat het HTML-element dat verantwoordelijk is voor de LCP snel verschijnt.
Hoe het schilderen met grotere inhoud te verbeteren
Om het LCP te verbeteren, hebt u het volgende nodig:
Zoek uit welke bronnen nodig zijn om het LCP-element te laten verschijnen. Bekijk hoe u deze bronnen sneller (of helemaal niet) kunt laden.
Als het LCP-element bijvoorbeeld een foto is, kunt u de bestandsgrootte van de afbeelding verkleinen.
Na het uitvoeren van een DebugBear-snelheidstest, kunt u op elke prestatiestatistiek klikken om meer informatie te zien over hoe deze kan worden geoptimaliseerd.
Screenshot van een gedetailleerde analyse van het grootste inhoudsschilderij op DebugBear.com, november 2022
Veelgebruikte bronnen die van invloed zijn op het LCP zijn:
Render-locking bronnen. Afbeeldingen die niet zijn geoptimaliseerd. Verouderde beeldformaten. Lettertypen die niet zijn geoptimaliseerd.
Hoe bronnen die weergave blokkeren te verminderen
Render-locking-bronnen zijn bestanden die moeten worden gedownload voordat de browser de inhoud van de pagina naar het scherm kan tekenen. CSS-stijlbladen blokkeren vaak de weergave, net als veel scripttags.
Om de prestatie-impact van door renderen vergrendelde bronnen te verminderen, kunt u:
Identificeer welke bronnen de weergave blokkeren. Controleer of de hulpbron nodig is. Controleer of de bron de weergave moet blokkeren. Kijk of de resource sneller geladen kan worden, bijvoorbeeld door compressie.
De makkelijke manier: In de cascade van DebugBear-verzoeken worden verzoeken om resources die de weergave vergrendelen gemarkeerd met een “Locking”-tag.
Screenshot van DebugBear.com, november 2022
Hoe u LCP-afbeeldingsverzoeken kunt prioriteren en versnellen
Voor deze sectie maken we gebruik van het nieuwe kenmerk “fetchpriority” voor afbeeldingen om de browser van bezoekers te helpen snel te bepalen welke afbeelding als eerste moet worden geladen.
Gebruik dit attribuut in uw LCP-element.
Omdat?
Als we alleen naar de HTML kijken, kunnen browsers vaak niet meteen zien welke afbeeldingen belangrijk zijn. De ene afbeelding kan uiteindelijk een grote achtergrondafbeelding worden, terwijl een andere een klein deel van de voettekst van de website kan zijn.
Bijgevolg hebben alle afbeeldingen in eerste instantie een lage prioriteit, totdat de pagina is weergegeven en de browser weet waar de afbeelding verschijnt.
Dit kan echter betekenen dat de browser pas vrij laat begint met het downloaden van de LCP-image.
Met de nieuwe webstandaard Priority Hints kunnen website-eigenaren meer informatie verstrekken om browsers te helpen bij het prioriteren van afbeeldingen en andere bronnen.
In het onderstaande voorbeeld kunnen we zien dat de browser veel tijd besteedt aan wachten, zoals aangegeven door de grijze balk.
Screenshot van een LCP-afbeelding met lage prioriteit op DebugBear.com, november 2022
We zouden deze LCP-afbeelding kiezen om het kenmerk “fetchpriority” aan toe te voegen.
Hoe het kenmerk “FetchPriority” aan afbeeldingen toe te voegen
Door simpelweg het kenmerk fetchpriority=”high” toe te voegen aan een HTML img-tag, zal de browser prioriteit geven aan het zo snel mogelijk downloaden van die afbeelding.
ophaalprioriteit=”hoog” />
Hoe moderne afbeeldingsindelingen en afbeeldingen op de juiste manier te gebruiken
Afbeeldingen met een hoge resolutie hebben vaak een grote bestandsgrootte, waardoor het lang duurt om ze te downloaden.
In het onderstaande snelheidstestresultaat kunt u dit zien door naar de donkerblauw gearceerde gebieden te kijken. Elke regel geeft een stuk van de afbeelding aan dat de browser bereikt.
Screenshot van een grote LCP-afbeelding op DebugBear.com, november 2022
Er zijn twee manieren om de grootte van afbeeldingen te verkleinen:
Zorg ervoor dat de beeldresolutie zo laag mogelijk is. Overweeg om afbeeldingen met verschillende resoluties te plaatsen op basis van de grootte van het apparaat van de gebruiker. Gebruik een moderne afbeeldingsindeling zoals WebP, die afbeeldingen van dezelfde kwaliteit kan opslaan met een kleinere bestandsgrootte.
Hoe de laadtijden van lettertypen te optimaliseren
Als het LCP-element een kop of een HTML-alinea is, is het belangrijk om snel het lettertype van dat tekstfragment te laden.
Een manier om dit te bereiken is het gebruik van preload-tags die de browser kunnen vertellen om lettertypen van tevoren te laden.
De font-display: swap CSS-regel kan ook zorgen voor versnelde weergave, omdat de browser de tekst onmiddellijk weergeeft met een standaardlettertype voordat later wordt overgeschakeld naar het weblettertype.
Screenshot van webbronnen die LCP vertragen op DebugBear.com, november 2022
Bewaak uw website om LCP snel te houden
Continue monitoring van uw website stelt u niet alleen in staat om te controleren of uw LCP-optimalisaties werken, maar zorgt er ook voor dat u wordt gewaarschuwd als uw LCP verslechtert.
DebugBear kan Core Web Vitals en andere sitesnelheidsstatistieken in de loop van de tijd volgen. Naast het uitvoeren van diepgaande laboratoriumtests, volgt het product ook gebruikersstatistieken uit de echte wereld van Google.
Probeer DebugBear met een gratis proefperiode van 14 dagen.
Screenshot van monitoringgegevens van de sitesnelheid op DebugBear.com, november 2022
Hey, ik ben Brent, en ik speel al een lange tijd mee in de SEO scene. Ik ben vooral heel actief in de Amerikaanse markt, en hou dan ook wel van een uitdaging. Ik ben sinds kort aan het uitbreiden binnenin de Benelux, en besluit hier dan ook te oversharen!
Wil je meer leren, klik dan op lees meer!
