Wat LCP, INP en CLS meten, de drempels voor goed en slecht, velddata tegenover labdata, een live meter voor deze pagina en 25 oplossingen met code, gegroepeerd per oorzaak, plus notities per platform.
Core Web Vitals zijn drie metingen van echte bezoeken: Largest Contentful Paint (laden, goed bij 2.5 seconden of minder), Interaction to Next Paint (reactiesnelheid, goed bij 200 milliseconden of minder) en Cumulative Layout Shift (stabiliteit, goed bij 0.1 of minder). Een pagina slaagt als minstens 75% van de bezoeken aan alle drie voldoet.
Goede scores
De meter hieronder meet deze pagina in uw eigen browser terwijl u hem gebruikt. Zoek daarna de meetwaarde waarop u zakt en werk de oplossingen ervoor door; elke oplossing noemt de oorzaak die ze verhelpt en geeft de code.
Interaction to Next Paint verving in maart 2024 First Input Delay als Core Web Vital. INP kijkt naar alle interacties op een pagina, niet alleen de eerste, en rekent ook de tijd mee om het resultaat te tekenen.
Lighthouse is één test op één gesimuleerd apparaat. Core Web Vitals gebruiken echte bezoekers over 28 dagen, op tragere telefoons en netwerken, en bevatten INP, dat Lighthouse niet kan meten.
Ze maken deel uit van de signalen voor paginabeleving van Google. Google noemt relevantie en kwaliteit van de content veel belangrijker, dus goede vitals helpen vooral als pagina's verder vergelijkbaar zijn.
Velddata beslaan de voorgaande 28 dagen, dus verbeteringen verschijnen geleidelijk in ongeveer vier weken nadat u ze live hebt gezet.
Drempels (beoordeeld op het 75e percentiel van echte bezoeken)
Velddata tegenover labdata
fetchpriority="high" vertelt de browser dat deze afbeelding het belangrijkst is. Laad de LCP-afbeelding nooit lazy.
Achtergrondafbeeldingen worden laat gevonden, pas nadat de CSS is geladen. Een preload in de head start de download meteen.
Met srcset en sizes downloadt een telefoon een klein bestand in plaats van het desktopbestand.
AVIF en WebP zijn bij dezelfde kwaliteit meestal veel kleiner dan JPEG. Met picture kunnen oudere browsers terugvallen.
font-display: swap toont meteen reservetekst, zodat een kop die het LCP-element is niet wordt opgehouden door het downloaden van een lettertype.
preconnect doet de DNS-, TCP- en TLS-handshake van tevoren voor een origin van derden die u nodig gaat hebben.
Scripts in de head zonder defer of async blokkeren de weergave. defer houdt de volgorde aan, maar wacht tot de HTML is verwerkt.
Wordt het LCP-element door JavaScript gemaakt, dan kan er niets worden getekend tot de bundel is gedownload en uitgevoerd. Server rendering of prerendering zet het in het eerste antwoord. Zie onze SEO-gids voor single page apps voor de opties.
Een trage serverreactie vertraagt alles. Cache statische pagina's op een CDN en stel een verstandige Cache-Control in.
Een taak van meer dan 50 ms blokkeert invoer. Geef tussen de stukken de main thread vrij, zodat een klik tussendoor kan worden afgehandeld. scheduler.yield is nieuwer; de fallback met setTimeout werkt overal.
Werk de knop meteen bij en doe het zware werk pas nadat de browser de kans heeft gehad om te tekenen.
Een lange lijst bij elke toetsaanslag filteren laat het typen haperen. Wacht op een korte pauze.
startTransition laat React de invoer responsief houden en het dure resultaat renderen wanneer dat kan.
Chatwidgets en tag managers voeren bij het laden vaak zware code uit. Laad ze nadat de pagina inactief is of bij de eerste interactie.
Enorme pagina's maken elke update van stijl en lay-out trager. content-visibility slaat het renderen van secties buiten beeld over tot ze dichtbij komen.
offsetHeight uitlezen na elke stijlwijziging dwingt telkens een lay-outberekening af. Lees eerst alles uit en schrijf daarna.
Een groot bestand verwerken of duizenden rijen sorteren kan in een worker draaien zonder klikken te blokkeren.
Met width en height reserveert de browser de ruimte voordat het bestand binnenkomt. CSS kan ze nog steeds responsief maken.
Kaarten, video's en iframes laden vaak laat. aspect-ratio houdt hun vak open.
Content die boven de tekst wordt ingevoegd die mensen lezen, duwt die tekst omlaag. Geef de plek vooraf een minimale hoogte.
Als het weblettertype wordt ingewisseld, kan tekst opnieuw afbreken. size-adjust op een lokale fallback brengt de breedtes dichter bij elkaar.
Iets verplaatsen met transform verplaatst geen andere elementen, dus het telt niet als layout shift.
Een balk die vaststaat aan de onderkant van het scherm verplaatst de pagina niet; een balk die bovenaan wordt ingevoegd wel.
Een tijdelijke laadweergave moet evenveel ruimte innemen als wat ervoor in de plaats komt.
Pagina's die uit de back/forward cache worden hersteld, verschijnen direct zonder nieuwe verschuivingen. Een unload-handler verhindert dat; gebruik in plaats daarvan pagehide.
Notities per platform
Afbeeldingen zijn meestal de boosdoener bij LCP; maak ze kleiner met de
Live meter voor deze pagina
Meet LCP, CLS en INP voor deze pagina in uw browser, waar dat wordt ondersteund.
Goed
Verbetering nodig
Slecht
Niet ondersteund in deze browser
INP (traagste tot nu toe)
Wachten op de grootste weergave
Klik of typ ergens om te meten
Gratis beginnen · Geen creditcard nodig