2014-10-03

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.)

Show more