How to Remove render-blocking JavaScript and StyleSheet in wordpress?
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>
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>.
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 Sextonhttps://varvy.com/pagespeed/render-blocking.html