Can we move render blocking scripts to bottom of page?
My site is just un-usable because it takes 10 seconds to load - each and every time.
Google page speed insights reports the render block scripts below make the page "HANG" before any thing shows up.
Quote Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 5 blocking script resources and 19 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. END QUOTE
Thought I would ask you first but in the meantime I will hunt for a WordPress script that might move js around. And while I compress the images on the site.
Has anyone figured out what it really takes to "Eliminate render-blocking JavaScript and CSS in above-the-fold content" in the Salient theme? I've read five posts on the topic, but it all seems a little unresolved. It sounds like all you have to do is become perfectly familiar with all scripts and CSS, their orders and dependencies. I'm not that good.
Has anyone found a consultant that can get it done, or is this theme just too complex to pass google's little test?
This guy Patrick Sexton stated that in this article : "Deferring of javascript is one of those issues on the web that can make you want to pull your hair out trying to find a solution. Many people say "just use defer" or "just use async" or others say "just put your javascript at bottom of page" but none of those solve the problem of actually allowing a webpage to fully load and then (and only then) loading external JS. Nor will they get you past that "Defer loading of javascript" warning you are getting from the Google page speed tool. This solution will."
So he suggest this method (which i haven't tried, cause i like to know how to applied this code in html before end of </body> tag), check out "screenshot-varvy.com-2017-01-11-01-17-26.png", to solve this "Eliminate render-blocking JavaScript and CSS in above-the-fold content" issue that checked by Google PageSpeed Insights
My ranking in Google PageSpeed Insights show very different result against GTmetrix, as Tahir mentioned before Google Page Insights Shows Errors/Warnings, Google PageSpeed Insights is not accurate.
i like to know how to apply Patrick Sexton's "defer.js" method, and if i applied will it destroy my webpage? And is this method gonna work? Thanks you for solving my doubts :)
Tahir, that plugin was recently removed from wordpress. render blocking js is completely killing our site's pagespeed on mobile. Do you have any other recommendations for addressing this issue?
Can we move render blocking scripts to bottom of page?
My site is just un-usable because it takes 10 seconds to load - each and every time.
Google page speed insights reports the render block scripts below make the page "HANG" before any thing shows up.
Quote
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 5 blocking script resources and 19 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
END QUOTE
Thought I would ask you first but in the meantime I will hunt for a WordPress script that might move js around. And while I compress the images on the site.
Here is the page I used to discover why my page would not load.
https://developers.google.com/speed/pagespeed/insights/Hey,
Simply use W3Total Cache Plugin .
Thanks
ThemeNectar Support Team
yes. i found and installed it last night. glad to hear it is approved by theme nectar.
it is breaking the theme so i will have to trail/error to see what scripts to keep at top.
great theme!
Has anyone figured out what it really takes to "Eliminate render-blocking JavaScript and CSS in above-the-fold content" in the Salient theme? I've read five posts on the topic, but it all seems a little unresolved. It sounds like all you have to do is become perfectly familiar with all scripts and CSS, their orders and dependencies. I'm not that good.
Has anyone found a consultant that can get it done, or is this theme just too complex to pass google's little test?
Hey Mike ,
Please see: Google Page Insights Shows Errors/Warnings . Also have a look at this Plugin : https://wordpress.org/plugins/asset-queue-manager/screenshots/ .
Thanks
ThemeNectar Support Team
Ah! cool. Thanks Tahir!
That's a great plugin and will help... and it's nice to see it in print that the page speed checker isn't the ultimate authority.
Thank you.
Hi Theme Nectar,
I like to increase my page speed, check out "screenshot-gtmetrix.com-2017-01-11-01-20-05.png"
This guy Patrick Sexton stated that in this article :
"Deferring of javascript is one of those issues on the web that can make you want to pull your hair out trying to find a solution. Many people say "just use defer" or "just use async" or others say "just put your javascript at bottom of page" but none of those solve the problem of actually allowing a webpage to fully load and then (and only then) loading external JS. Nor will they get you past that "Defer loading of javascript" warning you are getting from the Google page speed tool. This solution will."
So he suggest this method (which i haven't tried, cause i like to know how to applied this code in html before end of </body> tag), check out "screenshot-varvy.com-2017-01-11-01-17-26.png", to solve this "Eliminate render-blocking JavaScript and CSS in above-the-fold content" issue that checked by Google PageSpeed Insights
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.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>
My ranking in Google PageSpeed Insights show very different result against GTmetrix, as Tahir mentioned before Google Page Insights Shows Errors/Warnings, Google PageSpeed Insights is not accurate.
i like to know how to apply Patrick Sexton's "defer.js" method, and if i applied will it destroy my webpage? And is this method gonna work? Thanks you for solving my doubts :)
Regards,
Ming Yao
@Dragonlee ,
Try this plugin instead of that JS code : https://wordpress.org/plugins/above-the-fold-optimization/ .
Best.
ThemeNectar Support Team
Tahir, that plugin was recently removed from wordpress. render blocking js is completely killing our site's pagespeed on mobile. Do you have any other recommendations for addressing this issue?
Hi Travis,
Could you try and use a different plugin like suggested on this guide - https://www.wpbeginner.com/wp-tutorials/how-to-fix-render-blocking-javascript-and-css-in-wordpress/
Wordpress site suffer from this problem due to how wordpress works generally.
Let us know if it works.