Voorkom dat webfonts je website traag maken

logo pdb
Ryte.com (voorheen On-page.org) is een van de beste on-page SEO tools, aanbevolen door Joomlaseo.com (zie onze review). Gratis voor 1 account (voor altijd)!!!
trage webfonts

Webfonts van Google of diensten als Typekit en Fonts.com zijn erg handig in gebruik en kunnen je website erg verfraaien. Echter, ze blijken er soms verantwoordelijk voor te zijn dat je site trager laadt, en dat wil je niet!

Ten eerste laden webdesigners vaak te veel fonts en ten tweede moeten de fonts van Google Webfonts, Typekit, Fonts.com, etcetera meestal extern geladen worden. Daarvoor moeten extra netwerkverbindingen gelegd worden tijdens het laden van je website, en dit werkt nu juist vaak vetragend. Je ziet dit bijvoorbeeld ook bij het laden van de tellertjes van je social media knoppen. Gelukkig kun je prima webfonts op een efficiente manier laden. Laten we eens bij de basis beginnen en vervolgens eens wat dieper graven.

Meten is weten: let op je webfonts

Met een performance test met tools als Pingdom en GT-Metrixkun je makkelijk zien of fonts je website inderdaad vertragen. In het volgende voorbeeld herkennen we bijvoorbeeld maar liefst 6 font-resources die extern geladen worden vanaf domeinen als fonts.googleapis.com en fonts.gstatic.com:

font resources

In dit voorbeeld zien we een site met 2 fonts: een voor de koppen en een voor de body-tekst. In dit geval gebruiken ze allebei Lato,zij het met verschillende gewichten. Voor de koppen worden de gewichten 700, 400, 300... gebruikt terwijl een afzonderlijke aanroep wordt gedaan voor het bodyfont met de gewichten 900, 700, 400, 300... etcetera.Dit is natuurlijk niet efficient... Ook valt op dat het gecombineerde gewicht van de font-bestanden uitkomt op 120-130 kB. Zeker als je streeft naar een totaal gewicht van onder de 1 MB zijn we al 12-13% kwijt alleen voor onze fonts!

In extreme gevallen kan een font zo blokkerend werken dat je website enkele seconden 'bevriest' voordat hij echt geladen is en je interactie kunt starten. Hoe dan ook, met deze kennis kunnen we nu gericht iets proberen te doen aan onze fonts.

Reduceer je font-load

Voordat we erg technisch worden kunnen we met een paar hele simpele keuzes ook al veel winst behalen:

  • Ten eerste: je kunt nog steeds gewoon zogenaamde web-safe fonts gebruiken die iedereen op zijn computer heeft geinstalleerd: Arial, Times New Roman, Courier etcetera. Helaas ziet er een website er daarmee tegenwoordig toch een beetje gedateerd uit, dus dit zal vaak niet meer een echte optie zijn.
  • Beslis dan welke en hoeveel fonts je gebruikt. Vaak worden bv 2 fonts gebruikt: 1 voor de koppen en een voor de body-tekst, maar misschien kun je prima toe met 1 font, dat scheelt al flink. Gebruik er zeker nooit meer dan twee.
  • Beslis dan welke gewichten je gaat gebruiken. Elke additioneel gewicht (bv vet, cursief, vet-cursief, enzovoorts) kost extra gewicht om in te laden. Dat maakt de site zwaar en traag, maar is mogelijk ook helemaal niet nodig. Stel dat je maar heel sporadisch vet gebruikt, dan hoef je het gewicht voor vet vaak helemaal niet te laden. Als je in je CSS de instructie geeft om tekst vet te maken kan de browser zelf het gewone regular font ook wat dikker maken, en vaak ziet dat er prima uit. Het hangt van je browser en font af of dit goed werkt, maar probeer het gewoon eens uit.

Dit waren de simpele tips, nu wordt het wat technischer:

Web Hosting

Vermijd extern geladen webfonts!!!!!

Het klinkt misschien een beetje cru, maar ik zou inderdaad externe diensten als Google Webfonts vermijden als je een echt snelle website wilt. Weliswaar doen deze diensten goed hun best om je fonts zo snel mogelijk bij je website af te leveren, maar je blijft altijd afhankelijk van hun diensten. Zelf je fonts hosten blijkt vaak een stuk efficienter, zeker als je al een CDN gebruikt. Zonder CDN zal het verschil minder zijn. Het hangt natuurlijk ook af van je hosting omgeving. Laten we eens zien hoe we dit voor elkaar krijgen

Waar vind je goede, gratis webfonts?

De eerste vraag is waar we nu goede webfonts vandaan halen. We hebben onze fonts in ieder geval in .woff of .woff2 formaat nodig (voor oudere browsers soms ook .eot, .ttf, .svg). Veel mensen gebruiken al Fontsquirrel om aan goede fonts te komen. Als je nu al Google Webfonts gebruikt zul je waarschijnlijk het correspondende font willen blijven gebruiken. Helaas biedt Google Webfonts niet de optie om fonts te downloaden, je moet ze ge-embed gebruiken, en dat willen we nu juist niet....

