How to Fix Render Blocking Font Awesome CSS Script?

Learn How to Manipulate a Font Awesome CSS file by Asynchronous which will not block page rendering.

Comments: 25
data:blog.title
asynchronous Font Awesome

Majority of web designer uses Font Awesome as alternative of Image solution in websites. Formerly we used to use different images in our website but this makes our site slower. But after introduce of Font Awesome now we can design and develop our site without any hindrance.

Apart from positive side of Font Awesome now come into negative side. Excessive use of Font Awesome icons on website also affects the site loading speed. And now talk about Render blocking CSS; these types of CSS script generally affect a page loading speed directly.  But you may think why? Because without CSS script we are not able to give beautiful design on a website. Yes this is absolutely true. But there are some CSS file which remains above the fold of a site that blocks a page’s normal loading time. Because before complete page loading those render blocking CSS file load on above the fold of a site. As a result, normal page stop loading at the middle of the process.

Font Awesome is a CSS a script which is loads from their server and display icons on our websites. And this loads above the fold of a website. As a result, this is a render blocking CSS script. You may visit Google page speed inside to test your Blog and see the test result.
  • https://developers.google.com/speed/pagespeed/insights


You will see in test result Font Awesome file has listed as render blocking CSS. This should optimize for increasing your website’s page speed.  

Google Page speed inside

But you won’t able to optimize this CSS file by hosting on other third party file hosting server. So the solution is asynchronous the Font Awesome file. Asynchronous is a popular medium of making a Blog site faster. Even Google AdSense using Asynchronous script to deliver advertisement on website faster.  As a result if we use asynchronous the Font Awesome file on our Blog or website then it won’t count as render blocking CSS.

Let’s make your current Font Awesome file asynchronous. Please follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Please take a backup of your Blogger template before proceed.

Step 2 Click on -> Template -> Edit HTML->

Step 3
 Now find the below Font Awesome file by pressing Ctrl+F (Windows) or CMD+F (Mac)  
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Or
<link href=' https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Note that I have given example with latest Font awesome version which is 4.5.0, but in your site it may be 4.2.0 or 4.3.0 version. So please find the accurate version.

Step 4 Cut your Font awesome file from your site and Paste it in a text editor like notepad.

Step 5 Now copy the below script from below and Paste it above/before closing head </head> of your site.

<script type='text/javascript'>
//<![CDATA[ 
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("Paste Your Font Awesome File Here");
//]]> 
</ Script>

Customization

  • Please replace the text Paste Your Font Awesome File Here with your Font awesome file from text editor.
Step 6 Finally click Save template button from the top of the screen.

Now it’s time to verify this script. First check your Blog that your Font awesome icons are loading or not? If loading perfectly then please go to Google’s page speed inside tester by through below URL.
  • https://developers.google.com/speed/pagespeed/insights
And add your website URL and see Font Awesome file is not listed on render Blocking CSS. That means you have successfully convert your Font awesome files in asynchronous format. And your site’s loading speed now increase significantly. For any further query feel free to write me. Thank you.

Related Post

Speak Your Mind

IT Consult BD says: 2/09/2016

vai, apni j note text highlighter post korecen seti te text color black, setike white korte hole ki korte hobe? and ekti post a dui dhoroner note lekhar jonno ekadhik color background and font awesome icon use kora jabe ki? jemonti apnar ei post a korecen.

Mohammad Fazle Rabbi says: 2/09/2016

Text highlighter onekgola share korci. jeita somporke jante chan seitar comment box a comment koron.

MD MUKUR ALI says: 2/09/2016

Sir SEO Boss Responsive Template এর মতো Contact যেটা পপুলার এর পাসে আসে সেটা Blogger Lab Full Width V1.1 Responsive Template এর কমেন্ট এর জায়গায় করবো কিভাবে ?

Sumon Molla says: 2/09/2016

https://3.bp.blogspot.com/-cNq4WfexEQM/VrnATKp3J6I/AAAAAAAAAu8/TFulaMHNPAk/s1600/Capture.PNG

vai, uporer picture er moto 2nd notice box kivbe banabo?

Mohammad Fazle Rabbi says: 2/09/2016

Mukil Bro. Please visit the below URLs for tutorial.

http://www.bloggerspice.com/2013/05/add-google-default-contact-form-widget.html

