5 ms·

The best way to load external JavaScript

50 points by sant0sk1 17y ago

michaelfairley 17y ago
Google conveniently hosts and distributes most of the common Javascript libraries through their CDN, and allows external developers to load them using this technique. http://code.google.com/apis/ajaxlibs/ http://code.google.com/apis/ajaxlibs/
- sant0sk1 17y ago
  Has anybody else noticed slower load times using Google's hosted libraries than their own?
  - jacquesm 17y ago
    This has nothing to do with googles hosted libraries but it is javascript loaded from google servers: I've had both analytics and adsense slow down page loads quite a bit. Analytics tags should always go as far to the end of the page as you can manage, with adsense tags you're bound to put them where they display the ad. 3rd party javascripts are a pain, it's an extra point of failure that is not under your control.
    - bmelton 17y ago
      If I'm not mistaken, at least Drupal has a module that allows you to host the google analytics JS files on your own server. This would lead me to believe that you can do that sans Drupal, though I've never attempted it (in either fashion actually.)
      - jacquesm 17y ago
        thank you, I'll have a look at that, that may be helpful!
  - mrshoe 17y ago
    It's probably faster to serve them off your own server due to HTTP keepalive. Sure, making a new connection to google's CDN might be faster than making a new connection to your server, but it's definitely not going to be faster than sending a little more data over an existing connection. Not to mention the extra DNS lookup.
    - michaelfairley 17y ago
      This is assuming that the script file and the page it's included in are coming off the same server. Most people who are tweaking performance at this level have probably already separated the serving of static and dynamic content.
    - blasdel 17y ago
      The idea is that if everyone uses the google-hosted jquery, it'll almost always be in the browser cache.
mrshoe 17y ago
Wouldn't it be yet another optimization to just include that loadScript function in the HTML? Reducing round trips to the server is a common technique in web site optimization. I realize that script will be cached after the first time, but it's so small that it will hardly affect the performance of subsequent requests anyway.
psadauskas 17y ago
I've found the best way is just just `cat` all my js files together, and just include that one...
- michaelfairley 17y ago
  The article points out that that strategy will cause your page to block while it's loading. See http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/ http://www.stevesouders.com/blog/2009/04/27/loading-scripts-... for more info.
  - psadauskas 17y ago
    Not if you put it at the bottom. Yes, it does block the page, but hopefully your page will degrade gracefuly until the js is loaded. If it doesn't, then you want it at the top, where it will block. It will load slower, sure, but people won't have to see a broken site.

50 points by sant0sk1 17y ago

Google conveniently hosts and distributes most of the common Javascript libraries through their CDN, and allows external developers to load them using this technique. http://code.google.com/apis/ajaxlibs/ http://code.google.com/apis/ajaxlibs/

sant0sk1 17y ago
Has anybody else noticed slower load times using Google's hosted libraries than their own?
- jacquesm 17y ago
  This has nothing to do with googles hosted libraries but it is javascript loaded from google servers: I've had both analytics and adsense slow down page loads quite a bit. Analytics tags should always go as far to the end of the page as you can manage, with adsense tags you're bound to put them where they display the ad. 3rd party javascripts are a pain, it's an extra point of failure that is not under your control.
  - bmelton 17y ago
    If I'm not mistaken, at least Drupal has a module that allows you to host the google analytics JS files on your own server. This would lead me to believe that you can do that sans Drupal, though I've never attempted it (in either fashion actually.)
    - jacquesm 17y ago
      thank you, I'll have a look at that, that may be helpful!
- mrshoe 17y ago
  It's probably faster to serve them off your own server due to HTTP keepalive. Sure, making a new connection to google's CDN might be faster than making a new connection to your server, but it's definitely not going to be faster than sending a little more data over an existing connection. Not to mention the extra DNS lookup.
  - michaelfairley 17y ago
    This is assuming that the script file and the page it's included in are coming off the same server. Most people who are tweaking performance at this level have probably already separated the serving of static and dynamic content.
  - blasdel 17y ago
    The idea is that if everyone uses the google-hosted jquery, it'll almost always be in the browser cache.

mrshoe 17y ago

Wouldn't it be yet another optimization to just include that loadScript function in the HTML? Reducing round trips to the server is a common technique in web site optimization. I realize that script will be cached after the first time, but it's so small that it will hardly affect the performance of subsequent requests anyway.

psadauskas 17y ago

I've found the best way is just just `cat` all my js files together, and just include that one...

michaelfairley 17y ago
The article points out that that strategy will cause your page to block while it's loading. See http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/ http://www.stevesouders.com/blog/2009/04/27/loading-scripts-... for more info.
- psadauskas 17y ago
  Not if you put it at the bottom. Yes, it does block the page, but hopefully your page will degrade gracefuly until the js is loaded. If it doesn't, then you want it at the top, where it will block. It will load slower, sure, but people won't have to see a broken site.