This post is the first in a series of (micro) optimizations I did to my Jekyll blog. Each post will focus on a single optimization and shows how you can apply this to your own (Jekyll) blog. Some of these posts will be focussed primarily on blogs using Jekyll and Github Pages, others will be less specific and focus on performance on the web in general.
Today we kick-off with SVG icons!
Font Awesome is a great free icon font which doesn’t require an introduction. The list of included icons is large and the ease of use makes it a great choice for web applications.
However, on a blog like this most users will only visit a few pages at most. Most traffic comes from search engines and visitors are probably looking for an answer to a specific question. So, to cater for these users we need to optimize the performance as if every users stats with an empty cache. This is in contrast to more high-feature web applications that engage users for a longer amount of time.
To improve performance the first strategy is to improve loading of the website. This includes the amount of requests, the total size of the page and the rendering.
After a small search I found out that my theme used Font Awesome for the staggering amount of four icons. In other words, to display 5 icons a user needs to load the Font Awesome css and the font itself. We can do better right?
Icon definition list
A few of the simple icons (such as a downward facing arrow) I replaced with HTML entities (such as ↓). The more complex icons (Github/LinkedIn icons as an example) were a bit harder to replace. My solution was to create a small SVG icon library in the Jekyll theme.
Using a tool such as IcoMoon you can easily generate SVG symbols for common-used icons. The Github and LinkedIn icons for example give the following definition:
Note that each symbol has a unique id, we will use this later to include the icon on any page. We can place these icons at the top of every page, just below the body tag:
Last we need some CSS to make sure the icons display correctly. Don’t change the width and height values, by setting them both to
1em we can later scale the icons properly using
Using the icons
The only drawback of this method is that including an icon is a bit more work than the Font Awesome approach. But, when you’ll get used to it you won’t see the difference. Instead of the convenient
fa fa-icon classes we use an inline svg element:
If you added everything the snippet above will show the following:
Additionally, you can apply many of the same CSS effects to these SVG icons as you would with normal text. Only text-specific things such as
font-style won’t work.
I really loved working with FontAwesome in previous projects. But, for this blog, replacing the icons with their SVG counterpart made a large difference in performance. For (small) blogs such a change can be done very quickly as the set of used icons is often limited. For larger applications this could result in a larger rewrite of your codebase. But, given all the benefits I wouldn’t be surprised if more websites would do the same. To quote Github :
By switching from icon fonts, we can serve our icons more easily, more quickly, and more accessibly. And they look better. Enjoy.