It can be hard to resist peppering your site with icons such as the gorgeous ones provided by folks like Font Awesome. Yet if you’re not careful those icons can quickly bog down your website load time. and add anywhere from 100KB to 500KB in download size to your website.
If you’re only using a few icons, perhaps linking off to your various social media profiles, it may make sense to instead load individual SVG versions of each icon.
On Technology Poet we use a nifty little plugin called Menu Icons to show icons in the WordPress menus. The plugin offers many different icon sets to choose from, and itself is fairly fast and lightweight, even recommended by the folks who make the blazing fast Generate Press themes.
Without thinking too much about it I added an item to the menu for my LinkedIn and Twitter accounts. As is common I used an icon instead of words for these, and opted to use the Font Awesome versions of the icons. When I tested I discovered that for just these two icons, 77KB of extra data was being downloaded. Which one might not think is a big deal, but given that the entire site is under 200KB, those two icons now represented more than a third of the total download size, so something had to change.
Using SVG Icons
The first step to using SVG icons is enabling their use in WordPress. WordPress turns off the use of SVG by default because it could expose potential security issues on the site if malicious SVG is uploaded and then executed on the server.
To mitigate this you can use a plugin like Safe SVG to both sanitize the SVG when it’s uploaded and enable WordPress to support SVG.
The next step is to find the SVG icon you’re looking for. Font Awesome has some SVG icons available for free download (here’s Twitter as an example), but to access all the icons and all the various colorizations and styles of the icons requires a pro account.
The Menu Icons plugin offers a simple way to select SVG for your icons instead of an icon pack. Save this setting.
Then add an icon in the menu structure using the SVG file you chose earlier and save.
Site Speed Improvements Using SVG
Here’s an example of the difference this simple change made to the loading speed of Technology Poet, as measured by Speed Curve.