CODEWITHSUNDEEP
javascriptjqueryfacebookpinterestgoogle-plus-one
Mike Willis
Mike Willis

Reputation: 1508

Handling third-party javascripts quickly, so pages don't appear slow

I've been doing some testing with http://www.webpagetest.org/ today to see which scripts are slowing down my page loads. Long story short, I've discovered that third-party scripts are causing a noticeable slowdown in loading. I'm loading them all at the bottom of the page, using async and defer ( see https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/ ).

I believe the main reason for the slowdown is not just in grabbing the files from the third-party, but in actually running the various scripts, especially side-by-side with mine.

I'd like to keep all the scripts, but I want them to be loaded behind the scenes, after all my scripts have loaded, and with no noticeable performance decrease in the browser. For example I don't want the browser to "stutter" or jump around if I start scrolling down while the third-party scripts are loading, or various other minor annoyances.

Has anyone tackled this before and come up with a good solution? So far I'm thinking the best option might be to load the third-party scripts using jQuery.getScript(), after all my scripts have finished (literally at the bottom of one of the .js includes). Still, that may load them all concurrently which could make the browser sluggish for a second or two.

Some more details on how I did the testing, for anyone interested:

The third party scripts in question are:

None of these are particularly bad on their own, but all at once they combine and take too long, and make the browser too sluggish.

Upvotes: 2

Views: 1685

Answers (2)

Ryan Wheale
Ryan Wheale

Reputation: 28430

In the past I have had some success waiting until the page was fully loaded (which happens after DOM Ready). Any scripts that you load before window.load causes the browser to do more work on top of the parsing/rendering/resource loading it's already doing. Traditionally, we do everything on DOM ready - which can quickly give the browser a lot to deal with. Instead, split off any of your non-crucial functionality and let the browser deal with them after all the crucial stuff has been dealt with.

Try taking your non-crucial scripts (eg. like buttons, anything not crucial to the page) and wait to load them until window.load. Then apply a fade-in effect or something else to ease-in the display. If window.load is too long to wait (ie. you have a bunch of images on your page), then you can do something like this:

$(function() {
    var timer = setTimeout(loadThirdPartyScripts, 1200),
        $window = $(window);

    $window.on('load.third_party', loadThirdPartyScripts);

    function loadThirdPartyScripts() {
        clearTimeout(timer);
        $window.off('load.third_party');
        /* load your scripts here */ 
    }
});

This will load all of your non-crucial scripts after the window has loaded or after 1.2 seconds - whichever comes first (adjust the timeout as needed). If you have a lot of images - I suggest lazy loading ones below the fold - the whole point being to get window.load to fire as soon as possible.

Disclaimer: if you wait until window.load to load a dozen or two resources, you are still going to experience the same stutters that you are now.

Upvotes: 0

Vecnas
Vecnas

Reputation: 1407

You can queue scripts, if problem is in simultaneous load. Also this load should be started on document ready (i see you already using jQuery, so use it in example). Example code (tested locally, works).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  var scripts2load = [
      "http://apis.google.com/js/plusone.js",
      "http://connect.facebook.net/en_US/all.js#xfbml=1"
  ];

  function loadNext() {
    var url = scripts2load.pop();
    if (url) {
        $.ajax({
          url: url,
          cache: true,
          crossDomain: true,
          dataType: "script",
          success: loadNext
        });
    }
  }
  $(loadNext)
</script>

Upvotes: 2

Related Questions