3

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

16
  • How is this a wordpress specific question?
    – Mark Kaplun
    Oct 3, 2014 at 11:30
  • 2
    Just as a note: By no means is concatenation the same as what is commonly understood as minimization. Or in other words, combining files to reduce requests and minifying them reduce file size are just two different things - both of them could and probably should be done though.
    – ialocin
    Oct 3, 2014 at 11:30
  • On the topic, personally I'm thinking about, but haven't tackled it yet to make this WordPress inherent, making use of file concatenation via Apache and .htaccess. As an example, kind of how you can find it inside the htaccess file of the html5 boilerplate.
    – ialocin
    Oct 3, 2014 at 11:37
  • 1
    @MarkKaplun Plugins become more and more powerful and people aren't WP just for their blogs anymore. Say you install Woocommerce, The Events Calendar, a front end media uploader and use the Toolbar you can easily end up with 30+ script tags in your theme. I'd like to know how other people think about this and how we deal with it as developers.
    – Jan Beck
    Oct 3, 2014 at 18:13
  • @JanBeck, if you can ask exactly the same question about drupal, amd you cam, the question is not wordpress specific and therefor off-topic for this site.
    – Mark Kaplun
    Oct 4, 2014 at 2:53

1 Answer 1

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.

1
  • I agree with concatenation in general, but especially if the files are only 15KB as in the question. Additionally, it's better if the combined file is served directly as a static file and not concatenated on-the-fly via Wordpress. Oct 12, 2014 at 22:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.