Core Web Vitals: Hoe de Prestatievalkuilen van Weblettertypen te Vermijden

Webfonts geven persoonlijkheid aan je site, maar ze voegen ook gewicht toe.

En als je lettertypen te lang duren om te laden, blijven gebruikers staren naar een leeg scherm. Nog erger, je site kan instabiel lijken als tekst onverwacht verschuift.

Dit schaadt ook de Core Web Vitals — de statistieken die direct van invloed zijn op je zoekrangschikking en gebruikerservaring.

Hier telt elke milliseconde.

Dus, hoe kun je je keuze voor webfonts behouden zonder prestaties op te offeren?

Laten we het stap voor stap uitleggen.

Maar eerst, wat zijn precies websafe lettertypen en web lettertypen?

Wat Zijn Webveilige Lettertypen?

Web safe fonts zijn de beproefde opties die overal werken. Het zijn lettertypen die de meeste apparaten al hebben, wat betekent dat je erop kunt rekenen dat ze snel laden.

Hier zijn de websafe lettertypen die je kunt gebruiken:

• Arial
• Times New Roman
• Verdana
• Trebuchet MS
• Courier
• Impact
• Georgia
• Comic Sans MS

Zelfs met beperkte keuzes kan een ervaren ontwerper deze lettertypen creatief gebruiken.

Maar, websafe lettertypen worden vaak te veel gebruikt en geven je website een “gelijksoortig” gevoel — zelfs als je veel moeite en geld hebt gestoken in het ontwerpen van de website.

Hoe maak je het mooier?

Met webfonts.

Wat Zijn Webfonts?

Webfonts stellen je in staat om afstand te nemen van de vaak te veel gebruikte websafe-lettertypen.

In plaats van te vertrouwen op lettertypen die beschikbaar zijn op het apparaat van een gebruiker, kunnen webfonts worden gedownload van een externe bron zoals Google Fonts of rechtstreeks vanaf je server naar het apparaat van je gebruiker (tijdelijk).

Dit stelt je in staat om elk aangepast lettertype te gebruiken dat past bij je merk of ontwerpbehoeften.

We hebben ook de beste Google fonts samengesteld om je te helpen beginnen.

Wanneer een gebruiker jouw site bezoekt, wordt het webfont tijdelijk gedownload en toegepast op de tekst met de @font-face regel in CSS.

Webfonts gedragen zich dan als lokale fonts — Ze passen zich automatisch aan de schermformaten aan terwijl je website er scherp uit blijft zien.

Lettertypes zijn in de loop van de tijd ook geëvolueerd naar efficiëntere opslagformaten. Net als beeldformaten hebben lettertypes TTF, WOFF, WOFF2 en EOT.

• Embedded OpenType (EOT): Compatibel met oudere versies van Internet Explorer (onder IE9). Standaard niet gecomprimeerd, maar GZIP-compressie kan worden toegepast.
• TrueType (TTF): Ondersteund door oudere Android-browsers (onder versie 4.4). Standaard niet gecomprimeerd, maar kan GZIP-gecomprimeerd worden.
• Web Open Font Format (WOFF): Ondersteund door de meeste moderne browsers en bevat ingebouwde compressie.
• Web Open Font Format 2 (WOFF2): Compatibel met browsers die het ondersteunen, met aangepaste compressiealgoritmes die de bestandsgrootte met ongeveer 30% verminderen vergeleken met andere formaten.

De moderne formaten bieden compressie voor betere prestaties en helpen het ontwerp van je site zowel functioneel als visueel onderscheidend te houden.

Wat Zijn Kern Web Vitals (CWV) Metrics?

Hier is het ding: Google wil dat al zijn gebruikers een uitstekende ervaring hebben.

Welke website of app de gebruikers van Google de beste ervaring biedt, krijgt meer “liefde” van Google’s algoritmen.

En hoe wordt deze “ervaring” gemeten?

Google lanceerde in het begin van 2020 Core Web Vitals juist voor dat doel.

CWV is een set van drie metrics die Google vertellen hoe jouw website of app presteert voor de gebruikers die zij daarheen sturen.

Hogere scores op deze meetwaarden kunnen je helpen hoger te scoren op Google. Laten we deze meetwaarden snel doornemen.

Grootste Inhoudelijke Verf (LCP)

LCP meet hoe lang het duurt voordat het grootste zichtbare element op je pagina is geladen.

Dit is doorgaans een afbeelding of video maar kan ook een groot blok tekst of een ingesloten video zijn.

Hoe sneller dit gebeurt, hoe beter jouw site presteert in de ogen van zowel gebruikers als zoekmachines.

