js/css combine groups

[CptCharlesG]

Hello,

I've read it somewhere that we can make the js/cs merge function work a bit more effectively, if we <group> them like this:

<action method="addJs"><script>prototype/prototype.js</script><group>general</group></action>
<action method="addJs"><script>lib/jquery/jquery-1.11.2.min.js</script><group>general</group></action>
<action method="addJs"><script>lib/jquery/noconflict.js</script><group>general</group></action>

It works fine, I choosed <group>product</group> for the additional scripts loaded on the product page, so it loads two separate files:

<script type="text/javascript" src="https://mydomain.com/media/js/hash1.js" general></script>
<script type="text/javascript" src="https://mydomain.com/media/js/hash2.js" product></script>

But the problem is:
It puts the name of the group to the end of the script tag, and it causes errors during w3c validation.

Is there any way to get rid of them? Or am I doing something wrong with the <group> tags?

Thanks for your help.

[ypsil0n]

sorry for the late reply, just encountered it myself and got a way around it

you can simply name the group: async="async" or defer="defer"

what name you use depends on how the script should be called, async or after the page finished loading (defer)

Hope that'll be handy to someone

Note: Using this solution gives you a limitation of groups (2) but you wont need any changes in the Magento code or a extension

[CptCharlesG]

Thanks for your suggestion!

Actually I did something similar: as our website is using HTML 5 standards, I created some data-* attributes, like data-js="general" and data-js="products". The second one also got the async="async", but I'm afrad using it to the general javascripts - those would need a deeper test.