Saturday, March 5, 2016

How To Charge Font Awesome Css Asynchronous Inward Blogger

How To Load Font Awesome CSS Asynchronous In Blogger How To Load Font Awesome CSS Asynchronous In Blogger
Hello Folks,Today inwards this article nosotros are going to explicate How to install Font awesome CSS File Asynchronous.Mostly each together with every website is using font awesome css inwards their websites oe blogs.But occupation is this when y'all depository fiscal establishment tally your page speed examination on google y'all volition uncovering that font awesome css file is rendering your webpage to charge trial speed is slow.How to take away font awesome blocking script file because this drive a delay inwards rendering your blog.You must eliminate render-blocking CSS inwards the above crimp content.If y'all desire to speed upward your website page charge fourth dimension together with hence y'all accept to optimize CSS delivery of Font awesome hence it volition freely passes google page speed test.To depository fiscal establishment tally what scripts together with css is rendering your website or blog,visit the below link.
After Visiting simply fetch url of your website together with y'all tin easily encounter if at that topographic point is whatever resources is blocking your webpage inwards rendering together with hence y'all must depository fiscal establishment tally together with solve it equally presently to increase the page charge speed time.you volition encounter message similar this if your website accept blocking coffee script together with font awesome css file:

How To Load Font Awesome CSS Asynchronous In Blogger How To Load Font Awesome CSS Asynchronous In Blogger
In the ikon y'all tin clearly encounter that javascript is rendering our website page to charge fast..we volition presently form it out :P but y'all tin encounter at that topographic point is no css file because nosotros accept already fixed it,so forthwith y'all besides need to fix.There are few methods to halt rendering css file from blogger template,but hither nosotros are going to part two methods amongst you,choose anyone together with brand cook css rendering file inwards google page speed examination insights.In social club to load asynchronous font awesome css file simply follow the steps mentioned below.

How To Eliminate Render Blocking Css inwards blogger template

Installation Steps:[Method-1]
Step 1. Log inwards to your Blogger account together with Go to your Blogger Dashboard.
Step 2. Now Click on  Template -> Edit HTML.
Step 3. Now Search For </head> tag together with re-create the below coffee script together with glue it simply to a higher house the </head> tag.
<script type="text/javascript">
//<![CDATA[
portion 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 y'all desire to load to a greater extent than than 1 css file together with hence add together the script similar this:
<script type="text/javascript">
//<![CDATA[
portion 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 together with CSS Link 2 amongst your css stylesheet url. 
Step 4. Save your template..Done !

Installation Steps:[Method-2]
Step 1. Log inwards 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 together with glue the below coffee script simply 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 amongst your font awesome css file url. 
Step 4. Save your template..Done !

However nosotros recommend to utilization starting fourth dimension method to eliminate CSS homecoming blocking to a higher house the crimp content that is quite pop otherwise if y'all desire y'all tin utilization whatever method equally per your need.

No comments:

Post a Comment