PageSpeed JavaScript Loading

Question

I have tried ALL THE TECHNIQUES here, and I still cannot figure out how in Magento 1.9 I can get the javascript to not load above the fold, or after the page has loaded.

My website is dev.shielo.com

this is the page speed error i am getting from google:

58 / 100Speed

Should Fix: Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking script resources and 3 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. Remove render-blocking JavaScript: http://www.dev.shielo.com/…a/js/1baca94bb0796b5af64534b31746847a.js

Answer 1

forget about that, just enable FoomanSpeedster.
you have to look for "time to first byte" optimization, it has higher priority.

Reduce server response time - is your problem.
run https://github.com/AOEpeople/Aoe_Profiler to see if magento has some slow parts

i guess you need to configure php opcache and mysql optimization. also maybe magento cache is disabled.

then optimize images with
install these : gifsicle ImageMagick jpegtran pngcrush
https://github.com/mikebrittain/Wesley/blob/master/wesley.pl

Answer 2

Google suggests you to put the initially needed CSS inline and load the rest of the CSS when the page load is ready. Same goes for the javascript. Include the "must have code" inline and load the "nice to have code" on page load as suggested here

Try adding the async attribute in script tag or defer attribute.

For example:

<script src="filename.js" async></script>
<script src="filename.js" async="async"></script>

or

<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

I suggest you to use async, it loads the file only when needed. Defer attribute load the file at the end of the page, some time it will not perform its functionality required.

Answer 3

For other looking how to defer JS in Magento.

Magento 1.x uses a lot of inline scripts, which means it’s NOT possible to defer the loading of most of the default JS files included in a default Magento installation. If you defer the loading of those scripts you will receive tons of error because Magento will try to execute the inline scripts before the JS files have loaded.

Answer 4

The Mediarox Pagespeed extension allows to exclude inlined scripts by id and js files via reg expressions so it IS possible to defer your js. I am deferring all of my js except analytics (all of the default magento js files and inlined js aswell!) without any issues. However, this doesn't matter for Google Pagespeed results anymore, my results will be the same no matter if I defer my js or not.

By the way, the pagespeed extension works great with Fooman Speedster, there is no need to manually disassemble js files as it will merge the excluded scripts and load them after body start and merge the remaing scripts and load them before body end. But as I mentioned, your rating won't improve - it will most likely bring some kind of performance boost though.

For css the problem is somewhat different. Even if you include the critical css in your head and defer loading of your stylesheets via the Pagspeed extension, Google Pagespeed will still tell you that your css file is render blocking. Your ratings will go down even more if you server your css from a subdomain. I don't think this has anything to do with time to first byte and it seems the only way to fix this is to inject your css via js, I have tried using async and defer in my local.xml - this will change nothing I am afraid.