0

Checking through pagespeed insights got this error as "Eliminate render-blocking JavaScript and CSS in above-the-fold content".

Javascript:

http://www.staging.website.com/theme/js/jquery.min.js
http://www.staging.website.com/theme/js/bootstrap.min.js
http://www.staging.website.com/theme/engine1/jquery.js

CSS:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
http://maxcdn.bootstrapcdn.com/…t-awesome/4.3.0/css/font-awesome.min.css
http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css
http://www.staging.website.com/theme/css/demo.css
http://www.staging.website.com/theme/css/aboutus.css

I have tried these code for eleminating render blocking javascript.

<script type="text/javascript">
 function downloadJSAtOnload() {
 var element = document.createElement("script");
  element.src = "http://www.staging.website.com/theme/js/jquery.min.js";
   element.src="http://www.staging.website.com/theme/js/bootstrap.min.js
   element.src="http://www.staging.website.com/theme/engine1/jquery.js";
 document.body.appendChild(element);
 }
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
 </script

I have tried this javascript code in my file as well as in and in footer as well It is working fine but the js files is not loading at all.

And for css i have tried this but css is not loading 

<script>
  /*!
  loadCSS: load a CSS file asynchronously.
  */
  function loadCSS(href){
    var ss = window.document.createElement('link'),
        ref = window.document.getElementsByTagName('head')[0];

    ss.rel = 'stylesheet';
    ss.href = href;

    // temporarily, set media to something non-matching to ensure it'll
    // fetch without blocking render
    ss.media = 'only x';

    ref.parentNode.insertBefore(ss, ref);

    setTimeout( function(){
      // set media back to `all` so that the stylesheet applies once it loads
      ss.media = 'all';
    },0);
  }
  loadCss('styles.css');
</script>
<noscript>
  <!-- Let's not assume anything -->
  <link rel="stylesheet" href="styles.css">
</noscript>
user8001297
  • 173
  • 1
  • 4
  • 18
  • For js use and for css use CSS example taken from https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously – Saad Suri Jul 04 '17 at 12:50
  • – user8001297 Jul 04 '17 at 12:52
  • Yes you need to use async attribute to asynchronously call js file – Saad Suri Jul 04 '17 at 12:54
  • if i add async for javascript files it is not working the javascript – user8001297 Jul 05 '17 at 04:51
  • @SaadSuri after adding for css files it is getting another issue as "Prioritize visible content Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content." – user8001297 Jul 05 '17 at 04:56
  • any suggestion for this issue – user8001297 Jul 05 '17 at 09:51
  • Use css files in head section and js files after body tag with async attribute. Might be helpful for you – Saad Suri Jul 05 '17 at 09:56
  • @SaadSuri css i have used in head tag only but heading this message in pagespeed insights "Prioritize visible content Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content." – user8001297 Jul 05 '17 at 10:57

1 Answers1

1

A way we found sometimes works depending on JS put 2 as one but this did not always work also we found putting the js script in the landing page Eliminated the render-blocking JavaScript but youn have put it in all pages of your website. We Eliminated render-blocking CSS by putting the code into landing page this gave us 100% from google page insite but on tests on mobiles it slowed down the website so nwe when back to 86% out of a hundred enter image description here

jocar
  • 21
  • 5