Reduce FontAwesome Load Time

pagerules
caching
wordpress

#1

Dear All

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.

The source of my FontAwesome is like this ->
mydomain.com/wp-content/themes/annina/fonts/fontawesome-webfont.woff2?v=4.7.0

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?

Regards


#2

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.


#3

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?


#4

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 :slight_smile:
You should REPLACE the other FA code with the one I gave above. If you link the web page, I can show you exactly.


#5

How would use this if you were using typekit, having the same trouble here.

Thanks!


#6

Is there a list of localized Cloudflare resources like this (FontAwesome)?


#7

I found a very old blog post on this:

That linked to the repository:


#8

Thanks for the source.


#9

Could also see if a server push of the stylsheet (https://blog.cloudflare.com/http-2-server-push-with-multiple-assets-per-link-header/) helps you here.


#10

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.

That’s been my experience, anyway.


#11

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.


#12

That’s what the hype seems to imply, but it just didn’t do much (if anything) for my WordPress sites.


#13

I’m also using WordPress and my site is very slow, how can I improve


#14

I’ve already replied in the other thread. Please don’t post the same issue multiple times.


#15

Thanks!


#16

@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?

Thanks!


#19

OK. I believe I found the answer to (1) above. The code to be used is:

Best to use (without the “min”): href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css


#20
  1. 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)?
  2. 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.

#21

Thanks, @jules.

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.


#22

‘min’ is the minified version.

  1. It’s smaller so it transfers faster.
  2. Extraneous characters for human-readable-formatting is removed. Parsers can execute it faster.

This is just one test. I loaded from a dev site on my VPS vs the CDNJS:


The difference is only 53ms. But this is a single resource. They add up!