Een goede LCP-score betekent dat gebruikers niet hoeven te wachten tot je belangrijkste inhoud verschijnt.

Interactie Tot Volgende Verfbeurt (INP)

INP meet de tijd tussen een interactie van een gebruiker (zoals klikken of tikken) en wanneer de pagina visueel reageert.

Het geeft een nauwkeuriger beeld van interactiviteit dan FID, omdat het de volledige gebruikersreis in overweging neemt in plaats van alleen de eerste interactie.

Een lage INP-score betekent dat je site responsief aanvoelt, wat de gebruikersbetrokkenheid en tevredenheid verbetert.

Cumulatieve Layoutverschuiving (CLS)

CLS meet hoe stabiel je pagina is tijdens het laden.

Wanneer elementen onverwacht bewegen, frustreert dit gebruikers en maakt de pagina onbetrouwbaar overkomen.

Een lage CLS-score betekent dat je pagina soepel laadt, zonder lay-outverschuivingen die de gebruikerservaring verstoren.

Hoe Webfonts Optimaliseren Voor Betere Core Web Vitals

Dus, wat is al die drukte over de prestaties van webfonts?

Waarom kunnen we niet gewoon webfonts toevoegen en het daarbij laten? Nou, dat kan je.

Maar zoals we eerder hebben besproken, zijn web fonts niet lokaal. Ze worden opgehaald van een server, gedownload en toegepast op je site, en daar ligt het probleem.

Het kost tijd.

En als het te lang duurt, beïnvloedt het je Core Web Vitals en websiteconversieratio.

Laten we eens kijken naar enkele manieren om webfonts te optimaliseren voor betere kernwebvitaliteit.

1. Lettertypen Voorladen

Je wilt dat je lettertypen klaar zijn op het moment dat de pagina begint te laden.

Dus wanneer de pagina klaar is voor de gebruiker, is het lettertype dat ook.

Dat wordt voorladen genoemd.

Preloading zegt tegen de browser, “Hé, dit lettertype is belangrijk. Laad het alstublieft meteen.“

Stel je voor dat je het populaire Google-font, Roboto gebruikt.

Je moet een enkel attribuut toevoegen aan je HTML-code om het lettertype vooraf te laden: rel = “preload”

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="font" type="font/woff2" crossorigin

Hierna weet de browser dat het prioriteit moet geven aan het downloaden van Roboto, zodat je tekst sneller verschijnt met het juiste lettertype.

Hierdoor wordt de tijd die nodig is om het grootste tekstblok (LCP) te renderen verkort, zodat gebruikers sneller de definitieve versie van je site zien.

2. Beheer Het Laden Van Lettertypen Met De Font-Display Eigenschap

Echter, voorladen kan de initiële laadtijd iets verhogen omdat de lettertypen prioriteit krijgen.

De font-display eigenschap laat je beheersen hoe jouw tekst zich gedraagt terwijl aangepaste lettertypen nog steeds laden.

Dit kan je helpen om de gevreesde Flash of Invisible Text (FOIT), waar gebruikers lege ruimtes zien, en de Flash of Unstyled Text (FOUT), waar de pagina met vervangende lettertypen verschijnt voor een seconde en onmiddellijk overschakelt naar aangepaste lettertypen, te vermijden.

De font-display eigenschap heeft vier manieren om tekstgedrag te beheren: block, swap, fallback en optional.

Laten we naar de twee kijken die je nodig zou hebben.

font-display: swap — Deze optie is de veiligste keuze voor de meeste sites. Het zorgt ervoor dat tekst onmiddellijk verschijnt met een vervangend lettertype en wisselt naar het aangepaste lettertype zodra het klaar is.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: swap;
}

Hier zal het reserve lettertype (zoals Arial of een ander systeemlettertype) onmiddellijk laden, waardoor de pagina leesbaar blijft.

Wanneer Roboto is gedownload, vervangt het het reservelettertype zonder een lege ruimte op het scherm achter te laten.

Hier is een demo van hoe font-display swap zich gedraagt in de echte wereld.

font-display: optional — Als je bezorgd bent om snelheid, vertelt dit de browser om het aangepaste lettertype over te slaan als het niet snel genoeg laadt. Dit werkt als het je niet uitmaakt of de vervanger blijft staan.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: optional;
}

Deze optie is logisch als prestatie belangrijker is dan ontwerp, waardoor het perfect is voor een site die volledig om snelheid draait.

Hier is een voorbeeld van hoe dit eruitziet in de echte wereld. Je zult de wisseling hier niet opmerken aangezien de meeste lettertypen snel genoeg laden.

