HTML <script> async Attribute in Magento

Question

I would like to try to insert the "async" attribute in Prototype JavaScript script tag in Magento 1.9.1:

<script type="text/javascript" src="http://www.mywebsite.com/media/js/ec1651c8b1a4ea49a916679f1e120ccf.js"></script>

I would have this result:

<script type="text/javascript" src="http://www.mywebsite.com/media/js/ec1651c8b1a4ea49a916679f1e120ccf.js" async></script>

Where I have to insert "async"? What is the file with this line code? Thanks

Solution

Look at the file app/design/frontend/<yourlayout>/<yourtheme>/layout/page.xml (or copy app/design/frontend/base/default/layout/page.xml into your theme).

Inside this file, search for the following lines:

<!-- ... -->
<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <!-- ... -->
</block>
<!-- ... -->

And change addJs calls by:

<!-- ... -->
<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script><params>async</params></action>
    <!-- ... -->
</block>
<!-- ... -->

As your are using the merging javascript feature of magento, you need to apply this change to every addJs definition, because Magento will group files by params.

Comments

[TonkBerlin]

W3Shool says: The async attribute is only for external scripts (and should only be used if the src attribute is present). So, why do you want to use it if the prototype is local?

[GiDo]

@TonkBerlin I prefer to refer to the Mozilla Developer Network instead of W3School ;-) The think is async have sense only with script that have a src attribute (in opposition to inline script). In this case prototype.js is not included inline but loaded by the browser based on a src attribute.

[TonkBerlin]

Is it usefull to load the content without function if the .js is not loading?