Combining CSS files in WordPress into a single file
Sarah J By - Sarah J

Combining CSS files in WordPress into a single file

“Combine your CSS files in WordPress into a single file to reduce HTTP requests and gain some SEO point!”

wptachyon.com

In this post, I’m going to talk a bit about concatenating or combining your CSS files in WordPress into a single file.

Why combine CSS files in WordPress into a single file

What many webmasters don’t realise is that each resource on a webpage is a new connection to the server by the web browser and each item is downloaded separately. In other words, its very similar to downloading each image, each CSS file and each js file in your browser and then pasting them into a file for display.

Each of these “downloads” is a separate HTTP connection with HTTP connections and handshakes etc. Also, traditionally web browsers would only do two concurrent connections at a time. So, if you have 7 CSS files, 5 JS files and 3 images then that’s 16 HTTP connections (don’t forget the connection for the HTML itself), done two at a time. I do concede that I don’t know if browsers still / will always only download 2 resources at a time. I also realise that there are certain server setups/browser tweaks and upgrades that keep connections open etc, but for the most part, this general principle applies.

So, to speed up your website’s download, reducing the number of CSS files into as few as possible are really great for page speed. You’ll notice the improvement on tools like Pingdom and the “Make fewer HTTP requests” warning should disappear!

How to combine CSS files in WordPress into a single file?

I typically work with custom themes. And even when I’m using a bought template, I usually do some modifications. In any event, for the theme itself, I usually concatenate CSS files in the functions.php file (in a child theme, right?).

This code looks like this:

function siteScripts()
{
	
     if ( file_exists( get_template_directory( )."/css/combined.css" ) ) {
          wp_enqueue_style( "my-site-compressed", get_template_directory_uri(  )."/css/compressed.css", array( ), file_get_contents(  get_template_directory_uri(  )."/css/compressed.version" ) );
     } else {
          wp_enqueue_style( 'my-site-imports', get_template_directory_uri() . '/css/imports.min.css', array(), "1.0.0" );
          wp_enqueue_style( 'my-site-bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), "1.0.0" );
          wp_enqueue_style( 'my-site-slicknav', get_template_directory_uri() . '/css/slicknav.min.css', array(), "1.0.0" );
          wp_enqueue_style( 'my-site-main', get_template_directory_uri() . '/css/main.min.css', array(), "1.0.0" );
          wp_enqueue_style( 'my-site-extras', get_template_directory_uri() . '/css/extras.min.css', array(), "1.0.0" );

	  // create the combined file here
          combineCSS();
     }
}
add_action( 'wp_enqueue_scripts', 'siteScripts' );


function combineCSS()
{
     $data = "";

     $temp = file_get_contents( get_template_directory() . '/css/imports.min.css' );
     $data = $data.$temp."\r\n";

     $temp = file_get_contents( get_template_directory() . '/css/bootstrap.min.css' );
     $data = $data.$temp."\r\n";

     $temp = file_get_contents( get_template_directory() . '/css/slicknav.min.css' );
     $data = $data.$temp."\r\n";

     $temp = file_get_contents( get_template_directory() . '/css/main.min.css' );
     $data = $data.$temp."\r\n";

     $temp = file_get_contents( get_template_directory() . '/css/extras.min.css' );
     $data = $data.$temp."\r\n";

     file_put_contents( get_template_directory( )."/css/compressed.css", $data );
     file_put_contents( get_template_directory_uri(  )."/css/compressed.version" ), date("Y-m-d_H-i-s") );
}

This code checks if the combined file exists. If it does, it uses the single combined file. If it does not exist it called the combineCSS function which concatenates each of the CSS files and writes a version file, so that if we change CSS we can bust the browser’s cache.

What about the CSS in WordPress plugins?

I don’t like messing with plugin files directly. The savings are just not worth the hassle. Some people will say that you can download the plugin’s CSS files and combine them in and modify the plugins, etc… This is just too much hassle and if a plugin update comes in you’ll be loading extra CSS, not less.

So, what I do is I try to conditionally enqueue plugin’s styles if possible. For instance, I’m a huge fan of Contact Form 7. But I often only use it on my contact page, yet its CSS is loaded on EVERY SINGLE page of my site. To get around that I dequeue the style if I’m not on my contact page.

function deregisterStyles() {
	if ( $post->post_name != "contact-us" ) {
		wp_deregister_style( 'contact-form-7' );
	}
}
add_action( 'wp_print_styles', 'deregisterStyles' );

So now our contact form 7 CSS is only loaded when it’s needed!

So there you have it, we’re slowing squeezing out our SEO juice and incrementally doing more than our competitors!

Share:

0 Comments

Leave a Comment

Your email address will not be published. Required fields are marked *