Echter, het optionele argument is geweldig voor het geval je fontserver uitvalt of traag is.

3. Subsets Van Lettertypen

De meeste lettertypen bevatten honderden, zelfs duizenden, karakters.

De kans is groot dat je maar een klein deel daarvan nodig hebt. Het verwijderen daarvan wordt lettertype-subsetting genoemd.

Ja, je kunt onnodige tekens verwijderen om de bestandsgrootte van het lettertype te verminderen.

Stel je voor dat je site alleen Engelse karakters nodig heeft.

Een hulpmiddel zoals FontTools kan je helpen om je lettertype te subselecteren zodat alleen de karakters die je echt gaat gebruiken opgenomen worden.

Dit betekent dat alle Unicode-tekens die niet nodig zijn in de Engelse taal verwijderd kunnen worden om de bestandsgrootte te besparen.

Hiermee wordt de bestandsgrootte verkleind van bijvoorbeeld 80 KB naar 30 KB.

Kleinere bestanden betekenen snellere downloads, wat zowel LCP als CLS verbetert omdat het lettertype snel laadt en de lay-out niet verschuift.

Hier is een voorbeeld van hoe je alles behalve Engelse karakters zou verwijderen met FontTools:

pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F

Nu bevat je Roboto-font alleen de basis Latijnse karakters die nodig zijn voor Engelse tekst, waardoor het veel sneller laadt.

Als je een op GUI gebaseerde aanpak prefereert, kun je ook font-squirrel proberen. Zodra je een lettertypebestand uploadt, krijg je vrij veel aanpassingsopties om toe te voegen of te verwijderen

4. Lettertypen Comprimeren

Moderne lettertypeformaten zoals WOFF2 bieden compressie die de lettergrootte met tot wel 30% kan verminderen in vergelijking met oudere formaten zoals TTF.

Het gebruik van de meest gecomprimeerde versie van je lettertype kan de impact op de laadtijd van de pagina aanzienlijk verminderen.

Bijvoorbeeld, hier is hoe je kunt zorgen dat je WOFF2 gebruikt:

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2'),
       url('roboto.woff') format('woff');
  font-weight: 400;
}

Zo zullen browsers die WOFF2 ondersteunen dit standaard gebruiken, wat de laadtijden vermindert terwijl nog steeds een scherp, hoogwaardig lettertype wordt weergegeven.

Echter, als een browser geen WOFF2 kan gebruiken, valt deze terug op WOFF.

5. Base64-Codering

Dit is een andere veelgebruikte praktijk om je webfonts te optimaliseren.

Je moet echter voorzichtig zijn met wanneer je Base64-gecodeerde lettertypen gebruikt.

Base64-codering is het meest nuttig voor kleine lettertypen of iconen.

Als het te veel gebruikt wordt, kan je de CSS laten opzwellen, waardoor de laadtijd van de pagina meer toeneemt dan wanneer je alleen het lettertype gebruikt.

Als je Base64-codering voor een icoonlettertype wilt gebruiken, zou je eerst het lettertypebestand naar Base64-formaat moeten converteren. Zo zou het eruit kunnen zien:

