[SOLVED] Eliminate Render Blocking Resources

Eliminate Render Blocking Resources

Yesterday When I Checked My Blog Speed On Google Insight, The Blog Score Was very LOW!. The Blog Speed Was Very Low Because Of Number Of Externally Linking CSS And JAVASCRIPT Files.

1. Lazy Load Stylesheet Script (SINGLE)
2. Lazy Load Stylesheet Script (MULTIPLE)
3. Demonstration Video

The Problem My Blog Was Facing Was To "Eliminate Render Blocking Resources" It Was Showing A CSS File Causing This Problem. After Inspecting In Chrome Developer. It Was Font-Awesome Stylesheet Causing This Problem.

After Searching This Problem On The Internet, I Found That There Is No Solution, But Some Of Them Recommended To Put The CSS File In The HEAD Of The Page That Is To Place The CSS File Just Below <head> To Eliminate Render Blocking Resources.

I Figured It Out That Not Most Of The CSS Files Causes This Problem, When I Checked These Problems On My Other Blog Most Of The Blog Don't Have This Problem. Then, I Checked For The Size Of Font-Awesome CSS. It Weights Around 455~78KB.

CSS Files Having A Large Size Causes This Problem While Page Loading. So I Decided To Find A Solution For This Problem.

I Came Across Lazy Loading Stylesheet For HTML Pages. I Implemented The Same In Blogger And Found That It Worked In Blogger And Also Solved "Eliminate Render Blocking Resources" Problem.

Lazy Load Stylesheet Script (SINGLE)


<!-- IF BROWSER DOESN'T SUPPORT JAVASCRIPT THEN USE NORMAL LINK TAGS TO LOAD CSS -->
<noscript>
      <link rel="stylesheet" type="text/css" href="CSS_HERE"/>
</noscript>

<!-- LOAD CSS -->
<script type="text/javascript">//<![CDATA[
(function() {
    var css = document.createElement('link');
    css.href = 'CSS_HERE';
    css.rel = 'stylesheet';
    css.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(css);
})();
//]]></script>

As Some Of The User Were Having Two Or More Rendering CSS, I Modified The Original Script For Argument Based.

You Can Use Below Script If You Have More Than One Rendering CSS.

Lazy Load Stylesheet Script (MULTIPLE)


<!-- IF BROWSER DOESN'T SUPPORT JAVASCRIPT THEN USE NORMAL LINK TAGS TO LOAD CSS -->
<noscript>
      <link rel="stylesheet" type="text/css" href="CSS_HERE"/>
      <link rel="stylesheet" type="text/css" href="CSS_HERE"/>
      <link rel="stylesheet" type="text/css" href="CSS_HERE"/>
</noscript>

<!-- LOAD CSS -->
<script type="text/javascript">//<![CDATA[
function lazycss(url) {
  var css = document.createElement("link");
    css.href = url;
    css.rel = "stylesheet";
    css.type = "text/css";
    document.getElementsByTagName("head")[0].appendChild(css);
}
// LOAD CSS
lazycss("CSS_HERE");
lazycss("CSS_HERE");
lazycss("CSS_HERE");
//]]></script>

Make Sure You Replace "CSS_HERE" With The CSS File Path.