Webfonts en Layout Shifts.

Het optimaliseren van webfonts die layout shifts veroorzaken, doe je voor een betere gebruikerservaring, niet voor een hogere Web Vitals-score, aangezien dit daar maar weinig invloed op heeft.

Geesteren, Twente

Op deze pagina:

Voor iedereen die geen idee heeft waarover dit gaat. CLS (Cumulative Layout Shift) gebeurt wanneer elementen op een webpagina onverwachts verschuiven terwijl je aan het kijken bent, bijvoorbeeld als tekst of afbeeldingen ineens verplaatsen.

De meest voor de hand liggende oorzaken van Layout Shifts

Afbeeldingen zonder vaste afmetingen

Afbeeldingen zonder vooraf gedefinieerde afmetingen worden vaak later geladen, omdat de browser niet direct weet hoeveel ruimte ze moeten innemen.

Als de afmetingen niet van tevoren zijn opgegeven, toont de browser eerst de rest van de pagina, en zodra de afbeelding is geladen, past hij de layout aan om deze in te voegen. Dit zorgt ervoor dat elementen rond de afbeelding kunnen verschuiven, wat een layout shift veroorzaakt.

Advertenties, video’s, embeds en iframes zonder vaste afmetingen

Hetzelfde geldt voor advertenties, video’s, embeds en iframes.

Door vooraf de breedte en hoogte te definiëren, weet de browser meteen hoeveel ruimte gereserveerd moet worden, zelfs voordat een afbeelding, video of advertentie is geladen. Zo voorkom je onverwachte verschuivingen.

Animaties die geen transform gebruiken

De CSS-eigenschap transform maakt animaties mogelijk zonder layout shifts te veroorzaken.

In plaats van de eigenschappen height en width aan te passen, gebruik je transform: scale();.

Om elementen te verplaatsen, vermijd het aanpassen van top, right, bottom of left en gebruik in plaats daarvan transform: translate();.

Webfonts

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ullamcorper dapibus nisl.

Dit is de meest voorkomende oorzaak, en grote ergernis van menig ontwikkelaar.

Waarom veroorzaken webfonts layout shifts?

Een browser laadt webfonts pas nadat de HTML en CSS zijn geladen. Pas op dat moment weet de browser welk lettertype, stijl en gewicht toegepast moeten worden. Tot die tijd wordt er een systeemfont of fallback-font weergegeven.

Een fallback-font is een font dat je zelf opgeeft in je CSS als alternatief voor het webfont, voor het geval het webfont niet beschikbaar is of niet kan worden geladen.

Tijdens het renderingproces gebruikt de browser de afmetingen en eigenschappen van de fallback-font om de grootte van de elementen waar de tekst in staat te bepalen.

Het verschil in hoogte en breedte tussen een webfont en het fallback-font kan ervoor zorgen dat het element (bijv. een paragraaf) waarin de tekst staat van grootte verandert. Dit veroorzaakt een layout shift.

Zijn mijn webfonts de oorzaak van de layout shifts?

Om daar achter te komen zijn er tal tools, maar die zijn niet altijd heel duidelijk of ze laten je betalen voor wat je makkelijk zelf kunt doen.

Ik ga ervan uit dat je de Chrome-browser geïnstalleerd hebt en je website lokaal aan testen bent in een development omgeving.

Open je pagina in een nieuw incognito venster, hoe minder invloed van extensies en andere toestanden des te beter.

  • Open DevTools en ga naar de Network.
  • Verander de laadsnelheid van No throttling naar Slow 4G.
  • Zie je geen Console drawer gebruik dan Esc voor Hide/Show Toggle.
  • Klik op de drie puntjes links onder en selecteer Rendering en zorg dat Layout Shift Regions aangevinkt is.
  • Als alternatief kun je ook de optie ‘Run Command’ gebruiken vanuit de drie puntjes in de rechterbovenhoek en zoeken naar ‘Rendering’.
DevTools-screenshot met netwerksnelheid en Layout Shift-weergave ingeschakeld.

Houdt DevTools open met deze instellingen totdat we klaar zijn.

Als je nu je pagina refresht zie paars/blauwe highlights op je pagina. Dit zijn de elementen die CLS (Cumulative Layout Shifts) veroorzaken.

