Afbeelding voor Leren over websiteoptimalisatie tijdens Core Web Vitals-cursus van Erwin Hofman

Leren over websiteoptimalisatie tijdens Core Web Vitals-cursus van Erwin Hofman

Een groot deel van het team heeft op 15 september inspiratie opgedaan tijdens een Core Web Vitals-cursus van Erwin Hofman. Met het Goffertstadion van N.E.C. als toneel was het een leerzame, maar zeker ook een gezellige dag.

Wacht even. Core Web Vitals?

Yes. Een terugkerend topic in de websitewereld. Veel website-eigenaren zijn bekend met de PageSpeed Insights tool van Google. Je vult een URL in en Google laat enkele prestatiemetingen erop los, zoals de Core Web Vitals. Bovenaan de pagina staat een score van 1 tot 100. Dit zegt dan iets over de prestaties van je website. En wanneer Google wat zegt, spitsen website-eigenaren de oren. De wens is om de score omhoog te krijgen, want ‘dat is goed voor SEO‘. Linku: los het maar op.

Als websitemakers krijgen we van onze opdrachtgevers steeds vaker de vraag om technische optimalisaties toe te passen op basis van PageSpeed Insights. Vanuit verschillende hoeken krijgen we rapporten, suggesties en aanbevelingen. Zonder duidelijk te weten wat het oplevert, gaan we daarmee aan de slag. Soms gaat de score omhoog, maar soms ook niet. Zoiets gaat knagen, want we krijgen dan het gevoel voor Google te werken en niet per definitie voor de gebruiker. Uiteindelijk willen we klanten beter maken, en PageSpeed Insights is daarin een grijs gebied. Meer kennis was gewenst over alle metingen en de impact daarvan op de ranking.

Tijd voor een expert: Erwin Hofman

Collega Bart volgde al een tijdje een expert omtrent technische SEO: Erwin Hofman (LinkedIn). Hij deelt veel nuttige bevindingen in het gebied van Core Web Vitals. Ook voorziet hij in in-house trainingen. De connectie was snel gemaakt en op 15 september kwamen we samen met bijna alle developers, projectmanagers en marketeers. Met het betrekken van alle competenties wilden we een organisatiebreed begrip creëren voor Core Web Vitals en hoe we we daarmee omgaan.

We vonden het ook belangrijk hier een mooie dag van te maken. Het podium was speciaal: de persruimte in het Goffertstadion. Een plek buiten kantoor waar we elkaar konden ontmoeten. Naast het opdoen van kennis, stond de dag namelijk ook in het teken van ‘reconnecten’. De corona-maatregelen staan ons weer toe om elkaar te zien en is het belangrijk om daar gebruik van te maken. Samen dingen leren én erover praten tijdens een hapje en drankje. Dat zorgt voor inspiratie om echte stappen te maken.

Erwin Hofman introduceert zijn cursus
Erwin Hofman introduceert zijn cursus

Zo zag de dag eruit

Met enkele doorweekte koppies en gebroken Vitesse-fans begonnen we de regenachtige ochtend met een algemene introductie over PageSpeed Insights en Core Web Vitals. Enkele quizvragen later bleek projectmanager Fleur alle developers te slim af te zijn. Props! Na de ochtendsessie gingen we allemaal een hapje eten.

Fleur is blij met de hoogste score. Op haar verjaardag nog wel!
Fleur is blij met de hoogste score. Op haar verjaardag nog wel!
Een welkome lunch om de eerste lessen te verwerken
Een welkome lunch om de eerste lessen te verwerken

In de middag werd het technischer. De ontwikkelaars bleven over en doken in de code en geheimen die schuilgaan achter de Core Web Vitals. Enkele klantcases werden besproken en eerste ideeën voor optimalisatie op papier gezet. We sloten de dag af met een borrel.

Wat hebben we geleerd

Wist je dat de score bovenaan de PageSpeed Insights geen invloed heeft op de ranking van je website? Het Core Web Vitals-gedeelte wél. Dit beseffen veel mensen niet. Staar je dus niet blind op de score.

Dit was slechts een van de vele lessen op de cursusdag. Veel andere zijn van technische aard. Die gaan we met een nieuw CWV-team uitwerken tot een tastbaar plan. Met deze kartrekkers verwachten we zowel bestaande als nieuwe klanten te kunnen voorzien van technisch geoptimaliseerde websites binnen het kader van Core Web Vitals. We kunnen al mooie websites maken, maar voor een perfecte website moeten we de details opzoeken. Een van die details is technische optimalisatie, waar Core Web Vitals onder valt. We delen graag een tipje van de sluier.

Technische lessen in een notendop

Bij PageSpeed Insigths zijn er altijd twee soorten gegevens te zien. De veldgegevens en de labgegevens. Veel developers kijken vaak naar de labgegevens want die kunnen ze tijdens het ontwikkelen van een site al testen. Labdata wordt echter getest onder de slechtste omstandigheden en is vaak totaal geen representatieve weergave van hoe de gebruiker de website ervaart. De veldgegevens zijn dat wel en deze zijn (met name in welvarende landen als Nederland) vaak beter. Daarnaast zijn de veldgegevens ook de gegevens die gebruikt worden voor de Core Web Vitals. Overigens niet allemaal: alleen de First Input Delay (FID), de Largest Contentful Paint (LCP) en de Cumulative Layout Shift (CLS).

Verder goed om te weten voor developers:

  • Al die scripts van derde partijen om bijvoorbeeld metingen uit te voeren op de site? Die hebben helemaal geen invloed op de CWV, mits correct geplaatst en geconfigureerd.
  • Lazy load alles! Behalve afbeeldingen boven de vouw, deze moeten direct zichtbaar zijn.
  • Gebruik transform voor animaties want transform maakt gebruik van de GPU in plaats van de CPU en de GPU wordt niet meegenomen in de CWV.
  • Content-visibility: none zorgt ervoor dat content niet geladen wordt. Dit is dus beter dan een display:none.

Bonustip: Een afbeelding full viewport dimensions geven zorgt ervoor dat Google de afbeelding als decoratief beschouwt.

Samen een stapje omhoog

Uiteindelijk kijken we terug op een mooie en leerzame dag. Uit je hokje getrokken worden en samen kennis opdoen, geeft ons energie om te groeien en de kwaliteit van onze producten te verbeteren. Zeker in een tijd waar we elkaar weer moeten vinden.

Het team van de dag!
Het team van de dag!

 

Nieuwsbrief sfeerbeeld