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.

11
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.
How to Fix Render Blocking Font Awesome CSS Script?
4 Stars stars - "How to Fix Render Blocking Font Awesome CSS Script?" Majority of web designer uses Font Awesome as alternative of Image solution in websites. Forme...

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.

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

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

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

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

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.

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.

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

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.

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

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

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *