Yahoo! Developer Network Blog
« Previous | Main | Next »
July 23, 2007
High Performance Web Sites: Rule 12 – Remove Duplicate Scripts
It hurts performance to include the same JavaScript file twice in one page. This isn’t as unusual as you might think. A review of the ten top U.S. web sites shows that two of them contain a duplicated script. Two main factors increase the odds of a script being duplicated in a single web page: team size and number of scripts. When it does happen, duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.
Unnecessary HTTP requests happen in Internet Explorer, but not in Firefox. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.
In addition to generating wasteful HTTP requests, time is wasted evaluating the script multiple times. This redundant JavaScript execution happens in both Firefox and Internet Explorer, regardless of whether the script is cacheable.
One way to avoid accidentally including the same script twice is to implement a script management module in your templating system. The typical way to include a script is to use the SCRIPT tag in your HTML page.
<script type="text/javascript" src="menu_1.0.17.js"></script>
An alternative in PHP would be to create a function called insertScript.
<?php insertScript("menu.js") ?>
In addition to preventing the same script from being inserted multiple times, this function could handle other issues with scripts, such as dependency checking and adding version numbers to script filenames to support far future Expires headers.
Steve Souders
[Steve Souders is Yahoo!'s Chief Performance Yahoo!. This is one in a series of Best Practices for Speeding Up Your Web Site. This article is based on Steve's book High Performance Web Sites, published by O'Reilly.]
Posted at July 23, 2007 3:39 PM
Comments
Something you might want to add: There are similar performance problems from linking the same css file more than once. We've had designers who just instinctively link in the css file at the top of every file that uses it... not such a great idea if the site you're working on is a dynamic site where pages are built from many small building-block files.
Posted by: David C-L at July 26, 2007 9:14 PM
Can anyone show me an example of an insertScript PHP function that will avoid duplicates? Maybe something that can work with CSS as well? (As suggested above.)
Posted by: Daniel Aleksandersen at November 10, 2007 10:05 AM
Has anyone found a solution to this problem when the site uses iframes? Unfortunately we went to iframes because the third party component we use for grids creates memory leaks in IE when used in conjunction with asp.net web parts. Now I'm trying to figure out how to share scripts for all of the iframes (up to 8) on the main page...
Thanks,
Chris
Posted by: Chris at December 22, 2007 7:45 PM
It seems pretty silly to insert the same script twice in the same page - having no other excuses but "sorry, we were in such a hurry... we already changed that". But, when you consider advertising, using som 'JS templates' for inserting Flash files, etc... this problem can be far more frequent. On big networks (as Yahoo, for example) lots of people schedule ads, most of them in Flash. For them to being already 'activated', they use external JS to 'document.write' the or of the flash. If you use the 'same js' for inserting flash, it would be 'duplicated js'. If you use 'customized ones for each ad', I think is worse than downloading the same one - as it would be cached, even thou re-interpreted.
Inserting a standardized Flash insertion API on each page on the network would be a solution... but would have the cost of 1 or 2 more kbyes in advance, even when you don't know if you will have a flash ad on that page.
Anyone interested on discussing performance from Ads perspective, I would be glad! Contact me!
Posted by: Everson Siqueira at January 31, 2008 9:05 AM
I am involved in performance testing one of the web product which deals with small business. There are multiple js or css file calls in the same page and this is happening becuase of muiltipe Iframe usage in the same page. Now, is there any way to limit the number of the these static files from the multiple redundant calls.
Posted by: Rakesh Singh at May 16, 2008 8:01 PM
I have created a C# utility that does exactly this, you can call the include javascript function as many times as you want but it will only include it once per page request. I encourage you to use it if you find it useful: http://blog.noobtech.com/index.php/2009/02/28/hercules-resource-linker/
Posted by: Roberto Sebestyen at February 28, 2009 1:19 PM
Post a comment
Comment Policy: We encourage comments and look forward to hearing from you. Please note that Yahoo! may, in our sole discretion, remove comments if they are off topic, inappropriate, or otherwise violate our Terms of Service.
Subscribe
YDN Blog: Get Yahoo! Developer Network Blog on your personalized My Yahoo! home page.
YDN Link Blog: Get Yahoo! Developer Network Linkblog on your personalized My Yahoo! home page.
Recent Blog Articles 
view all
The state of mobile browsers - PPK in London
Thu, 02 Jul 2009
GeoMaker - Turning web content into maps made easy
Wed, 01 Jul 2009
Tue, 30 Jun 2009
Hacking Up North : Winners of the Sunderland Hack Challenge
Fri, 26 Jun 2009
ConvergeSC web event comes to South Carolina
Wed, 24 Jun 2009
Recent Links
Junta42 blog: News Flash: Guardian Seeks to Grow through Products, Not Content
Fri, 03 Jul 2009
Twitter Approval Matrix - June 2009 - O'Reilly Radar
Thu, 02 Jul 2009
YUI 3.0 with Jonathan LeBlanc from the Yahoo Developer Network | Unmatched Style
Wed, 01 Jul 2009
Yahoo! Search Blog: VoCampers Converge at Yahoo! Headquarters in Sunnyvale
Thu, 25 Jun 2009
Make: Online : Dorkbot London June 23
Mon, 22 Jun 2009
Archives
2009
2008
2007
2006
2005