Font Awesome is a great way to add scalable vector icons to your website, however what most people may not realize is that the method Font Awesome themselves recommend for using it is pretty slow and will hurt the performance of your site far more than it should.
Including from Font Awesome's recommended CDN requires two requests, one for the CSS file, and one for the actual font.
The CSS file which is render blocking weighs in at 7.4KB and takes 151 ms on average with an empty cache (ie, first visit). With the CSS file in cache (ie, secondary views) gives us a lower 49 ms on average. These are averages, looking at worst case in our tests we got a massive 180 ms even with the file cached.
Which font is served differs by browser, but for Google Chrome we get a 65KB WOFF2 file which takes on average 194 ms to load with an empty cache and on average 41 ms to load with the cache primed.
Total sum then with cached files we get to around 90 ms, no caching we get a mammoth 345 ms. That is rather much. Thankfully the font loading is not a blocking operation so only the initial CSS file load is really really bad.
The key to keeping things fast is to lower the amount of files that your site needs to download. Hence what you want to do is download and combine the CSS for Font Awesome into your site CSS (to make things even lighter, strip out all the classes you don't need).
To access the font file either directly reference it from a CDN, or download and host it yourself. We did note that the CDN used by default is slower than one might expect so if you have the option to host it yourself that might not be a bad idea.
We went with the host it ourselves option. We then enabled bandwidth throttling in Chrome in order to even the odds a little, we used the 4G preset which has a 20 ms latency and 4 Mb/s download rate.
Inlining the CSS into our CSS file increased the download size considerably, adding an additional 30 ms to download on a 4 Mb/s connection. Downloading the webfont (in WOFF format) took 180 ms. These figures are without caching and on an artificially slowed down connection but gives us a total of only 210 ms a saving of 135 ms compared to the CSS/Font from CDN approach at 345 ms.
Doing the same test but with caching enabled gives us a cost increase of 0 ms for the CSS file, and 14 ms for the font, total then at 14 ms, down 76 ms from the 90 ms we got with the CDN.
It is highly unlikely that you will make use of the several hundred different icons in Font Awesome, so including a large font and CSS file with all of these things is wasteful. Thankfully there are ways to just pick the icons you want, and have a custom font created. Fontello makes this easy.