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.

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>

Let op dat hier niet alleen rel=”preload” wordt gebruikt, maar ook: as=”font” type=”font/woff” crossorigin. Dit zijn extra gegevens die nodig zijn om aan te geven dat het om een lettertype gaat en welke type het is. Crossorigin geeft aan dat het ook van een andere server kan komen.Voor de mensen die gebruik maken van Google Fonts is er nog een klein extra trucje om toe te voegen aan. Dit is de preconnect. Op deze manier maakt de website vooraf al een verbinding met Google. Dit moet zo hoog mogelijk in deworden geplaatst. Als de browser komt bij de preload dan is de verbinding al gemaakt en hoeft alleen nog de juiste CSS-file worden opgevraagd. Het is een klein beetje extra maar alle beetjes helpen.

Plaats de volgende regel zo hoog mogelijk in:

<link href="//www.google-analytics.com" rel="preconnect">

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.