What are the effects on loading times when conditionally loading and concatenating scripts?

Question

Suppose you have a script in your theme that you always need on every page - say 'animate-menu.js' (10KB) - and you have one that you only need on one specific page - say 'validate-contactform.js' (5KB). Both are enqueued separately.

There are two best practices regarding optimization of scripts loading times:

• Conditional loading: We could enqueue 'animate-menu.js' only when we need it using a if statement to test for has_shortcode($post->post_content, 'contact-form') or is_page('Contact'). This would reduce the initial loading times as only the needed scripts get loaded.
• Script concatenation (aka minification): Using a plugin we could combine all the scripts into one. This will result in a bigger script file but reduce the number of HTTP requests and result in faster loading times on all future page loads.

Using either of these methods will (theoretically) result in the same loading times overall:

Conditional loading
I'm on the homepage: load 'animate-menu.js' (10KB)
Next, I'm on the contact page: use 'animate-menu.js' from browser cache and load 'validate-contactform.js' (5KB)
Loaded in total: 15KB

Script concatenation
I'm on the homepage: load 'animate-menu.js,validate-contactform.js' (15KB)
Next, I'm on the contact page: use both scripts from browser cache
Loaded in total: 15KB

Deciding which method you choose depends on the special situation of your site. In some cases you want your homepage to load fast and avoid all unnecessary requests. If only 1% of your users will hit the contact page there is no need to make the other 99% force to download the validation script. In other cases it can be ok to let the users wait a little longer initially and then have the next pages load faster.

There is however a problem when combining both of these two methods:

I'm on the homepage: load 'animate-menu.js' (10KB)
Next, I'm on the contact page: load 'animate-menu.js,validate-contactform.js' (15KB)
Loaded in total: 25KB

The conditional loading and concatenation will result in different versions of the big file and the browser can not tell it already loaded parts of it previously.

This is a question that arose during a Q&A session at this years WordCamp Europe. We agreed that conditional loading is the better practice but it should be measured in each case.

Does anybody have the time to do this in the past and/or can speak from experience in other cases? Is combining conditional loading and script concatenation generally a bad idea?

(Disclaimer: I ignore the fact that many people will not see homepage first but will have a sub-page as their entry-page; it doesn't make a lot of difference for the discussion here.)

Answer 1

I have found that you get the best performance by using a combination. I tend to use:

• A core combined JavaScript file that contains a concatenation of all the JavaScript that is required for every page on the site. In my case this includes jQuery as well as code for lightboxes and menus.
  • Served as a separate file so that it is cached between page views: <script src="combined-v1234.js"></script>
  • Versioned by the build system (the 1234) so that users get a new version of it whenever I release newe code to the website. If a browser gets an older version that what is available they get a 301 permanent redirect to the current version. If a browser requests a newer version than what is available they get a 302 temporary redirect to prevent pre-caching.
• Code specific to a particular page is included inline conditionally: <script>var contactpage=true;</script>

In both cases I use YUI Compressor to minimize the files as part of the build process so that the web server is serving smaller files.