Make merged js and css file asynchronous in magento

Question

Hello actually is anyone know how to make the merged js and css file load asynchronous in magento

i try add

<param>defer</param>

into

<action method="addItem"><type>skin_js</type><name>js/bundle.js</name><param>defer</param></action>

for every js file,

But it's not get any impact, actually where the best way to do this

and for css i try :

<script>

  function loadCSS(href){
    var ss = window.document.createElement('link'),
        ref = window.document.getElementsByTagName('head')[0];

    ss.rel = 'stylesheet';
    ss.href = href;

    // temporarily, set media to something non-matching to ensure it'll
    // fetch without blocking render
    ss.media = 'only x';

    ref.parentNode.insertBefore(ss, ref);

    setTimeout( function(){
      // set media back to `all` so that the stylesheet applies once it loads
      ss.media = 'all';
    },0);
  }
  loadCss('things.css');
</script>
<noscript>
  <!-- Let's not assume anything -->
  <link rel="stylesheet" href="things.css">
</noscript>

but i'm not sure where to put this script since everything, i mean the js and css loaded by xml,

hope someone can figure this out

Cheers

Answer 1

cheers mate,

I'm using this post as a reference

PageSpeed - Eliminate render-blocking JavaScript and CSS in above-the-fold content

for each action I have two lines of code

original

<action method="addJs"><script>prototype/prototype.js</script><params>defer</params></action>

edited

<action method="addJs"><script>prototype/prototype.js</script><params>defer</params></action>
<action method="addJs"><script>prototype/prototype.js</script><params>async</params></action>

I've put the modifications in my page.xml file located in the theme folder of the theme I'm using

app\design\frontend\default\xxxThemexxx\layout\

you also need to find if you have other xml files referencing to and modify accordingly

I've tested as written above and modified just the files in the page layout xml (in my case) just to see if after using google speed test the number the edited files do their work and it's fine!

cheers

Answer 2

For the .js files:

Add this to your action within your layout file:

<params>async</params>

This will cause them to load asynchronously. For example,

<action method="addItem"><type>skin_js</type><name>jquery/jquery-1.10.2.min.js</name><params>async</params></action>