Don’t Include jQuery/CSS Multiple Times — You’re Breaking Things
Dear Fellow Developers,
I am writing this open letter to you in the hope that you will hear me and stop one of the most annoying practices I see you do consistently. Frankly, it’s not only bad form, but it also has the potential to have very bad future consequences, as well as an impact on the overall user experience of the site.
PLEASE STOP CALLING JQUERY AND CSS FILES MULTIPLE TIMES ON A PAGE.
At VistaComm, we are a .NET shop, so the main culprit here is developers that call jQuery, jQuery UI and the main stylesheet from their user controls. I understand that you need to have them there for quick troubleshooting, but I guarantee they are in the head of every page we create (when was the last time you saw a page without a site’s main stylesheet or jQuery in it?). If you put it there, please remove it.
HERES WHY:
Let’s say you have a page with two user controls, both of which call jQuery and the main stylesheet. If the user has never been to your site before, they’d request your jQuery and get this response:
Followed by 2 of these:
The first hit on site load times and performance is inescapable, but both of the following two requests/responses have a totally unnecessary impact on page load times and server load. Also, look what is running on the user’s machine after the page loads:
While this is a strong negative from a user experience standpoint, there is a far larger problem caused by this. As you can see in the diagram to the right, both user controls call and load jQuery into the DOM AFTER the menu plugin is called. The result of this out-of-order loading of the javascript on the site? This error:
In this instance, the menu degraded gracefully, but some of the core functionality that was required by the client was not there. The chart to the right is a basic layout of what was happening. At position (1), jQuery was called. At position (2), the menu plugin was included in the site. This, of course, was the correct order in which to call these elements. But in (3) and (4), jQuery was called again. Since re-calling jQuery clears all the plugins and extensions that you’ve put onto jQuery, it breaks functionality you want.
This is a mild example of a bigger problem. At one point in a different project, I needed to make a quick change to a style on the page for testing, so I put <style></style> tags at the bottom of the <head> that should have overrode all the styles in the stylesheet. It didn’t and the reason was because there were 8 (yes, EIGHT) other places in the body of the page that called the stylesheet. It took me almost two hours to track them all down in the various user controls on the page and remove them.
Takeaway: Developers, trust your front-end guys to include the needed and standard jquery and css files in the head of all the pages you are working with. If you’re the front-end guy, trust yourself. Please stop putting these common files in each and every user control you create. You’re breaking things.
Josh