Reduce the number of requests in your WordPress theme

This simple code will allow you to load all of your themes css files into one request without a plugin.  I have not yet found a plugin that works with other plugins nicely as not all plugin authors play by the rules when enqueueing scripts and styles.  So i figured that I would start with my theme.  I wrote my own theme for this site based on the Twitter Bootstrap.  On its own there would be a request for the bootstrap css file and one custom one for my theme.  And the javascripts would be one for the bootstrap and one for my custom js. Add to this that I use Prettify for my syntax highlighting and you can see that the requests can start to pile up.  Let's say that your theme also uses modernizr, jquery ui, maybe a slider script, etc... it is easy to see that the js and css requests can really start to add up. Let's start with the minifier.  I use Minify for this task.  It is really easy to use and install.  Just copy the min folder to the root of your theme.  For this demo, you do not have to do any modification to the sources files.  Then you can place the following snippets into your theme's functions.php file to register and enqueue your scripts.  In my case, I wanted to load jQuery from the theme as I often find that upgrades to jQuery break some code and this will mean that all my existing code will work even if WordPress upgrades its version. You can view the source/inspect element on this page and see these two requests on my site. They will look like:
<link rel="stylesheet" id="theme_styles-css" href="http://matthewaprice.com/wp-content/themes/hendrix/min/index.php?f=%2Fwp-content%2Fthemes%2Fhendrix%2Fcss%2Fbootstrap.css%2C%2Fwp-content%2Fthemes%2Fhendrix%2Fcss%2Fprettify.css%2C%2Fwp-content%2Fthemes%2Fhendrix%2Fstyle.css&ver=3.5" type="text/css" media="all">
AND
<script type='text/javascript' src='http://matthewaprice.com/wp-content/themes/hendrix/min/index.php?f=%2Fwp-content%2Fthemes%2Fhendrix%2Fjs%2Fbootstrap.min.js%2C%2Fwp-content%2Fthemes%2Fhendrix%2Fjs%2Fprettify.js%2C%2Fwp-content%2Fthemes%2Fhendrix%2Fjs%2Fscripts.js&ver=3.5'></script>
Here is the code for your functions.php
add_action( 'init', 'map_register_scripts_styles' );
add_action( 'wp_enqueue_scripts', 'map_enqueue_scripts_styles' );

function map_register_scripts_styles() {
  // so the minifier needs relative urls, not with the full http://
  // this grabs the theme location dynamically and then parses the url so that we can end up with "/wp-content/themes/theme_folder"
  $template_location = parse_url( get_bloginfo( 'template_directory' ) );

  if ( !is_admin() ) {
    // if we are on the front end, deregister the default jquery and register my own
    wp_deregister_script( 'jquery' );
    wp_register_script( 'theme_jquery', $template_location['path'] . '/js/jquery-1.8.3.min.js' );
  }
  
  // create an array of css files to add to the minified request        
  $theme_styles = array(
    $template_location['path'] . '/css/bootstrap.min.css',
    $template_location['path'] . '/css/prettify.css',
    $template_location['path'] . '/style.css'
  );
  wp_register_style( 'theme_styles', $template_location['path'] . '/min/index.php?f=' . implode( ',', $theme_styles ) );
                
  // create an array of javascript files to add to the minified request
  $theme_scripts = array(
    $template_location['path'] . '/js/bootstrap.min.js',
    $template_location['path'] . '/js/prettify.js',
    $template_location['path'] . '/js/scripts.js'
  );
  wp_register_script( 'theme_scripts', $template_location['path'] . '/min/index.php?f=' . implode( ',', $theme_scripts ), array( 'theme_jquery' ), '', true );                  
        
}

function map_enqueue_scripts_styles() {

  wp_enqueue_script( 'theme-jquery' );
  wp_enqueue_script( 'theme_scripts' ); 
  wp_enqueue_style( 'theme_styles' );
                
}
So you can see that at least your theme's styles and scripts will be loaded with one request a piece. Note: the minifier will not perform any compression on a file with ".min" on it. So you are just including it so that all the scripts can be included with one request. This is by no means perfect, but it works on this site and where there once were 6 requests, there are now only 2. I am working on a way that would register a script to a global that could then be accessed from a theme so that my plugin's scripts and styles could be merged with the array that I use in my theme to register styles and scripts and really reduce the number of requests. Enjoy!
Post a comment
  1. Damian Jennings

    Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

    • Matthew Price

      this is also a good idea as well.

  2. grahamw0009

    Great ideas, have you managed to combine plugin css/js as well? Also, why not cache the output to a folder so the server doesn't have to combine them each time? I may attempt my own version, but include compression as well. Although, I can see how this could go from a few lines of code in the functions.php file, to a few hundred :) Graham

    • Matthew Price

      Caching the results would be a great idea! This article was more about the basics, but that is a good way to go Thanks Matt

  3. Matthew Price

    Hello So this can definitely go in functions.php. if you have regular css and js calls inline in your header.php, just remember to remove any of them that you are calling using this method. Lemme know how it goes. i can definitely help you out if you run into any issues Matt

  4. Alex Buturugeanu

    do I put the above code in functions.php (and detele all that is there) or do I just add the code? i'm not so tech savvy :)






Real Time Web Analytics ^