5

I am working on some performance issues for a site I launched recently. Looking at Google's PageSpeed insights I see that High priority on the list is Defer parsing of Javascript. Here is a link:

https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fwww.gastonia.com_2F&mobile=false&rule=DeferParsingJavaScript

Wow, over 1 MB of Javascript to parse!! Notice that most of these are from the facebook app (maybe the answers is to remove the fb app, ha!)

Has anyone successfully deferred this in Drupal? I have tried using script defer="defer", and Google gives suggestions like "add script tags in comments and then eval() them, but they give no examples and I am having trouble finding a good tutorial. Any resources or direction is appreciated!

On a side note, if you see anything else in that list that is easily overcomable by drupal, please add a comment. The site in question is http://www.gastonia.com in case you wanted to look at the source code.

1
  • I did find a tutorial similar to what I am looking for, but this is for wordpress. wpwebhost.com/… Can this be applied to Drupal? If so what parts here are relevant? Just ignore the wp elements? If anyone knows of a tutorial like this for Drupal, please share.
    – blue928
    Commented Aug 9, 2012 at 2:44

4 Answers 4

3

Checkout these 2 projects:

  • LABjs

    This project aims at support for LABjs in Drupal. LABjs is a JavaScript loader, used by Twitter, Vimeo, examiner.com… which loads (and executes) all scripts in parallel as fast as the browser will allow.

    Features

    Once installed, this module looks for all your JavaScript and LABjsify them automatically. This make all JavaScript are loaded in parallel as maximum as browser supports. The other advantage is that script loading does not block page render.

  • HeadJS

    Headjs module uses the totally awesome head.js library by the same author of jQuery Tools to dramatically improve javascript loading times by adding only one script to the document's head and then downloading all other script files in parallel.

    Since downloading many small files at the same time is faster than downloading one big file, head.js makes pages load blazingly fast and is especially beneficial for mobile browsers who limit the size of individually cached javascript files.

5

Given that nearly everything in Javascript for Drupal is triggered by a $(document).ready() in jQuery, I don't see any real advantage to using defer. In fact, I recently had a real headache1 from some code I inherited that mixed the two.

One recommendation (I think YSlow suggests it) that you can do is to move scripts to the end, right before the closing </body>. This would mean moving the <?php print $scripts; ?> in your html.tpl.php. While not deferring the parsing, it does delay the loading so your page renders out quicker, and I have never had any problems in Drupal doing this.

If you do want to add the defer, you need to implement hook_js_alter:

function mymodule_js_alter (&$javascript)
{
  $javascript['misc/drupal.js']['defer'] = TRUE;
}

If you want to defer everything, you could try

function mymodule_js_alter (&$javascript)
{
  foreach ($javascript as $key => $value) {
    $javascript[$key]['defer'] = TRUE;
  }
}

Otherwise, most of the normal Pagespeed fixes don't have much to do with Drupal itself. As long as you deploy with JS and CSS aggregation enabled you should be good. Configure Apache to use compressed responses and decent cache lifetimes and I don't think PageSpeed will complain about much and give you all A's and B's.

1
  • 1
    Hi, thanks for that. Moving those to the end did help! So far no noticeable errors or side effects from calling the $scripts tag below at the end of the document.
    – blue928
    Commented Aug 9, 2012 at 2:46
1

Keep in mind that most of these third parties if not all are using CDNs and will often have far future expiration headers. If you look at firebug and make sure that Disable Browser Cache is turned off in NET you will see what most requests look like. I looked at my site and there are only about 4 requests even with facebook and google widgets on the page. The good news is that everyone is going the same thing, if you look at some sites they are way more than 1mb.

It is good practice to reduce the amount of requests each page makes but if you need to keep certain features do to requirements then it is great to use far future expirations and spread requests over parallel servers.

0

To expand on @mpdonadio this is what defer everything would look like under Drupal 8

/**
 * @file
 * Overrides insert.js in Insert module using hook_js_alter
 */
use Drupal\Core\Asset\AttachedAssetsInterface;

/**
 * Implements hook_js_alter().
 */
function override_insert_js_js_alter(&$javascript, \Drupal\Core\Asset\AttachedAssetsInterface $assets)
{
    foreach ($javascript as $key => $value) {
      $javascript[$key]['attributes']['defer'] = TRUE;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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