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!