Om er zeker van te zijn of deze worden veroorzaakt door webfonts kunnen we een paar tests uitvoeren. Probeer eerst je pagina te laden zonder webfonts, het makkelijkste kun je dit doen in je stylesheet door de font-family regel(s) tijdelijk aan te passen of te verwijderen.

Zie je na het refreshen van de pagina geen highlights meer op dezelfde plaatsen dan ligt het dus aan je webfonts. Zorg voor de volgende stap dat je webfonts weer geladen worden.

Specifieker kijken welke tekst schuldig is aan de CLS

  • Ga in DevTools naar de Performance tab.
  • Klik op de Reload Button.
  • Je webpagina zal verversen. Wacht tot het Perfomance panel klaar is met laden.
DevTools-screenshot die laat zien hoe je layout shifts kunt vinden die worden veroorzaakt door webfonts.
  • Selecteer de rij Layout Shifts. Nu zie je 1 of meerdere paarse blokjes.
  • Ga van links naar rechts en zoom in om alle shifts te vinden.
  • In de Network rij vind je de webfonts die geladen worden. Als een paars blokje in Layout Shifts begint aan het einde van een webfont heb je een probleem gevonden.
  • Het beste kun je alle blokjes in Layout Shifts rij checken om er zeker van te zijn dat je alles hebt gevonden.
  • Als je op een blokje klikt verschijnt er onder Summary informatie over de layout shifts.
  • Hover over een paars blokje of een Related Node en een highlight verschijnt bij de probleem-tekst.
  • Klik op een Related Node en DevTools neemt je mee naar de Elements tab en laat je zien welke HTML hierbij hoort.
  • Check meerdere pagina’s van je website, want niet elke pagina is hetzelfde.

Optimaliseer je webfonts en probeer ze zo snel mogelijk te laden.

  • Host zelf je fonts. Op deze manier laden de fonts snel en kunnen ze gecached worden.
  • Houd het aantal fontbestanden zo laag mogelijk. Niet meer dan twee font-families en drie weights per familie. Dat is echt het maximum. Mocht je meer willen dan moet je over gaan naar een variable font.
  • Upload alleen de fonts die je nodig hebt en gebruik alleen de woff2 extensie.
  • Om de bestandsgrootte van lettertypen te minimaliseren, kun je alleen de tekens opnemen die op de website worden gebruikt. Dit heet subsetting. Een goede Font Library biedt dit automatisch aan. Heb je een gratis font dan kun je het beste de webfont generator van Fontsquirrel gebruiken. Uiteraard zijn er ook NPM en composer tools maar daar ga ik nu niet op in.

Font Tip: De Google Webfont Helper – Host zelf Google fonts. Download de fonts in woff2 format met Latin subsetting ( + latin-ext als optie ).

Hoe zit het met preload? Ja, je zou het kunnen gebruiken maar ik weet niet wat je nog meer preload. Preload je te veel of met een verkeerde prioriteit dan heeft het negatieve gevolgen op de laadtijd en performance. Mocht je het toch willen doen, verdiep je er dan goed in!

Webfonts in FSE (Full Site Editing) Themes

Een FSE theme laadt de webfonts inline, als laatste stijl in de <head>-sectie, na alle andere CSS. Dit is op zich de beste en snelste manier om fonts te laden. Helaas veroorzaken veel themes nog steeds een render-blocking request en layout shifts doordat ze te veel andere stijlen en scripts laden. Dit komt vaak door overmatige custom CSS, plugins met slecht geladen assets.

Dus ook als je een FSE Theme gebruikt is het verstandig om een fallback font te gebruiken.

Het juiste fallback font kiezen

font-family: "Default-font", "Fallback-font", system-font;

Kies eerst een fallback font dat zoveel mogelijk lijkt op je webfont en algemeen beschikbaar is. Kijk daarbij niet alleen naar het lettertype maar ook naar letter-spacing, word-spacing, font-size en ruimtes boven en onder de karakters.

Veel voorkomende fallback fonts

  • Sans-Serif: Arial, Helvetica, Tahoma, Verdana, Helvetica Neue, Trebuchet MS, Geneva, Optima,
  • Serif: Times New Roman, Times, Georgia, Garamond
  • Monospace: Courier New, Courier

