Tientallen iconen laden voor één klein symbool

Je wil het verschil zien tussen wat de pagina laadt en wat de bezoeker ziet. Een iconenbundel kan als lettertypebestand, als sprite, als scriptbestand of als losse afbeeldingen binnenkomen. Het gebruik verschilt per site, dus je kunt dit niet afleiden uit de naam van de bibliotheek.

De cursus Learn Performance van web.dev bespreekt het optimaliseren van het laden van bronnen en, in de module over afbeeldingen, het beperken van verspilde bytes. Pas dat als eigen denkkader toe op iconen, de bron behandelt iconenbundels niet specifiek: elk bestand dat geladen wordt zonder dat de pagina het gebruikt, is een kandidaat voor onderzoek. Een kandidaat is nog geen bewezen probleem. Je moet bekijken of het bestand gecachet wordt, of het meerdere pagina's bedient en of het de eerste weergave vertraagt.

1. Kies twee of drie sleutelpagina's, bijvoorbeeld de homepage, een dienstpagina en een contactpagina.
2. Noteer per pagina de zichtbare iconen. Tel ze met een vaste regel: elk symbool dat een bezoeker kan zien, tel je één keer.
3. Open het netwerkoverzicht van de ontwikkelaarstools van je browser. De exacte plaats en naam verschillen per browser, dus controleer die in jouw versie.
4. Laad de pagina in een privévenster en zoek bestanden van de iconenbundel, zoals lettertypebestanden, SVG-bestanden of scripts. Noteer naam, type en grootte.
5. Zoek in de broncode van het thema of de bouwer welke iconen worden aangeroepen. Vraag bij een CMS of pagebuilder aan de beheerder waar de bundel wordt toegevoegd.

Het resultaat is een tabel met drie kolommen: zichtbare iconen, geladen bestand en pagina's waarop het bestand voorkomt. Voor tijdsmetingen helpt de uitleg van MDN over navigatie- en brontimings, die onderscheidt tussen het hoofddocument en de bronnen die het aanroept.

Gebruik deze matrix nadat je de inventaris hebt. Het is een denkhulp, geen universele regel.

Je hoeft de bibliotheek niet te migreren om te vergelijken. Maak op een testkopie van één pagina een variant waarin enkel de gebruikte iconen als eenvoudige SVG staan, en laat de rest ongemoeid. Meet beide pagina's op dezelfde manier: aantal aanvragen, overgedragen gegevens en de bestanden die van de bundel komen.

Let ook op onderhoud. Losse SVG's zijn eenvoudig voor een klein aantal symbolen, maar worden onoverzichtelijk bij tientallen. Een beperkte set uit dezelfde bibliotheek houdt de stijl consistent, maar of je die kunt genereren hangt af van de bibliotheek en van hoe jouw site de bundel invoegt. Vraag dat na bij de ontwikkelaar.

Controleer ook toegankelijkheid. De tutorials van W3C WAI behandelen toegankelijke afbeeldingen en noemen SVG als een van de technieken. Beslis per icoon of het decoratief is of betekenis draagt, en geef betekenisdragende iconen een passend tekstalternatief.

Invoer (fictief): een dienstpagina toont een telefoonicoon, een e-mailicoon en een pijl. In het netwerkoverzicht staat één iconenbestand dat volgens de bibliotheekdocumentatie veel meer symbolen bevat. Drie sleutelpagina's zijn geïnventariseerd.

Plan: maak een testkopie met enkel die drie symbolen als SVG, meet beide versies in dezelfde browser en noteer de bestanden die verdwijnen of blijven.

Verwachte technische controles: het bundelbestand verschijnt niet meer op de testkopie. Alle drie de symbolen blijven zichtbaar, ook bij een geblokkeerd lettertype. Betekenisdragende symbolen hebben een tekstalternatief. Staat het bundelbestand er nog, dan roept een ander onderdeel het aan.

Na publicatie: herhaal de inventaris op de live pagina, controleer andere pagina's op ontbrekende symbolen en noteer datum en browser. Wil je weten welke publieke signalen je website toont, bekijk dan je site via Marketing Scan. Een scan vervangt je inventaris niet en voert niet elke controle uit.