I use WordPress with FontAwesome installed (built in) form theme. I’ve optimized my site and the score is good enough in PageSpeed, Pingdom, GTmetrix, etc. But the only slowing my site now is FontAwesome. The FontAwesome size is about 75kb but the load time is almost 2 seconds just for loading FontAwesome only.
I set no query string on the cache setting page, then I set cache everything on the page rules. The whole of my http request is fast. But the FontAwesome loading time is still very slow. Is there any way to reduce FontAwesome size or load time?
Use this to load font awesome: <link rel="stylesheet" href="https://cdnjs.Cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
That loads font awesome, and the fonts, from the Cloudflare global cache. It’s quite fast.
Thanks, Jules. So, I put that code in header or footer? What about the current FontAwesome code that built in my theme? Will the code makes double load or I have to remove FontAwesome from my theme first?
Typically in the header. If you’re nerdy and trying for a 100% page speed it gets really tricky though. Header is fine for most humans
You should REPLACE the other FA code with the one I gave above. If you link the web page, I can show you exactly.
Server push only seems to help if it’s a resource you’ll need very soon. If it’s a resource already loading for that page, requesting a PUSH isn’t going to get you much.
Without getting this thread off-topic, isn’t the point of the header though? That it’s a header and processed before the page load? That’s what I always thought but I’m an admin not a webdev.
@jules: Thanks for sharing above code. A couple of questions:
(1) Have you been able to confirm the code works for all (current) font awesome? We used the code on our website and it breaks one of them (fa-envelope). Strange, though, that it only breaks only that font on our website and only at one location. All others display fine.
(2) Have you been able to perform any type of benchmark test to determine website loading speed before and after using the code?
If the website is using the correct html, yes the code I gave above will work. I use it almost everywhere.
1b) You should be loading the ‘min’ version for better speed. Can you show us the broken glyph (post the url of the page and screenshot)?
No, but this would be easy to do. Load the JS and CSS from a local copy on your website. Then load the JS and CSS from cdnjs.
Thank you. Problem solved. Solution: (1) Cleared FVM (plugin), GoDaddy, and Cloudflare cache and, (2) Turned off Cloudflare’s “Rocket Loader.” Now, concerning “min” vs omitting it, can you explain why “min” is faster (or better)?
OK. Will give it a try. If anyone in this forum has performed any type of related benchmark tests, please let us know! Thank you.