Voor degenen die niet weten hoe een bepaald fallback font eruitziet heb ik klein overzichtje van de meest voorkomende fallback-fonts gemaakt. Onder de tekst wordt er direct weergegeven wat de ascent en descent van de font is. Het beste is dat die zoveel mogelijk overeenkomen met jouw gekozen webfont om een layout shift te voorkomen.

Fallback font aanpassen met @font-face-descriptors

– Metrics zijn de eigenschappen van een lettertype.
– Met @font-face-descriptors kunnen we de metrics aanpassen.

Niet alle eigenschappen zijn aan te passen, maar met de volgende aanpassingen komen we een heel eind.

  1. size-adjust Hiermee pas je de grootte van het lettertype aan.
  2. ascent-override: Past de ascent-lijn van het lettertype aan (de ruimte boven de baseline voor letters als h, k, etc.)
  3. descent-override: Past de descent-lijn aan (de ruimte onder de baseline voor letters als g, j, p, etc.)
  4. line-gap-override: Bepaalt de ruimte tussen regels tekst.
Met de tekst Typografie Lettertypes wordt aangegeven waar de ascent, descent en line-gap zich bevinden.

De metrics van een webfont achterhalen

  • Google heeft een sheet met de metrics van bijna al een hun fonts.
  • Bij commerciële fonts staat het meestal in de specificaties of op de site van de fontdesigner.
  • Om er handmatig achter te komen ga je naar FontDrop en upload je een TTF bestand. Open het tabblad Data en scroll naar de hhea – Horizontal Header Table. Daar vind je de waarden: ascender, descender en line-gap.

Nadeel is dat er op het web geen universele vermeldingen van de metrics zijn (zie de tabel hieronder). We hebben de metrics in percentages nodig om ze te kunnen overschrijven.

SourceSans3-Regular.ttf ascentdescentline-gap
Google1.0240.40
Dropfont1024-4000
Mijn script1024400–
Omgerekend naar %102.4%40%0%

Font-face met fallback toevoegen aan je stylesheet

Voeg het volgende toe aan je stylesheet en pas aan wat voor jou van toepassing is. In de eerste regel zie je ‘font-display’ staan met enkele opties. Welke je moet kiezen, is aan jou. Voor het beperken van layout shifts is het echter belangrijk dat je de juiste kiest. Lees anders eerst mijn artikel: Controle over hoe tekst zich gedraagt met font-display.

@font-face {
  font-display: auto, block, swap, fallback of optional;
  font-family: "Default-font";
  font-weight: 400;
  font-style: normal;
  src: url("../default-font.woff2") format("woff2");
}

@font-face {
  font-family: Fallback-font;
  src: local("Arial");
  size-adjust: .%;
  ascent-override: .%;
  descent-override: .%;
  line-gap-override: .%;
}

body {
  font-family: "Default-font", "Fallback-font", system-font;
}

Sommige developers overschrijven de metrics van het custom-font. Dat kan prima, zolang het verschil met het fallback-font minimaal is. Houd er wel rekening mee dat dit invloed heeft op je hele design, omdat je hiermee ook de verhoudingen van het font in je CSS aanpast. Wil je dit toch doen, doe het dan vanaf het begin en niet achteraf.

Hoe gebruik je ascent-override, descent-override en line-gap-override?

Je hebt online tools als Font style matcher en Fallback Font Generator maar ik vind ze niet echt handig. Ze zijn niet heel nauwkeurig en je blijft erna vaak nog met een layout shift zitten.

Als je NPM gebruikt dan raad ik je Fontaine aan, moeilijker in gebruik maar creëert wel een goede fallback font. Ik snap dat Fontaine niet voor iedereen is weggelegd en dan ook liever iets makkelijker en overzichtelijks willen. Voor jullie en mijzelf, heb ik zoiets gemaakt.

Mijn Font Fallback Adjuster

Het afstemmen van fallback-fonts kan flink frustrerend zijn, vooral als je telkens online moet uploaden voor kleine aanpassingen. Met de Fallback Font Adjuster kun je dit voortaan helemaal lokaal doen.

Je kunt snel en makkelijk verschillende fonts en instellingen testen en het resultaat zie real-time veranderen. Perfect voor ontwikkelaars die direct en effectief willen finetunen.

Download de Fallback Font Adjuster op GitHub of lees eerst hoe je de Fallback Font Adjuster het beste kunt gebruiken.