Echter: dat kan wel, en wel met de Google Webfonts Helper service.Je kunt hier elk Google font gewoon downloaden naar je PC. Kies je gewnste font en de bijbehorende gewichten (zuinig!):

google fonts helper

Naast het font krijg je ook de volledige CSS syntax om het in je stijlbestanden te gebruiken. Ook op www.localfont.com kun je Google fonts downloaden.

Gebruik @fontface embedding

De best ondersteunde manier om zelf gehoste webfonts te gebruiken is @fontface embedding.Deze techniek wordt breed ondersteun in vrijwel alle gangbare browsers en is erg efficient. Ook is de techniek erg makkelijk te gebruiken:

  • Upload je font naar je server
  • Geef het pad aan naar je locale webfont
  • Definieer je fonts
  • Gebruik ze in je CSS

Je krijgt dan in je CSS zo iets:

/* lato-regular - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url('../fonts/lato-v11-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Lato Regular'), local('Lato-Regular'),
url('../fonts/lato-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v11-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

Je hebt mogelijk niet de volledige code nodig, let ook op het CSS commentaar. Vooral als je je eigen templates gebruikt is het erg simpel om deze techniek toe te passen. Maar wat als je commerciele templates gebruikt?

Lokale fonts in commerciele Joomla templates

Het toepassen van lokale fonts is met commerciele templates van template clubs als Rockettheme, Yootheme, Joomlart, etcetera een stuk lastiger.Ze maken het je vaak erg gemakkelijk om met een font-picker 1 of meer leuke Google fonts uit te zoeken (extern geladen), maar gebruik van je eigen lokale fonts is vaak een stuk lastiger. Gelukkig bestaan er vaak wel procedures om dit toch voor elkaar te krijgen. Ik heb bij de 3 grote clubs gekeken of ze de mogelijkheid bieden:

En het kan nog sneller...

Er bestaat een techniek die het laden van lokale fonts nog sneller maakt: base64-encoding.Ik heb eerder al beschreven hoe je deze techniek met plaatjes toe kunt passen, maar je kunt het dus net zo goed bij fonts toepassen. De techniek houdt in dat je in je CSS in plaats van een pad naar een font-bestand een (soms gigantisch) groot stuk code aanbiedt wat een font voorstelt. Verder pas je de techniek net zo toe als bij @fontface.

Het converteren van fonts naar base-encoded fonts is niet eens zo moeilijk. Op de website van Fontsquirrel vind je de Webfont Generator. Deze bied een mooi conversie mechanisme aan. Je start met een .otf font-bestand en dat biedt je aan met de Upload Fonts knop. Als je nu verder niks doet krijg je de 'gewone' webfont formaten als .woff en dergelijke, maar als je een vinkje zet bij de Expert-options krijg je veel meer opties:

fontsquirrel webfont generator

Je krijgt dan allerlei manieren om je CSS aan te passen:

base encode font

Zorg nu dat je een vinkje zet bij Base-Encode.Accepteer de license agreement en dan klik je op Download your kit om je bestanden te downloaden.Als je het gegenereerde CSS bestand nu opent zie je iets als dit:

@font-face {
font-family: '20_dbregular';
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAACgcABMAAAAAVPAAACewAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGiAbjDwcIAZgAINaCBoJhGURCAr9CPFrATYCJAOEBAuCBAAEIAWHageDUgx+P3dlYmYGGwFNFeOYJR4HQLPVEEVNWqTSs/8/HjfGhELR7gcxhViGSuEoF/R0h0/mM9enH8VkuIgHEjom8Y3hpldUW4yCjya+2nnFJf6KJ7uPSBtySSF+VIomWjbzF39/WKgBQ1Wi5iydMBwbtZz76Rvadwa4oyy6QjyO/e5t+4KZZrEqWkW1kaATIiHhyT2aZCoM0Zw1WIDUKNmAJ4snWGQJ1gQLZIMVMuAJEmAXKZJFLEDQ1gNUOEKVZnvWlqMKNX.........................

De code is in werkelijkheid nog veel langer, maar het principe zal duidelijk zijn. Gebruik deze techniek alleen als je echt top-performance wilt, en gebruik liefst ook maar 1 font in 1 gewicht, anders wordt de font-code veel te lang en zullen browsers moeite hebben deze te berekenen. En test natuurlijk of het inderdaad werkt zoals je wilt.

Ik hoop dat je wat kunt met deze tips, veel plezier er mee ;)

Over deze site

Joomlaseo.com is volledig gebouwd en geschreven door Simon Kloostra, SEO Specialist en Webdesigner uit Utrecht. Ik heb ook een boek geschreven en blogs voor bedrijven als OStraining, TemplateMonster, SEMrush en dergelijke.