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.
Thanks
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.
Thanks
Share Improve this question asked Jun 9, 2014 at 14:19 biswajitGhoshbiswajitGhosh 1471 gold badge2 silver badges17 bronze badges3 Answers
Reset to default 6I 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./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.sstatic/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./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.sstatic/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 Sexton https://varvy./pagespeed/render-blocking.html