Defer Merged JS in Magento

Question

I'm using Magento 1.9.

In Magento System Configuration, I have set Merge JavaScript Files to Yes so that all JS will be merged into one file.

Is it fine if I defer the merged JavaScript files? If so, how? Are there any consequences if I do that?

I'm trying to defer the merged JavaScript files in hope of speeding up the page loading speed (as it was suggested by GTmetrix and PageSpeed Insight).

Also, is there any way I can minify the merged JavaScript file?

Answer 1

Magento default merging mechanism is most of the time getting things worst and elements like add to cart or some othet buttons may brake in poorly written templates. I suggest yo try a server side minification , merging and compression. You also have more fine grained controls. I'm talking about pagespeed by Google, integrated directly into Nginx or Apache webservers. What kind of hosting are you on now?

Answer 2

Putting defer will break your site because inlined JS depends on the merged file loading first.

You can try and move all your JavaScript to the bottom of the web page. That will defer loading of JS.

Something like an observer on http_response_send_before event:

function moveJS(){
...
  preg_match_all('#(<script.*?</script>)#is', $html, $matches);
  $js = '';
  foreach ($matches[0] as $value)
    $js .= $value;
...
}