Het designteam wil een hoogwaardige video op de homepage, het marketingteam wil tracking-, chat- en pop-uptools toevoegen, terwijl het developmentteam vreest dat de website steeds trager wordt.

Aan de wensen van alle drie de teams kan tegelijk worden voldaan, mits aan het begin van het project een performancebudget is vastgesteld. Als afbeeldingen pas worden gecomprimeerd en scripts pas worden verwijderd nadat de website af is, zijn de aanpassingskosten meestal hoger.

Google verving FID in maart 2024 door INP. Core Web Vitals bestaan nu uit LCP, INP en CLS. Google geeft tegelijk aan dat page experience geen afzonderlijk rankingsignaal is; Core Web Vitals worden wel door de rankingsystemen gebruikt, maar goede scores garanderen geen hogere positie. Relevante en nuttige content blijft belangrijker.

Snelheid beïnvloedt conversie, maar gemiddelden zijn niet één op één toepasbaar

In Deloitte's onderzoek 'Milliseconds Make Millions' werd bij een deel van de geteste mobiele websites waargenomen dat een verbetering van de laadtijd met 0,1 seconde gepaard ging met gemiddeld 8,4% meer retailconversies en een 9,2% hogere gemiddelde orderwaarde. Het onderzoek toont een correlatie tussen snelheidsverbetering en conversieverandering, maar bewijst niet dat elke verbetering van 0,1 seconde automatisch dezelfde stijging oplevert.

Praktischer is om real-user data vóór en na een websitewijziging vast te leggen en vervolgens veranderingen in productweergaven, CTA-klikken, formulieren en bestellingen te vergelijken.

Bekijk eerst real-user data en bepaal daarna waar het technische probleem zit

De officiële drempelwaarden voor Core Web Vitals worden gemeten op het 75e percentiel, met afzonderlijke gegevens voor mobiel en desktop:

• LCP: 2,5 seconden of minder
• INP: 200 milliseconden of minder
• CLS: 0,1 of lager

Chrome UX Report, PageSpeed Insights en Search Console geven inzicht in de ervaring van echte gebruikers. Lighthouse is geschikter om tijdens ontwikkeling en testen problemen te vinden; omdat laboratoriumtests geen echte interacties bevatten, kunnen ze de volledige INP niet rechtstreeks meten.

LCP: geef prioriteit aan de hoofdcontent van de homepage

De hero image of een grote banner op de homepage is vaak het LCP-element. Mogelijke optimalisaties zijn:

• lever per apparaat een passend afbeeldingsformaat;
• gebruik WebP of AVIF;
• comprimeer afbeeldingen zonder onnodig kwaliteitsverlies;
• laad potentiële LCP-afbeeldingen met prioriteit;
• verbeter de serverrespons en CDN-configuratie.

Belangrijke afbeeldingen in het eerste scherm, vooral mogelijke LCP-afbeeldingen, mogen niet blindelings met lazy loading worden geladen. Afbeeldingen lager op de pagina zijn wel geschikt voor uitgesteld laden.

WordPress-websites worden vaak zwaarder door page builders, plug-ins en niet-geoptimaliseerde afbeeldingen. Raadpleeg informatie over de WordPress-websitearchitectuur en over de optimalisatie van de onderliggende performance om thema's, plug-ins, databases en cacheconfiguratie te controleren.

INP: vind de taken die klikreacties vertragen

INP meet hoe lang het duurt voordat de website na een klik, aanraking of toetsenbordactie de volgende visuele update toont.

Veelvoorkomende oorzaken zijn:

• te veel third-party tracking- en chattools;
• lange JavaScript-taken die de main thread blokkeren;
• een te grote DOM;
• complexe event handlers;
• veel rendering die na een klik synchroon wordt uitgevoerd.

Zoek bij optimalisatie eerst de traagste echte interactie, splits lange taken op, stel niet-essentiële scripts uit en verklein het deel van de interface dat in één keer moet worden bijgewerkt. Google's INP-richtlijnen adviseren eveneens 200 milliseconden of minder als goede streefwaarde.

CLS: voorkom dat content plotseling verspringt

CLS wordt in artikelen over visueel ontwerp vaak over het hoofd gezien, maar heeft direct invloed op de bediening. Afbeeldingen zonder ingestelde afmetingen, wisselende fonts, cookiebanners en laat ingevoegde advertenties kunnen een knop vlak vóór een klik plotseling laten verschuiven.

Reserveer breedte en hoogte voor afbeeldingen, video's en embedded elementen; houd ook ruimte vrij voor vaste meldingen en promotiebanners, zodat bestaande content na het laden niet omlaag wordt gedrukt. Een CLS van 0,1 of lager valt binnen de goede bandbreedte.

In onze eerdere performance-audits van bedrijfswebsites bleek het probleem vaak niet één te grote afbeelding, maar een homepage die tegelijk een carousel, video, chattool, cookie-managementplatform en meerdere trackingscripts laadde. Deze resources beïnvloeden respectievelijk het laden van afbeeldingen, werk op de main thread en layoutstabiliteit. Daarom moeten LCP, INP en CLS meestal samen worden geanalyseerd, in plaats van slechts één score te optimaliseren.

Stel een Performance Budget op

Vóór het webdesign begint, kunnen de volgende zaken worden vastgelegd:

• doelwaarden voor LCP, INP en CLS;
• de maximale bestandsgrootte van afbeeldingen in het eerste scherm;
• het JavaScript-budget voor de eerste load;
• goedkeuringsregels voor third-party scripts;
• de laadstrategie voor fonts en video;
• performance-regressietests vóór elke release.

De website kan eerst via een technische SEO-audit een baseline vastleggen en Core Web Vitals, indexeringsstatus, JavaScript-loading en mobiele performance controleren.

Als een extern team bij het project betrokken is, moet bij de beoordeling van SEO/SEM-diensten worden nagegaan of de scope Field Data-analyse, een lijst met performanceproblemen, aanbevelingen voor wijzigingen en hertests omvat, in plaats van alleen één PageSpeed-score.

De relatie tussen websitesnelheid en SEO

De relatie tussen websitesnelheid en SEO moet nog steeds in samenhang worden beoordeeld met contentkwaliteit, zoekintentie en technische crawlbaarheid. Performanceoptimalisatie betekent niet dat alle afbeeldingen, video's en animaties moeten worden verwijderd; een video op de homepage kan blijven, maar controleer of deze LCP beïnvloedt. Een chattool kan eveneens worden gebruikt, mits het laadmoment onder controle wordt gehouden en INP wordt gemonitord.