Question

In a current web project, I’m using several jQuery plugins and initializing them just before the closing body tag. My question is, from a loading time/performance standpoint, would it be best for me to take all such initializations and copy them into a single, externalized js file? the plugins are being initialized in the same way within all pages in the site, so it would seem loading one, centralized file would be best, no? thanks for any feedback.

Answer 1

It all depends on what you are developing for, but here are some rules of thumb.

HTTP requests mean overhead (especially over HTTPS) so try to make as little as possible, for mobile this is crucial. there are a few exceptions though; lazy loading JavaScript files which aren’t needed when the app initializes is sometimes smart so they’re cached when really needed, using a CDN for popular libs sometimes can lead to great performance boost because of paralel downloads.

keep downloads as small as possible, so minify all JavaScript and CSS, some even minify HTML.

make sure cache headers are set correctly (some set them to a year or more), and when a new version of your script is deployed, append the src attribute of the script element with a version number to counter caching, like: <script src="myapp.js?v=2"></script>

Sometimes perceived performance is better than real performance, meaning; having the HTML loaded and rendered is more important than the application initialized. this can be done by asynchronously loading JavaScript files (by inserting script elements with JavaScript like Google does or by using script loaders which do this for you). but this leads to new challenges like the execution order of loaded files or interacting with the page before the script files are fully loaded and parsed.

In the end it’s heavily dependent on the architecture of your online app or site and what the interaction with it is or should be, care to elaborate further by giving some examples?

PM5544.