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.
<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 :).
and living in Sunnyvale, CA.
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? :)
July 18th, 2009 at 2:37 pm
Just a warning – your example has a script to “http://thirdparty.com/path/to/file.js” (the part isn’t escaped with <) and that destination is an ad site. They could make this page do malicious things.
July 18th, 2009 at 2:43 pm
Oops, comments can be exploited, too.
alert("See comments.");July 18th, 2009 at 9:20 pm
@Dan, thanks for pointing that out. That must have got changed somehow during a save of the post. It’s fixed now.
October 15th, 2009 at 10:42 am
Very instructive, but where in my template would I place your JavaScript code?
My poor blog is running soooo slow that I’m losing readers… HELP please!
cielo
March 4th, 2010 at 5:40 pm
Hello, I found this blog article while searching for help with JavaScript. I have recently switched browsers from Google Chrome to Firefox 3.2. After the change I seem to have a problem with loading JavaScript. Every time I browse page that needs Javascript, the page doesn’t load and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix the problem. Any aid is very appreciated! Thanks
July 25th, 2010 at 4:17 am
There are many better ways of doing this. This method doesn’t support asynchronous loading of JavaScript as well as loading files with document.write in them
http://www.tutkiun.com/2010/07/load-javascript-after-pageload.html