@font-face {
  font-family: 'CustomIcons';
  src: url('data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Deze methode werkt goed voor kleine icoonlettertypen die je vaak over de hele site gebruikt.

Het CSS-bestand wordt geladen met het ingesloten lettertype, waardoor een extra HTTP-verzoek wordt geëlimineerd.

Maar vermijd dit voor grote lettertypen, omdat het het initiële renderen van de pagina kan vertragen.

6. <link> vs. CSS @import voor Lettertypen

<link> en @import hebben een aanzienlijk verschil in laadprestaties.

De <link>-tag laadt lettertypen asynchroon, wat betekent dat het de rest van je pagina niet tegenhoudt bij het renderen, terwijl @import een beetje trager is.

Gebruik <link> waar mogelijk.

“Voor 90%+ van de gevallen wil je waarschijnlijk de <link> tag gebruiken. Als vuistregel wil je @import regels vermijden omdat ze het laden van de opgenomen bron uitstellen totdat het bestand is opgehaald.” Ilya Grigorik, Ingenieur en Technisch Adviseur van de CEO bij Shopify

Het laadt lettertypen onafhankelijk, waardoor de rest van de pagina kan laden zonder te wachten op het lettertypebestand.

<link rel="stylesheet" href= "https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">

Dit is de voorkeursmethode voor het laden van Google Fonts of vergelijkbare externe lettertypeservices.

In de <head> sectie van je HTML geplaatst, zorgt dit ervoor dat het lettertype vroeg begint met laden zonder andere bronnen te blokkeren.

Vermijd @import voor cruciale lettertypen.

@import wacht tot het CSS-bestand volledig is geladen, wat de laadtijd kan verhogen en de LCP kan schaden.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

Het gebruik van @import voor lettertypen werkt alleen voor secundaire of minder belangrijke lettertypen. Vermijd het gebruik ervan voor alles op het eerste scherm met inhoud.

7. Visuele Verschuivingen/CLS Verminderen Met Lettertypeafstemming en Grootteaanpassing

Visuele verschuivingen — of cumulatieve layoutverschuivingen (CLS), zoals Google ze noemt— vinden plaats wanneer de layout onverwachts verandert, vaak door lettertypeverwisselingen.

Om dit effect te minimaliseren, kies vervangende lettertypen die nauw aansluiten bij de stijl en afmetingen van je aangepaste lettertype.

De CSS size-adjust eigenschap laat je ook toe om de grootte van het reserveteken te beheersen, waardoor visuele verschuivingen worden verminderd wanneer het aangepaste lettertype wordt geladen.

Als je aangepaste lettertype Roboto is en een reservelettertype, pas dan de grootte aan om overeen te komen met Roboto, waardoor de overgang bijna naadloos is.

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
}

Hier zorgt de fallback van Roboto (bijv. Arial) voor een consistente grootte, waardoor eventuele merkbare bewegingen worden verminderd wanneer Roboto volledig geladen is.

Zodra je de grootte en afstand van het reservelettertype uitlijnt met je aangepaste lettertype, zorg je ervoor dat wanneer Roboto Arial vervangt, de verschuiving minimaal is, waardoor CLS laag blijft en de gebruikerservaring verbetert.

8. Vind de Juiste Plaats om Webfonts te Hosten

Zelf je lettertypen hosten betekent niet altijd een snellere prestatie.

Veel opties van derden presteren ook goed—en soms kunnen ze zelfs sneller laden.

De Web Almanac heeft ontdekt dat bepaalde sites met lettertypen van derden sneller werden weergegeven dan die met zelf-gehoste lettertypen.

Uiteindelijk hangt de prestatie van lettertypen minder af van de keuze voor hosting en meer van drie sleutelfactoren:

• Content Delivery Network (CDN): Zorgt voor snellere levering door lettertypen vanuit meerdere locaties wereldwijd te serveren.
• HTTP/2: Verhoogt de laadsnelheid door meerdere verzoeken tegelijk af te handelen, waardoor de latentie vermindert.
• Web Caching Policy: Cacheert lettertypen efficiënt, zodat ze niet bij elk bezoek opnieuw hoeven te worden gedownload.

In plaats van vast te lopen in de hostingdiscussie, richt je op het instellen van deze essentiële zaken om je lettertypen soepel te laten laden, ongeacht waar ze gehost zijn.

Hoe Je Webprestatieoptimalisatie Kunt Vereenvoudigen

Als de bovengenoemde technieken te betrokken aanvoelen, kan een plugin zoals Jetpack het makkelijk maken.

Jetpack, ontwikkeld door Automattic (de makers van WordPress), is een alles-in-één oplossing speciaal gebouwd voor WordPress-sites.

Het combineert essentiële functies voor beveiliging, prestaties en marketing, allemaal beheerd vanaf één platform.

Ook als je niet technisch onderlegd bent, kan Jetpack helpen om de snelheid van de site te verbeteren, de beveiliging te versterken en de gebruikerservaring te verbeteren. (Geen complexe instellingen nodig!)

Creëer De Perfecte Balans Tussen Schoonheid En Prestatie

Webfonts geven je site een unieke, mooie uitstraling.

Echter, zonder de juiste aanpassingen, kunnen ze het ook vertragen en gebruikers frustreren.

Terwijl we essentiële technieken voor lettertypeoptimalisatie hebben behandeld, omvat het verfijnen van prestaties talloze technische details.

En de beste resultaten behalen kan overweldigend aanvoelen.

Daar komen de professionele webontwikkelingsdiensten van DreamHost van pas.

We zorgen ervoor dat je site mooi en geoptimaliseerd is voor snelheid en gebruikerservaring.

Laat ons de technische details afhandelen terwijl jij je concentreert op het bouwen van een website die echt opvalt.

---

Deze pagina bevat affiliatielinks. Dit betekent dat we mogelijk een commissie verdienen als je diensten koopt via onze link zonder extra kosten voor jou.