http://www.bloggerspice.com/2015/11/Custom-contact-form-for-Blogger-footer-section.html

Thank you.

Mohammad Fazle Rabbi says: 2/09/2016

Please search in search box. You can use my latest notification widget from below URL.

http://www.bloggerspice.com/2016/01/how-to-improve-Post-Engagement-by-using-custom-notification-boxes-in-blogger.html

Thank you.

মোঃ আনোয়ার হোসেন says: 2/09/2016

Brother is many many thanks us.

Ikha Prang says: 3/20/2016

thanks, its work 100%. Btw, How to fix:
Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
Leverage browser caching for the following cacheable resources:
Exsample targets:
http://carajelajah.blogspot.co.id/…=json-in-script&callback=showrecentposts (1 second)
http://carajelajah.blogspot.co.id/…callback=showpageCount&max-results=99999 (1 second)
"from pagespeed insights by google"
thanks

Mohammad Fazle Rabbi says: 3/20/2016

It can solve by using Htaccess but Htaccess widely use in WordPress. For Blogger we can take a simply step. Just display your all image in original size. For example if you are showing your Post image whose main dimension is 700px X 400px then don't use extra large or large option for image re-sizing. Instead of that use Original image size option. It will help to leverage browser caching.

samsury id says: 8/21/2016

I also have a trick to render blocking font awesome using @ font-face css

Mohammad Fazle Rabbi says: 8/21/2016

Hi Samsury,
If possible please share with us. Thank you. ;)

ramana says: 12/12/2016

what's it the meaning in step 4, should i Cut it and paste later, or just remove it.
thanks

Mohammad Fazle Rabbi says: 12/12/2016

Hi Ramana, If you are using font awesome script directly like below

<link href=' https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

then just use below line to replace text ---- Paste Your Font Awesome File Here

https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

I hope you would understand. ^_^

InspiredHeart says: 12/17/2016

This is very helpful. My only concern is that if the browser doesn't support Javascript, or Javascript breaks elsewhere on the page, it's possible Font Awesome (or whatever else we use this technique for) will not load at all.
Do you have any suggestions for a way to have a fall-back method?

Mohammad Fazle Rabbi says: 12/17/2016

Hi Inspired Heart, currently this can be use only for Font file and FontAwesome, I hope it will also work with Bootstrap.

You can control javaScript on responsive section. Suppose you can see my "back to top" widget only visible to desktop version, but if you visit my site from mobile then it won't load.

alternatively there are many conditional tag that can be use to load in different pages. :re

http://www.bloggerspice.com/2014/11/Ultimate-Guidelines-for-implementing-Blogger-Conditional-tag.html

Anonymous 2/18/2017

Not working on my blog.

Rabbi Khan says: 2/18/2017

This will work 100% i'm using this method in my site. One thing you can do, add the script below closing header.

</head>

Faish Khan says: 8/18/2017

not working please help

Rabbi Khan says: 8/20/2017

Hi Faish ^_^
Did you replaced below text by Font Awesome file?

Paste Your Font Awesome File Here

if not then please replace it. And place it either above closing header or closing body. I am following this trick on my Blog and working fine.

Aryan Z says: 10/13/2017

Its most working fine, i got 10 more score on test speed. But still have problem with caching browser (i'm using blogger host)

Rabbi Khan says: 10/30/2017

Sounds good..:up
This is bit tough to improve Blogger site speed to 100%. If you can use AMP Blogger theme then it would be better and faster.

Favour says: 11/26/2017

please help I look for the code <link.... in my html but couldn't find it, what do I do?

Rabbi Khan says: 11/26/2017

Hi Favour :si
Your Blogger theme doesn't contain Font Awesome. So you don't need this tutorial.

harish says: 8/23/2018

Thank you! Canva revolutionised my work. I work as a PR & marketing manager in hospitality and I don’t have a big marketing budget, so Canva is perfect for me. 1$ for picture is not so much but I can create some nice offers for our clients. Here you have an example of my work: http://www.dwor.pl/pl/klienci_biznesowi/spotkania_wigilijne/ and it was only for 2 $ It’s a nice alternative for Shutterstock etc. Fonts are beautiful, it is very creative thinking to learn how to mix them. I use it also on my personal blog

Blogger Spice says: ADMIN 8/26/2018

Great! :up

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *