Waarom vertraagt Font Awesome een pagina?
Meestal laad je het met één regel in de head, waar elke stylesheet de eerste paint ophoudt:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css">
<i class="fa-solid fa-phone"></i>Classes uit versie 4 zoals fa fa-gear worden in versie 7 nog steeds getekend. De stylesheet is 90 KB (18 KB gecomprimeerd), en elke style die je gebruikt voegt een fontbestand toe: 119 KB voor solid, 115 KB voor brands. Je eigen server haalt die wachttijd niet weg, zoals de test hieronder laat zien. Een CDN voegt alleen een verbinding met een andere server toe.
Dat iconen laat verschijnen, heeft nog een oorzaak. Font Awesome stelt font-display: block in, dus een icoon blijft leeg tot het font binnen is, en swap zou daar letters of blokjes tonen. Laat block staan, ook als Lighthouse klaagt: icon fonts zijn de uitzondering.
Maakt lazy loading Font Awesome sneller?
Ja: de pagina renderde in de helft van de tijd, net zo snel als helemaal zonder icon font. In een test op 29 oktober 2026 werd een artikelpagina met drie iconen van Font Awesome 7.3.1 in de footer op vier manieren geladen, telkens 10 keer, in headless Chrome op een telefoonscherm. Medianen van de eerste paint (First Contentful Paint):
| Link naar cdnjs | Eigen server | lazyicon | Iconen als SVG | |
|---|---|---|---|---|
| Slow 4G | 1.292 ms | 1.264 ms | 596 ms | 600 ms |
| Fast 4G | 416 ms | 384 ms | 200 ms | 204 ms |
| Icoonbestanden vóór het scrollen | 255 KB | 254 KB | 0 | 0 |
Met lazyicon houdt niets in de head de pagina op, en de 254 KB aan icoonbestanden komt pas binnen zodra de footer binnen 150 px van het scherm is. Een telefoonicoon in de header verscheen wel laat: na zo'n 3,7 seconden op Slow 4G, tegen 0,6 als SVG. Dat was één testpagina in het lab, dus op een echte telefoon is elke kolom trager.
Zit je vast aan een thema of plugin die Font Awesome laadt, dan haalt lazyicon dat in vijf minuten uit de weg. Bouw je iets nieuws, gebruik dan gewoon SVG.
Stap 1: Zet de Font Awesome-bestanden op je server
Download Font Awesome Free en upload de mappen css en webfonts naast elkaar, bijvoorbeeld /fa/css/ en /fa/webfonts/, want de stylesheet zoekt naar ../webfonts/. Haal de <link> uit de head, of zet hem uit in het thema of de pagebuilder. Google Fonts zelf hosten is dezelfde stap voor tekstfonts.
Stap 2: Voeg lazyicon toe en verwijs naar de stylesheet
Haal lazyicon.min.js, het kleine script dat we hiervoor schreven, van GitHub, upload het en voeg twee regels toe aan de head, zoals in de test:
<script defer src="/lazyicon.min.js"></script>
<script>window.addEventListener('load', () => { LazyIcon().observe({'src': '/fa/css/all.min.css', 'selector': '.fa-solid,.fa-brands', 'rootMargin': '150px 0px'}); });</script>src is je stylesheet, selector de iconen om in de gaten te houden (elke style die je gebruikt, of .fa bij Font Awesome 4), en rootMargin hoe dicht het eerste icoon bij het scherm komt voordat het laden start. De rest van het bezoek in dat tabblad laadt elke volgende pagina de stylesheet meteen, uit de cache.
In één geval gaat het mis. Het script kijkt naar het eerste icoon in de HTML dat matcht. Is dat verborgen, bijvoorbeeld in een gesloten mobiel menu, dan kunnen de iconen leeg blijven. Gebruik dan een selector voor iconen die nooit verborgen zijn, zoals footer .fa-solid, footer .fa-brands.
Stap 3: Scroll naar beneden met het Network-tabblad open
Open Network in Chrome DevTools, filter op CSS en Font, en herlaad: geen all.min.css. Scroll richting de footer: hij verschijnt, daarna de woff2-bestanden, en de iconen worden getekend.
Demopagina, Chrome DevTools.
Controleer op een klantsite de homepage, een artikel en de contactpagina, als onderdeel van een site-audit.
Wanneer lazy loading de verkeerde fix is
Als de iconen in het eerste scherm staan, of overal. Iconen in de header of op knoppen krijgen de stylesheet pas nadat de pagina geladen is, en dat is te laat. Teken die paar als SVG, inline of als een <img>. De eigen performancegids van Font Awesome bewaart webfonts voor "een heel groot aantal iconen".
Een app met overal iconen heeft een kleinere set nodig: een font met alleen jouw iconen (een Font Awesome Pro Kit, Fontello of IcoMoon) of een SVG-sprite met een subset, want de sprite van Font Awesome met alle solid-iconen is 876 KB.
Kun je de HTML niet aanpassen? Laat de class-namen staan en teken elk icoon als SVG in de CSS, net als in de test:
.fa-solid,.fa-brands{display:inline-block;width:1em;height:1em;vertical-align:-.125em;background-color:currentColor;-webkit-mask:var(--fa) center/contain no-repeat;mask:var(--fa) center/contain no-repeat}
.fa-envelope{--fa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}De oudere pagina's van marketingtracer.com behielden zo hun fa fa-phone classes en schrapten het font: acht iconen in zo'n 3 KB CSS. Geen van de 1.634 pagina's op vijf van mijn sites laadt nog een icon font (gecontroleerd in oktober 2026).