May
31st, 2008
Keeping third party JavaScript from slowing down your site
All too many times I go to a blog or website and half of the page loads. Then it sits there waiting while a JavaScript file from another site loads. Some JavaScript cannot be placed at the bottom of the DOM because they use document.write(). It’s unrealistic to expect everyone to abandon third party sites (I use a script from Photagious for the photos on the right). But is there anything we can do to make them at least appear to load faster?
What not to do
Here’s an example of what I’m talking about.
<div id="myDomElement"> <script src="http://thirdparty.com/path/to/file.js"></script>
What we’d like to do
Of course. The ideal scenario is that you can load your entire page and then once it’s completed start fetching third party JavaScript files. Turns out that this is extremely easy and there’s no excuse for sites to not be doing it.
How we do it
What you want to do is to attach handler to the window’s onload event. I’ll show an example using plain JavaScript but can be done using any of the popular JavaScript libraries.
window.onload = function(){
var el = document.createElement('script');
el.src = 'http://thirdparty.com/path/to/file.js';
document.getElementById('myDomElement').appendChild(el);
}
It’s that simple! Now do it :).
May 31st, 2008 at 1:38 pm
You could use this technique even for your own JavaScript files. Some people do.
There may be a trend to start using more JavaScript files from third-party servers.
http://ajaxian.com/archives/announcing-ajax-libraries-api-speed-up-your-ajax-apps-with-googles-infrastructure
I think the JavaScript files in mashups slow things down because there is database interaction to dynamically generate that JavaScript. The part that the JavaScript is from another server is probably not what makes the page painfully slow to finish loading. It may make it slower however as extra connections need to be made.
May 31st, 2008 at 1:43 pm
@Peter, the google hosted js libs are a great idea. Google’s infrastructure is as reliable and fast as you can expect from a third party.
My main concern is that startups while providing great services don’t have infrastructure that’s as reliable as one might expect. So if you *must* include their scripts it should become a standard practice to minimize your dependency on them.
I would like for these startups to address this issue instead of just giving you a script tag to paste into your site without thinking of the possible cost.
May 31st, 2008 at 1:48 pm
I don’t think using a central source for common JavaScript libraries is such a great idea. At least not in all cases. I don’t think I would use such a source.
http://peter.michaux.ca/article/7906
These startups you mention don’t want you to think about the possible costs. That would discourage adoption.
June 1st, 2008 at 2:52 pm
Have you considered the security aspect of directly including 3rd-party scripts? You are effectively giving them the ability to steal cookies, alter the behavior of your site, read user data, etc.
It requires little effort to make a local copy of the script and use that one instead. And you don’t have to worry bad behavior (malicious or accidental) nor updates breaking your site.
Just a thought.
June 1st, 2008 at 10:51 pm
@joey: the js is dynamically written from the server, so you need a “live” connection to the third party.
But WRT the security issue, you are right on to raise the issue: it was just a few months ago that perl.com was hacked because one of their ad partners (read: remote js) had their domain name expire! ….
When was the last time you checked your
“content partner’s” registration expiry? :)