20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Load Font Awesome CSS Asynchronous In Blogger

tutorial on load css file asynchronously in blogger template,learn trick to Eliminate-stop-render-blocking JavaScript and CSS in above-the-fold content blogspot website.to increase page load speed stop loading css stylsheet.
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Hello Folks,Today in this article we are going to explain How to install Font awesome CSS File Asynchronous.Mostly each and every website is using font awesome css in their websites oe blogs.But problem is this when you check your page speed test on google you will find that font awesome css file is rendering your webpage to load result speed is slow.How to remove font awesome blocking script file because this cause a delay in rendering your blog.You must eliminate render-blocking CSS in the above fold content.If you want to speed up your website page load time then you have to optimize CSS delivery of Font awesome so it will freely passes google page speed test.To check what scripts and css is rendering your website or blog,visit the below link.
After Visiting just fetch url of your website and you can easily see if there is any resources is blocking your webpage in rendering then you must check and solve it as soon to increase the page load speed time.you will see message like this if your website have blocking java script and font awesome css file:

eliminate render blocking java script and css in the above fold content
In the image you can clearly see that javascript is rendering our website page to load fast..we will soon sort it out :P but you can see there is no css file because we have already fixed it,so now you also need to fix.There are few methods to stop rendering css file from blogger template,but here we are going to share 2 methods with you,choose anyone and make fix css rendering file in google page speed test insights.In order to load asynchronous font awesome css file just follow the steps mentioned below.

How To Eliminate Render Blocking Css in blogger template

Installation Steps:[Method-1]
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on  Template -> Edit HTML.
Step 3. Now Search For </head> tag and copy the below java script and paste it just above the </head> tag.
<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("Link of your font awesome css file");
//]]>
</script>
If you want to load more than one css file then add the script like this:
<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("Css Link 1");loadCSS("CSS Link 2");
//]]>
</script>
Customization:
  • Replace CSS link 1 and CSS Link 2 with your css stylesheet url. 
Step 4. Save your template..Done !

Installation Steps:[Method-2]
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on  Template -> Edit HTML.
Step 3. Now Search for closing </body > tag and paste the below java script just above/before the </body> tag.
<script type="text/javascript">
(function() {
var css = document.createElement('link');
css.href = 'CSS File LINK URL';
css.rel = 'stylesheet';
css.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(css);
})();
</script>
Customization:
  • Replace CSS File LINK URL with your font awesome css file url. 
Step 4. Save your template..Done !

However we recommend to use first method to eliminate CSS render blocking above the fold content that is quite popular otherwise if you want you can use any method as per your need.

Post a Comment