Magento Question posted in
The official documentation can be found here.

Async loading of javascript in Magento for PageSpeed

I’m trying to optimize my Magento 1.9.3 website, following Google PageSpeed hints, saying I have js and css that load synchrounously and block the page rendering.

To solve this issue, I’m putting all the javascript files with async loading, as advised in this answer.

So all my loaded scripts looks like this: 

<action method="addItem"><type>skin_js</type><name>js/jquery.fancybox.2.1.5.min.js</name><params>defer</params></action>
<action method="addItem"><type>skin_js</type><name>js/jquery.fancybox.2.1.5.min.js</name><params>async</params></action>

This way, running PageSpeed again, gives better results.

The problem is that I get plenty of javascript exceptions, because probably the scripts that are inside templates files (.phtml), load before the script has been loaded. This is worse, if I clear the browser cache and reload the page.

So, is there a better way to solve this “problem”?
Should I move all the files at the end of the page? Or just ignore GooglePageSpeed hints?

Thank you in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In the end the solution with js has come with an extension that moves all the js at the end of the dom, and does not seem to create problem loading the page.

    Extension is called just pagespeed and is from mediarox. I'll leave the link here, just for reference as long as it will continue working.

    Magento Google PageSpeed Optimization Extension

    Anyway I've been forced to configure the extension in a way that my custom stylesheets are loaded at the beginning of the dom, because other way it is visible that the DOM is loaded and ready much before stylesheet, and an awful effect was given.

    Very good results and improvements have come also with apache mod_pagespeed and with mod_expires and mod_headers well configured.

    With these small changes we got good results, but best of all came mainly from image compression and assets minification.


  2. 0

    You could also use “defer” to make them load at the end, which can be used with or without async.

    So if you load them with “defer” in the order you need to they should not throw exceptions, unless you use anything required before they are loaded.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search