Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen
Hoe zorg je ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen? Dit gaan we hier uitleggen omdat het een belangrijk onderdeel is voor page speed en Web Vitals. Hiermee verbeter je uiteindelijk je SEO en je positie in de zoekresultaten.
Tegenwoordig gebruikt bijna iedere website wel web fonts of weblettertypen. Design is laatste jaren ook steeds belangrijker geworden en daar bij horen speciale lettertypen. Althans, dat vindt de ontwerpers.
Alle browsers en apparaten hebben al standaard een hoop lettertypen geïnstalleerd. Deze zouden niet geladen hoeven te worden als die nodig zouden zijn om een website te tonen. Probleem is dat men juist andere, meer originele, lettertypes willen gebruiken. Is misschien wel mooi maar hiervoor moeten allerlei extra files geladen worden. Voordat deze lettertypes zijn geladen kan de tekst niet getoond worden dus het is heel belangrijk dit op de juiste manier te doen.
Probeer web fonts zo veel mogelijk te beperken. Deze uitleg is niet bedoeld zodat je meerdere web fonts kunt gebruiken.
Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen
Er zijn twee dingen die je moet doen om de melding “Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen” te verhelpen in de page speed test van Google.
font-display
Als je gebruik maakt van @font-face in css om de lettertype toe te voegen dan kan je “font-display: swap” toevoegen. Dit kan er als volgt uitzien:
@font-face {
font-family: "Open Sans";
src: url("./fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("./fonts/OpenSans-Regular-webfont.woff") format("woff");
font-display: swap;
}
Voor anderen die gebruik maken van Google Fonts kan dit op een andere manier doen. Voor Google Fonts wordt altijd een link gebruikt naar een CSS-file. Aan deze link kan je ook “font-display” toevoegen, maar wordt het dan “display=swap”. Dit moet dan op de volgende manier gedaan worden.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap" rel="stylesheet" type="text/css">
Tegenwoordig als je de link kopieert van Google Fonts staat dit er al bij.
Preload
En dan nu het laatste gedeelte om web fonts op de juiste manier te laden op je website. Omdat lettertype meestal niet direct geladen worden is het beter deze wel eerst te laden en deze prioriteit te geven. Hier kan je meer over lezen in “Laad belangrijke verzoeken vooraf“.
Preload zorgt ervoor dat files vooraf worden geladen voordat er daadwerkelijk om wordt gevraagd. Dit voorkomt dat de CSS geen vertraging op loopt doordat het moet wachten tot de lettertypen zijn geladen. Als je vertraging kan voorkomen is dat natuurlijk weer positief voor page speed.
Als de lettertypen op je eigen website staan kan je dit op de volgende manier toevoegen aan.
<link rel="preload" href="http://www.mijn-website.nl/css/fonts/OpenSans-Regular-webfont.woff?v=4.5.0" as="font" type="font/woff" crossorigin>

Plaats de volgende regel zo hoog mogelijk in:
<link href="//www.google-analytics.com" rel="preconnect">
Vraag vrijblijvende een offerte aan.
Weblettertypen
Het gebruik van weblettertypen is bijna onmisbaar geworden voor de meeste website ontwikkelaars. Hier moet ik wel aan toevoegen dat de meer lettertypes geladen moeten worden, de website toch langzamer maakt. Bedenk dat voor elk lettertype het lettertype geladen moet worden. De meer lettertypes, de groter de bestandsoverdracht is, en dat is niet goed voor je page speed en Web Vitals.
Probeer web fonts zo veel mogelijk te beperken. Deze uitleg is niet bedoeld zodat je meerdere web fonts kunt gebruiken.
Er zijn nog geen reacties. Wees de eerste..!!