Why does Font Awesome slow down a page?
The usual embed is one line in the head, where every stylesheet holds up the first paint:
<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>Version 4 classes like fa fa-gear still draw in version 7. The stylesheet is 90 KB (18 KB compressed), and each style you use adds a font file: 119 KB for solid, 115 KB for brands. Your own server doesn't remove the wait, as the test below shows. A CDN only adds a connection to another server.
Late icons have another cause. Font Awesome sets font-display: block, so an icon stays empty until its font arrives, and swap would show letters or boxes there. Keep block even when Lighthouse complains: icon fonts are the exception.
Does lazy loading speed up Font Awesome?
Yes: the page painted in half the time, as early as with no icon font at all. A test on October 29, 2026 loaded an article page with three Font Awesome 7.3.1 icons in its footer four ways, 10 times each, in headless Chrome on a phone screen. Medians of the first paint (First Contentful Paint):
| Link to cdnjs | Own server | lazyicon | Icons as SVG | |
|---|---|---|---|---|
| Slow 4G | 1,292 ms | 1,264 ms | 596 ms | 600 ms |
| Fast 4G | 416 ms | 384 ms | 200 ms | 204 ms |
| Icon files before scrolling | 255 KB | 254 KB | 0 | 0 |
With lazyicon nothing in the head holds the page up, and the 254 KB of icon files arrive only when the footer comes within 150 px of the screen. A phone icon in the header came late, though: about 3.7 seconds on Slow 4G, against 0.6 as SVG. That was one lab page, so on a real phone every column is slower.
If you're stuck with a theme or plugin that loads Font Awesome, lazyicon gets it out of the way in five minutes. If you're building something new, just use SVG.
Step 1: Move the Font Awesome files to your server
Download Font Awesome Free and upload its css and webfonts folders side by side, say /fa/css/ and /fa/webfonts/, since the stylesheet looks for ../webfonts/. Remove the <link> from the head, or switch it off in the theme or page builder. Self-hosting Google Fonts is the same move for text fonts.
Step 2: Add lazyicon and point it at the stylesheet
Get lazyicon.min.js, the small script we wrote for this, from GitHub, upload it and add two lines to the head, as in the 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 your stylesheet, selector the icons to watch (every style you use, or .fa on Font Awesome 4), and rootMargin how near the screen the first icon gets before loading starts. For the rest of the visit in that tab, every next page loads the stylesheet at once, from the cache.
One case trips it up. It checks the first matching icon in the HTML, so if that one is hidden, say in a closed mobile menu, the icons can stay empty. Then use a selector for icons that are never hidden, like footer .fa-solid, footer .fa-brands.
Step 3: Scroll down with the Network tab open
In Chrome DevTools, open Network, filter on CSS and Font, and reload: no all.min.css. Scroll toward the footer: it shows up, then the woff2 files, and the icons are drawn.
Demo page, Chrome DevTools.
On a client site, check the home page, an article and the contact page, as part of a site audit.
When lazy loading is the wrong fix
When the icons are in the first screen, or everywhere. Icons in the header or on buttons get the stylesheet only after the page has loaded, which is too late. Draw those few as SVG, inline or as an <img>. Font Awesome's own performance guide keeps web fonts for "a very large number of icons".
An app with icons all over needs a smaller set: a font of only your icons (a Font Awesome Pro Kit, Fontello or IcoMoon) or a subset SVG sprite, since Font Awesome's sprite of every solid icon is 876 KB.
Can't touch the HTML? Keep the class names and draw each icon as SVG in the CSS, like the test did:
.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")}The older pages of marketingtracer.com kept their fa fa-phone classes this way and dropped the font: eight icons in about 3 KB of CSS. None of the 1,634 pages on five of my sites loads an icon font any more (checked in October 2026).