Font awesome makes a web designers life easy. Adding icons is as simple as adding a <h1> tag. Resizing is done through attributes, flipping, stacking, spinning is all possible with font awesome. But apart from those 10 icons and some styles, all other icons are of no use to us. They load along with the ones we need.
Though font awesome is cached by browsers since many websites use it, we have to give attention to first-time visitors who may have a browser without cached font awesome css. Moreover, font awesome version updation is done every time when new icons are added and you should also keep version of the CDN link up to date.
Why should we optimize font awesome?
I like my website to load faster on desktops as well as on mobile devices. It is one of the main reasons why I switched from WordPress to Jekyll.
If we are using only 10 icons then why should we load 100 other icons?
Since fontawesome is a huge file, we have to trim it down to our needs. If we are using only 10 icons then why should we load 100 other icons? The size of font awesome web font is 90KB. Added to that, minified font awesome css is 30KB. So overall 120KB! What I’m trying is to reduce this to below 12KB which is more than 90% compression!!
This will decrease the load time multiple folds! My website scored 89% on Google pagespeed insights after implementing this. It used to be 52%!
How can we optimize font awesome?
Basic idea is to edit the font file to make it as small as possible. Removing unwanted glyphs will reduce the size drastically. But we should analyze our website to make sure we note down all the font awesome icons that are in use.
In my case, removing unused glyphs reduced the woff file size from 90KB to 8.5KB. This size depends on how many icons you need. The size increase with the increase in the number of icons. Removing unwanted css from fontawesome.min.css reduced the size from 30KB to 2KB. The overall size of font awesome after optimizing is around 11KB!
HTTP/2 is the first major HTTP protocol update since 1997 when HTTP/1.1 was first published by the IETF. The new HTTP protocol is needed to keep up with the exponential growth of the web. The successor of HTTP/1.1 brings significant improvement in efficiency, speed and security and is supported by most modern web browsers. A list of browsers that support HTTP/2 can be found on caniuse.com.
It is fully multiplexed, sending multiple requests in parallel over a single TCP connection.
It uses header compression HPACK to reduce overhead.
It allows servers to “push” responses proactively into client caches instead of waiting for a new request for each resource
It uses the new ALPN extension which allows for faster-encrypted connections since the application protocol is determined during the initial connection.
It reduces additional round trip times (RTT), making your website load faster without any optimization.
Domain sharding and asset concatenation is no longer needed with HTTP/2.
HTTP/2 introduces other improvements, more details: HTTP/2 RFC7540
This test can check HTTP and HTTPS but most browsers only support HTTP/2 for HTTPS, which means you must migrate to HTTPS if you want to take advantage of the performance benefits.