This is part 11 of a multiple part series on web performance improvements. The first Introductory blog can be found here. In previous part we discussed the impact of minifying java-scripts on performance. In this part we will discuss how duplicate script references can impact performance of web pages negatively.

As we know that whenever a script is referenced inside a html page, a call is made to the server to download that referenced script file. This has a direct impact on page performance. So we need to be very careful that we not only avoid referencing unnecessary files in the web page but also avoid duplicate references.

In today development scenario there are large distributed teams working on same application/ module. The same source code is shared between teams. There is a possibility that the same script file is referenced more than once by different team members. This results in unnecessary calls to the server for the same file.

Another reason being large no of scripts references in web pages. So instead of going through all the files to check if it is already included or not, team member may just include it again. Not all team members know the impact of their laziness. But this will surely hurt the performance of the web page.

Whatsoever may be the reason but it will impact the page performance following ways.

• Unnecessary HTTP requests happen to download the duplicate scripts. This may not be the case in Firefox but is definitely in Internet Explorer. In Internet Explorer, if an external script is included twice and if not cacheable, the browser generates two HTTP requests during page loading. This won’t be an issue if we add a far future Expires header to scripts, but if not, and make the mistake of including the script twice, there will be an extra HTTP request. Downloading scripts has negative impact on response times. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.
• In addition to generating unnecessary HTTP requests in Internet Explorer, 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. The problem of superfluous downloads and evaluations occurs for each additional instance of a script in the page.

Avoiding Duplicate Scripts

To avoid such accidentally inclusion of same script more than once, we should implement a script management module in our templating system. Ideally all the scripts should be always included using SCRIPT tag in your HTML page:

http://my_script1.0.17.js

http://your_script1.0.17.js

http://his_script1.0.17.js

http://her_script1.0.17.js

The team members should be educated to take precautionary measures to avoid duplicate script referencing. Code review steps should include checking such instances. If we can automate this duplication removal using some tool then that’s great.