Op talloze WordPress-sites staan de pijltjes, telefoonhoorns en winkelwagentjes niet als plaatje maar als letter. Ze komen uit een iconenlettertype, meestal Font Awesome. De vraag icon font of svg lijkt een detail voor bouwers, maar het raakt drie dingen die u wél merkt: laadtijd, hoe scherp uw iconen ogen en of een schermlezer er iets zinnigs mee kan.

Hieronder leest u waarom deze techniek uit de mode is geraakt, wat SVG anders doet, en hoe u de overstap maakt zonder dat er ineens vraagtekens op uw pagina staan.

Hoe een iconenlettertype werkt

Een iconenlettertype is een gewoon lettertypebestand waarin de tekens zijn vervangen door symbolen. Waar normaal een letter a staat, staat een envelopje. De browser laadt dat bestand en tekent op de aangegeven plek het bijbehorende symbool.

Dat was een slimme oplossing in de tijd dat iconen anders als losse plaatjes moesten worden geladen. Eén bestand voor alle symbolen, schaalbaar, en te kleuren met CSS. Het probleem is dat u dat hele bestand binnenhaalt, ook als u er twaalf van de vijftienhonderd symbolen uit gebruikt. Een volledige Font Awesome-set is al gauw zeventig tot honderdvijftig kilobyte, plus een stylesheet dat er nog eens dertig bij doet.

Erger is de volgorde. Zoals elk lettertype wordt het pas laat opgehaald, dus uw iconen verschijnen na de rest van de pagina. Dat geeft die typische korte flits waarin knoppen leeg zijn of, bij een mislukte lading, een leeg vierkantje tonen.

Icon font of SVG: waarom SVG dit beter oplost

Een SVG is een tekening die is beschreven in coördinaten in plaats van in beeldpunten. Een gemiddeld pictogram komt daarmee uit op één tot twee kilobyte. Zet u het direct in de HTML, dan is er zelfs geen apart verzoek nodig: het icoon staat er meteen, zonder wachttijd en zonder flits.

Nog drie voordelen die zwaarder wegen dan ze klinken:

  • Scherp op elk scherm. Een SVG schaalt oneindig en blijft haarscherp op een retinascherm en op een grote monitor.
  • Toegankelijk. U kunt er een titel en een beschrijving in zetten, zodat een schermlezer “telefoonnummer” voorleest in plaats van een willekeurig teken. Bij een iconenlettertype leest zo’n hulpmiddel soms letterlijk een privégebruikte tekencode voor, wat als ruis binnenkomt.
  • Meer dan één kleur. Een lettertype kent maar één kleur per teken; een SVG kan meerdere vlakken hebben en zelfs animeren.

Voor de volledigheid: er is één plek waar een iconenlettertype nog handig is, namelijk als u tientallen verschillende symbolen door redacteuren laat kiezen in een editor. Dan is een keuzelijst met een lettertype eenvoudiger te bouwen. Voor de tien tot twintig iconen die een gemiddelde bedrijfssite gebruikt, is dat geen argument.

Uitzoeken of dit bij u speelt

  1. Open het netwerktabblad in uw browser en filter op lettertypen. Ziet u bestanden met namen als fontawesome, icomoon of eicons, dan laadt u een iconenlettertype.
  2. Kijk hoeveel het weegt. Zit u met stylesheet en al boven de honderd kilobyte, dan is dit een van de zwaardere posten op uw pagina.
  3. Tel uw iconen. Loop de startpagina en twee belangrijke pagina’s langs en noteer welke symbolen er echt op staan. Meestal komt u niet boven de vijftien.
  4. Zoek uit wie de boosdoener is. Vaak uw thema, maar Elementor, WooCommerce-uitbreidingen en sliderplugins nemen elk hun eigen set mee. Twee of drie iconensets op één pagina komt regelmatig voor.

Dat laatste punt is de meest voorkomende verrassing. Stapeling van dit soort losse bibliotheken is hetzelfde patroon als beschreven in het artikel over het stapelen van optimalisatieplugins: elke plugin lost iets op en niemand kijkt naar het totaal.

De overstap in de praktijk

Doe dit niet in één avond op de live site. De volgorde die werkt:

  1. Maak een lijst van de iconen die u gebruikt, met een schermafdruk erbij. Dat is uw controlelijst achteraf.
  2. Haal de SVG-versies op. Vrijwel alle bekende iconensets bieden losse SVG-bestanden aan, ook Font Awesome zelf. Let op de licentie, en houd u aan de naamsvermelding als die wordt gevraagd.
  3. Werk op een testomgeving. Vervang de iconen daar en klik alle pagina’s na, inclusief het menu, de knoppen en het afrekenscherm van een webshop.
  4. Zet ze in een symbolenbestand of direct in de HTML. Voor iconen die op elke pagina terugkomen is direct plaatsen het snelst; voor iconen die maar op één pagina staan is een los bestand netter.
  5. Schakel het lettertype pas daarna uit, en controleer dan opnieuw. Dit is het moment waarop verborgen iconen in een voettekst of een foutmelding boven water komen.
  6. Sta geen SVG-uploads toe voor iedereen. Een SVG kan code bevatten, dus laat alleen beheerders ze uploaden of gebruik een plugin die de bestanden opschoont.

Reken op twee tot vier uur werk voor een gemiddelde site. Dat lijkt veel voor honderd kilobyte, maar u haalt tegelijk een externe afhankelijkheid weg en u lost het geflikker bij het laden op.

Wanneer u het gewoon laat staan

Draait u op een thema dat volledig op zijn eigen iconenlettertype leunt, en gebruikt u dat op tachtig plekken? Dan is vervangen een verbouwing met risico op gaten in het ontwerp, en dat weegt niet op tegen de winst. Beperk u dan tot het inladen van alleen de deelsets die u nodig heeft, wat bij de meeste bibliotheken kan.

Wij pakken dit bij WebMaintor doorgaans mee wanneer er toch aan het thema wordt gewerkt, omdat het testwerk dan al gepland staat. Als losse ingreep binnen een ronde waarin we per bestand kijken wat het bijdraagt staat het zelden bovenaan, maar wel altijd op de lijst.

Concrete volgende stap: filter uw netwerkverkeer op lettertypen en kijk of daar een iconenset tussen staat. Ziet u er twee, dan heeft u een vrij eenvoudige besparing gevonden.