How to Remove render-blocking JavaScript and StyleSheet in wordpress?

2 Views

I’m using wordpress and a theme and made some changes into this theme, when I want to increase page speed Google Page Speed tester says that I need to remove all blocking scripts and styles.

I don’t know what is the Render blocking and how to solve this can any one guide me to fix the important issue.

Read More

Thanks

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. I solve Remove render-blocking JavaScript as follows:

    <script src="filename.js"></script>
Replace with Following:  
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

  2. Lets say for example your <head> section looks like this

    <!DOCTYPE html>
<html>
<head>

    <title>css - How to Remove render-blocking JavaScript and StyleSheet in wordpress? - Stack Overflow</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="//cdn.sstatic.net/Js/stub.en.js?v=6c41e89d8d17"></script>

</head>

    just move the script files to the bottom of the document, or the footer.php file, like so

    <!DOCTYPE html>
<html>
<head>

    <title>css - How to Remove render-blocking JavaScript and StyleSheet in wordpress? - Stack Overflow</title>

</head>
<body>

<!-- all your other codes here -->

<!-- then your scripts right before the closing body tag -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.sstatic.net/Js/stub.en.js?v=6c41e89d8d17"></script>

</body>
 </html>

    If you move all the scripts out of the head and to right before the </body> closing tag, then that should get rid of that message in google page speed.

    Please be aware that it might still give an error/message about CSS stylesheet has render blocking.. well, I would just ignore that , since I want my css to render before the document, so I would not remove that from the <head>.

  3. These solutions are just partial solutions.. methods of inlining, placing scripts at the bottom, using async or defer are not the best solution. If u wanna letting the page load first and then loading the js.

    for JS place this code after the </body > tag 

    <script type="text/javascript">
 function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "yourjavascripttoload.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>

    Src: Patrick Sexton
    https://varvy.com/pagespeed/render-blocking.html