Font Awesome is loading very slow [closed]

Question

I have been doing some troubleshooting on my site, because the page load seemed very slow. I have icons on every page, multiple times as the site serves as a blog, and each blog post has share icons. By removing font awesome I noticed an extreme speed boost. Now I am unsure what to do because I need the icons. Any suggestions?

Update: I tried using my server and I also used CDN but I get the same results.

Answer 1

Load this into your head:

<script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://use.fontawesome.com/releases/v5.1.0/css/all.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>

What does this do exactly? Well it loads font awesome via javascript which is placed at the head of the page. Basically we are rendering font awesome before rendering the page which means it should load quicker.

Answer 2

Have to turned on the cache? On an Apache Server you can add to your .htaccess:

 ExpiresActive On
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType text/html "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"

To get an overview about how to speed up your website you can test it at: https://developers.google.com/speed/pagespeed/insights/