3

I've been told this could be done with the Magic module but I couldn't find documentation\videos\readme anywhere for it so I ask how to do these specific things with it in my Drupal 7 site:

  1. How to make JS Async?
  2. How to eliminate unnecessary JS?

I need this for trying to take care the known Page spped insights advice "Eliminate render blocking JS above the fold content". Thanks.

Update: This could be done with AdvAgg module easily, see the following answer by Mikeytown2:

1

AdvAgg can move the JS to the footer and also defer it with minimal issues. It can also async load the JS but this results in bad things from happening as drupal/jQuery is not async safe. Setting async => TRUE via hook_js_alter works, just be careful as the script needs to be async safe. You can also set the async attribute in the options array when using drupal_add_js.

It can also async load CSS but that results in a flash of unstyled content. Issue to fix this: Inline critical css

See Reorder Javascript loading in theme? for an example of AdvAgg doing this. The AdvAgg readme is slightly outdated but points you in the right direction on how to get a higher pagespeed score.

Will also suggest http://www.webpagetest.org/

  • Mikey, Can you please elaborate how to move JS to the footer with AdvAgg? This noble module is so enriched with options - I Couldn't find (Or could not recognize) such option last time I checked for it. Moreover, can you please add some more information for JS rookies like me (I'm just starting to taste all this world of JS) what is a "Safe" Asynchronous scripting? Much thanks! – JohnDoea Jun 17 '15 at 22:11
  • 1
    @benos 1 Minute 40 seconds video starting at the modules install page showing what to do in order to get a good page speed score youtube.com/watch?v=zjeBwY04o0g Install the advagg modifer module and go to admin/config/development/performance/advagg/mod then under "Adjust javascript location and execution" check All where it says "Move JS to the footer" – mikeytown2 Jun 17 '15 at 23:37
  • 1
    @benos Async has to do with script order. If there is some inline JavaScript that uses jQuery and jQuery is set to load async then that inline script will fail. Also fails with other js files stackoverflow.com/a/25362902/125684 – mikeytown2 Jun 17 '15 at 23:45
  • 1
    WOW! Moving the JS to the bottom solved the problem - PSI no longer shows the advice to eliminate the render-blocking atfc + the grade went up from 62-63 to 72-73 for mobile! and 79-81 to 84 for desktop. The GTmetrix went also up, and the yslow grade went from b to a, and of course, the site seems to work even faster. So, what can I say, Thank you from all heart Mikey, you solved the problem I struggled with for some days... I'm joyful that the help you gave me is here to help everyone else. I'll keep reading on the Magical and amazing AdvAgg module, Ben. – JohnDoea Jun 18 '15 at 0:16
2

you can use async_js for loading asynchronly.

and in hook_js_alter you can remove js files you don't want to have on the page.

you can also place the JS at the bottom of the page in your theme's html.tpl.php, by printing

<?php print $scripts; ?>

just before the </body> tag.

  • Thank you very much rémy. Already tried putting <?php print $scripts; ?> at the end of page but the (only!) PSI advice to remove render-blocking js still appeard, and the site still got the same low score for mobile devices (trust me, it's the main problem of my site and it also made my slider not working but that's another issue)... Anyways I will try the 2 other modules you listed asap. Just one little question, how could I know what JS is causing the render-blocking so I could remove it with hook_js_alter? Thx, – JohnDoea Jun 17 '15 at 13:28
  • 1
    developers.google.com/speed/pagespeed/insights will list you the render-blocking files – rémy Jun 17 '15 at 14:39
  • When JS aggregation is off, it gives me a very long list... Without telling what HTTP req was the longest to take... What else would you suggest? It's very, very, important for, deep thanks! – JohnDoea Jun 17 '15 at 19:22
  • can you provide an url, that i can have a look myself ? – rémy Jun 18 '15 at 11:56
  • The problem was solved, the PSI advice no longer appear. I followed Mike's advice upstairs to move all JS to the footer. Thanks, – JohnDoea Jun 18 '15 at 14:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.