HTML [removed] 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

Answer 1

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.

Answer 2

You make a small mistake. This is actually the right answer for the question above.

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