Lettertypen sneller laden
Implementeer `font-display`, preloading en subsetting om ervoor te zorgen dat webfonts efficiënt worden geladen zonder layoutverschuivingen te veroorzaken.
Lettertypen sneller laden is een gratis Webprestatieoptimalisatie en Lighthouse-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Webprestatieoptimalisatie en Lighthouse. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Webprestatieoptimalisatie en Lighthouse bevat in totaal 4 lessen.
Waarom lettertypen optimaliseren?
Weblettertypen maken websites mooi en uniek, maar kunnen ook een belangrijke oorzaak van prestatieknelpunten zijn. Grote lettertypebestanden betekenen langere downloadtijden, wat rechtstreeks invloed heeft op de algehele snelheid en gebruikerservaring van je site.
Het langzaam laden van lettertypen kan leiden tot problemen zoals 'Flash of Unstyled Text' (FOUT) of 'Flash of Invisible Text' (FOIT). In deze les leer je praktische technieken om lettertypen efficiënt te laden.
Het laden van lettertypen beheren met `font-display`
De CSS-eigenschap font-display geeft je controle over hoe weblettertypen worden geladen en weergegeven. De eigenschap vertelt de browser welke strategie moet worden gebruikt terwijl een lettertype nog wordt gedownload, en helpt zo abrupte visuele verschuivingen te voorkomen.
auto: Het standaardgedrag van de browser.block: Een korte blokkeerperiode (onzichtbare tekst), gevolgd door onbeperkt wisselen.swap: Een zeer korte blokkeerperiode (onzichtbare tekst), gevolgd door onbeperkt wisselen.fallback: Een zeer korte blokkering, daarna kort wisselen en vervolgens permanent terugvallen.optional: Een zeer korte blokkering, niet wisselen en permanent terugvallen.
`font-display: swap` in de praktijk
font-display: swap is een populaire keuze om prestaties en vormgeving in balans te houden. De browser gebruikt dan direct een terugvallettertype. Zodra je aangepaste weblettertype is gedownload, wordt dit ingevoegd en vervangt het het terugvallettertype.
Zo blijft tekst altijd zichtbaar en krijgt leesbaarheid van de inhoud tijdens het eerste laden voorrang op de vormgeving van het lettertype.
@font-face {
font-family: 'MyWebFont';
src: url('mywebfont.woff2') format('woff2');
font-display: swap;
}Strategieën met `optional` en `fallback`
Andere waarden van font-display bieden andere afwegingen:
fallback: Geeft het aangepaste lettertype een zeer korte blokkeerperiode (ongeveer 100 ms) en een korte wisselperiode (ongeveer 3 seconden). Als het aangepaste lettertype binnen deze tijden niet gereed is, wordt permanent een terugvallettertype gebruikt.optional: Werkt vergelijkbaar metfallback, maar de browser bepaalt op basis van de netwerkomstandigheden of het aangepaste lettertype überhaupt wordt gedownload. Als het lettertype niet snel wordt gedownload, wordt permanent het terugvallettertype gebruikt, zodat verschuivingen in de lay-out worden voorkomen.
Kritieke lettertypen vooraf laden
Normaal gesproken ontdekt een browser lettertypen tijdens het parseren van je CSS. Met vooraf laden kun je de browser echter vertellen een resource eerder op te halen dan deze normaal zou worden ontdekt.
Voor lettertypen betekent <link rel="preload"> dat de browser al kan beginnen met downloaden voordat de CSS waarin ze worden gebruikt volledig is geparseerd. Hierdoor wordt de tijd totdat tekst met het juiste lettertype wordt weergegeven aanzienlijk verkort.
Een lettertype vooraf laden
Je kunt lettertypen vooraf laden door een <link>-tag toe te voegen aan de sectie <head> van je HTML. Het is belangrijk om as="font" en crossorigin op te nemen, zodat het lettertype correct wordt opgehaald en dubbele downloads worden voorkomen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preload Font Example</title>
<link rel="preload" href="mywebfont.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'MyWebFont';
src: url('mywebfont.woff2') format('woff2');
font-display: swap;
}
body {
font-family: 'MyWebFont', sans-serif;
}
</style>
</head>
<body>
<h1>Hello CoddyKit!</h1>
<p>This text uses a preloaded web font.</p>
</body>
</html>De lettergrootte verkleinen met subsetting
Lettertypebestanden bevatten vaak honderden of zelfs duizenden tekens. Veel daarvan, zoals speciale symbolen of tekens voor andere talen, worden misschien niet op jouw specifieke website gebruikt.
Subsetting van lettertypen is het proces waarbij je een kleinere versie van een lettertypebestand maakt die alleen de specifieke tekens (glyphs) bevat die je website daadwerkelijk nodig heeft. Hierdoor wordt de bestandsgrootte sterk verkleind.
Waarom lettertypen subsetten?
Subsetting heeft een directe en aanzienlijke invloed op de prestaties van je website:
- Snellere downloads: Kleinere lettertypebestanden worden veel sneller gedownload, wat leidt tot kortere laadtijden van pagina's.
- Minder bandbreedte: Dit bespaart gegevens voor je gebruikers, wat vooral belangrijk is voor mensen met mobiele databundels.
- Betere gebruikerservaring: Minder wachten betekent dat gebruikers je inhoud, met de juiste vormgeving, veel sneller zien.
Tools zoals Font Squirrel's Webfont Generator of Google Fonts kunnen je helpen bij het subsetten.
Test je kennis over lettertypen
Welke van de volgende strategieën zijn effectief voor het optimaliseren van het laden en de prestaties van weblettertypen?
Samenvatting: lettertypen laden
We hebben essentiële technieken voor het optimaliseren van het laden van weblettertypen behandeld:
font-display: Deze CSS-eigenschap bepaalt hoe lettertypen tijdens het downloaden worden weergegeven en voorkomt FOUT en FOIT.- Vooraf laden: Door
<link rel="preload">in je HTML te gebruiken, worden kritieke lettertypen eerder opgehaald, waardoor ze sneller beschikbaar zijn. - Subsetting: Verkleint de grootte van een lettertypebestand door alleen de tekens op te nemen die je website daadwerkelijk nodig heeft.
Door deze strategieën toe te passen, kun je de waargenomen prestaties van je website aanzienlijk verbeteren en een soepelere gebruikerservaring bieden.
Leer Webprestatieoptimalisatie en Lighthouse met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Lettertypen sneller laden” gratis?
Ja — de volledige tekst van “Lettertypen sneller laden” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Webprestatieoptimalisatie en Lighthouse wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Webprestatieoptimalisatie en Lighthouse bevat in totaal 4 lessen.
Wat leer ik in “Lettertypen sneller laden”?
Implementeer `font-display`, preloading en subsetting om ervoor te zorgen dat webfonts efficiënt worden geladen zonder layoutverschuivingen te veroorzaken. Je oefent met Webprestatieoptimalisatie en Lighthouse door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Webprestatieoptimalisatie en Lighthouse te beginnen?
Ervaring vooraf is niet nodig. Webprestatieoptimalisatie en Lighthouse op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Lettertypen sneller laden”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Webprestatieoptimalisatie en Lighthouse?
Ja. Elke les over Webprestatieoptimalisatie en Lighthouse bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Kritieke CSS en CSS-levering
- Lettertypen sneller laden
- Invloed van CSS-in-JS op performance
- Ongebruikte CSS verminderen