First Input Delay verlagen (supervaag probleem)

**M. Verlaan** · 29-01-2021, 10:08

Hallo,

Mijn site heeft een Pagespeed sore van 98%, alleen de First Input Delay (web vitals) van mijn website is te traag: gemiddeld 250 ms. Dat is vreemd, want de server is supersnel en er staat geen Javascript op mijn site en ook de CSS heeft er geen invloed op. Dit heb ik allemaal al uitgebreid getest.

Na lang zoeken ben ik er achter gekomen dat dit aan het inladen van de afbeeldingen ligt. Die zijn echter onder de 10 Kb. Bovendien maak ik gebruik van loading="lazy" in de img-tags. Ook maak ik gebruik van een CDN, maar dit heeft ook geen effect op de First Input Delay.

Ik heb overigens ergens gelezen dat je beter geen lazy loading kunt gebruiken als de afbeeldingen via een CDN worden ingeladen. Maar als ik loading=lazy weglaat geeft PageSpeed Insights aan dat de pagina juist trager inlaad. Hoe kan dit?

Het enige wat helpt is de afbeeldingen als een background-image via CSS inladen, maar dat wil ik liever niet.

Heeft iemand een tip om de First Input Delay te verlagen?

Alvast bedankt,

Martin

**M. Verlaan** · 30-01-2021, 18:21

Ik heb een mogelijke oorzaak gevonden: de browser koos verkeerde (te grote) header afbeeldingen, ondanks dat ik gebruik maak van "sizes" in de img tag. Ik heb dit hersteld met een plugin die wel afbeeldingen van het juiste formaat inlaadt.

Verder heb ik Vanishe Cache ingeschakeld, hopelijk draagt dit ook bij aan een snellere eerste invoervertraging.

Ik heb nu een nieuwe validatie/meting gestart in Search Console, dus ik wacht af of het geholpen heeft.

**M. Verlaan** · 11-04-2021, 10:29

Helaas heeft het allemaal niets geholpen en Vanish cache heb ik uitgezet omdat dit niet goed werkte.

Wie heeft de gouden tip om de First Input Delay op mobiele devices te verbeteren? Deze is voor een groep pagina's 244 ms en ik wil het terugbrengen naar 100 ms of minder. Zie:
https://developers.google.com/speed/...assing-50-jaar

Ik heb alle mogelijke optimalisaties geprobeerd, zoals:

PHP pagina's omzetten naar statische html pagina's
inline critical css
minimized css, javascript en html
TTFB verbeteren
afbeeldingen comprimeren
lazy loading
javascript minimaliseren
CDN

enzovoort...

Hierdoor heeft de site een bijna 100% Google Page Speed score, maar helaas hebben deze verbeteringen geen enkele invloed First Input Delay gehad. Bizar, want als ik andere sites vergelijk die zeer slecht scoren in Google Page Speed, valt het mij op dat die wel een lage First Input Delay hebben (boe! niet eerlijk!).

Het gaat hier overigens niet om een WordPress site, maar een zelfgebouwde.

Martin

**Ronnie de Bruin** · 11-04-2021, 11:41

Middag,

ik kan je helaas niet helpen :(

Maar bij zo'n score van 97% voor mobiel, en 99% desktop zou ik hier geen verdere energie insteken.

De 100% score heeft geen verdere invloed op gebruikers ervaring of zoekresultaten positie.

Succes ermee.

Groeten Ron :)

**M. Verlaan** · 11-04-2021, 12:09

De First Input Delay kan invloed (gaan) hebben op zoekresultaten en ik wil voorkomen dat bezoekers last hebben van de eerste invoer vertraging. Daarom wil ik deze verbeteren.

**B. van der Weerd** · 11-04-2021, 20:29

Zoals Ronnie de Bruin zegt: je pagespeed is meer dan prima, verspil hier verder geen tijd aan. Boven de 90 is echt oké mbt SEO (Google toont dat ook als groen/goed) je hoeft die laatste paar procent echt niet te halen.

**Antalus Patrick** · 11-04-2021, 23:17

Je moet de hoogte en breedte van de afbeeldingen vooraf bepalen, anders verschuift het content tijdens het laden. Je ziet dat ook terug bij je Google page speed, vergelijk de eerste en tweede afbeelding onder de labgegevens.

https://developers.google.com/speed/...Fantalus.nl%2F

Succes!

Met vriendelijke groet,
Patrick Verloo
Antalus

**J. Haan** · 12-04-2021, 07:57

