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

GiDo · Accepted Answer · 2015-02-22 13:24:45Z

15

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.

answered Feb 22, 2015 at 13:24

GiDo

1,34012 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TonkBerlin Over a year ago

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 Over a year ago

@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 Over a year ago

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

M-F · Accepted Answer · 2016-02-19 15:25:05Z

0

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>
<!-- ... -->

answered Feb 19, 2016 at 15:25

M-F

192 bronze badges

Collectives™ on Stack Overflow

HTML <script> async Attribute in Magento

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related