Je hebt ook een cache-control ingesteld?

**M. Verlaan** · 12-04-2021, 08:22

Dat heb ik inderdaad gedaan (via het .htaccess bestand)

Origineel gepost door J. Haan

Je hebt ook een cache-control ingesteld?

**M. Verlaan** · 12-04-2021, 08:26

Alle afbeeldingen hebben het width en height attribuut. Wel zit de eerste afbeelding in een div waarvan de hoogte automatisch wordt vastgesteld. Daarom verschuift het waarschijnlijk, maar dit heeft voor zover ik weet geen invloed op de F.I.D.

Origineel gepost door Antalus Patrick

Je moet de hoogte en breedte van de afbeeldingen vooraf bepalen, anders verschuift het content tijdens het laden. Je ziet dat ook terug bij je Google page speed, vergelijk de eerste en tweede afbeelding onder de labgegevens.

https://developers.google.com/speed/...Fantalus.nl%2F

Succes!

Met vriendelijke groet,
Patrick Verloo
Antalus

**Arjen Zijlstra** · 13-04-2021, 09:27

Je kunt wel width en height meegeven echter als het bronbestand groter is dan de daadwerkelijke weergave wordt die alsnog geladen.

**M. Verlaan** · 13-04-2021, 13:34

Bedankt voor je opmerking Arjen. De afbeeldingen op de betreffende pagina zijn niet meer dan 242 pixels breed en lijken mij dus geschikt voor de meeste mobiele telefoons. Ik begrijp niet dat sites die een slechte pagespeed score hebben en geen geoptimaliseerde afbeeldingen inladen wel een lage First Input Delay kunnen hebben.

**M. Verlaan** · 09-08-2021, 17:03

Update:
Het probleem is sinds een maand spontaan verholpen terwijl ik niets gewijzigd heb en ook de hostingpartij niet.

**Cornelis de Leeuw van Weenen** · 26-08-2021, 05:59

Beste Martin,

Jammer dat ik nu pas deze topic van je tegenkom maar ik dacht dat het wel zo vriendelijk zou zijn je enige informatie te geven over je probleem.

Het FID de First Input Delay kan niet gemeten worden met Google page speed omdat Google dit meet op de website maar dan live. Dus jij zag dat dit niet goed was want er was nog niet voldoende informatie om deze waarde te bieden. Dit werd automatisch door Google verholpen nadat zij dit live op je website hebben kunnen meten.

Normaal wordt hiervoor de TTI genomen. Dit is de Time To Interactive. Dus de tijd totdat de website interactief is met de bezoeker.
Beide, FID en TTI, zijn dus eigenlijk zo goed als hetzelfde.

Dit heeft dus helemaal niets te maken met het laden van afbeeldingen, CDN en wat dan ook. Op jouw pagina staan knoppen en natuurlijk en het gaat erom hoe snel op die knoppen geklikt kan worden. Dat kan berekend worden als FID en TTI. Gezien je menu als eerst verschijnt en boven de vouw is had je het kunnen vergelijken met andere pagina's omdat de waarde min of meer hetzelfde zal zijn.

Voor de mensen die denken dat dit niet belangrijk is zou ik willen vragen waarom Google deze waarde dan live zou willen meten? Dit is voor mij nog steeds duister. Het heeft namelijk verder geen enkele invloed op de page speed score omdat de FID helemaal niet in de berekening voorkomt.

Verder moet ik je feliciteren met deze prestatie. Er zijn er maar weinig die 100/100 scoren. Niet dat het zo heel belangrijk is voor SEO, page speed en Web Vitals maar het is wel een hele prestatie.

Hopelijk heb ik je kunnen uitleggen waarom het ineens wel goed is. Als je meer vragen hebt, laat het gerust weten.

Groet

Cornelis...

**M. Verlaan** · 26-08-2021, 08:38

Bedankt voor de uitleg en het compliment Cornelis.

Mijn overstap naar andere hosting enkele maanden geleden heeft het probleem waarschijnlijk verholpen.

Verder denk ik dat het inladen van afbeeldingen wel degelijk invloed heeft op de FID omdat bij traag inladen het langer kan duren voor er knoppen verschijnen. Daarom maak ik ook gebruik van lazy loading.

Ik ga ervan uit dat een website met een goede FID-score makkelijker de strijd aan kan gaan met concurrenten die een slechte FID hebben. Bovendien biedt het een goede gebruikerservaring waar Google terecht veel waarde aan hecht.

Martin

First Input Delay verlagen (supervaag probleem)