Call us 7am to midnight (GMT)
02037453658

Speed Up Your Site by Minifying CSS & Javascript

  (by )

If you’re looking for a way to speed up your website, then you should consider minifying your CSS and Javascript.  Minifying is essentially combining and compressing all of your code to eliminate unnecessary characters and spacing, resulting in smaller CSS and Javascript files.  Smaller files means faster load times.

An HTTP request is made every time one of these files is loaded.  If you view your website’s source code, then you’ll probably see multiple lines for various CSS and Javascript files.  This means multiple HTTP requests are made every time someone visits your website, which can result in slow load times.

If you minify your code and then view your site’s source code, you’ll see only one line for CSS and one line for Javascript. This means one HTTP request is made for the CSS files and one HTTP request is made for your Javascript files, which can help increase your site’s load times.

So, how do you minify your site?  There are minify plugins available for a lot of popular open source applications, including Magento and WordPress.

If you use Magento, then you can use Fooman Speedster, a free extension for minifying your online store’s CSS and Javascript.

If you use WordPress, then check out WordPress Minify, a free plugin for combining and compressing your blog’s CSS and Javascript files.

Alternatively, you can minify your site’s code using a CSS Compressor & Minifier and Javascript Compressor.  Both of these  tools are free and very easy to use.

Minifying your CSS and Javascript can have a dramatic effect on your site’s load time, so I definitely recommend giving it a try.  However, just in case everything doesn’t go as planned, be sure to make a backup of your site before installing a minify plugin or inserting your minified code.

Are you looking for UK web hosting?  Then check out our UK web hosting plans!

10 Comments

  1. On July 24, 2011 at 11:28 pm

    Payday Vault said:

    I keep meaning to minify the CSS and JavaScript on my site but haven’t got round to it yet. I was recently introduced to a great tool for Firefox called ‘Live HTTP Headers’ which can show you how many HTTP request being made when your page loads. It may not make too much difference for the typical broadband user but its certainly worth a look into reduction methods if you have mobile visitors to your site.

  2. On April 27, 2011 at 8:15 pm

    Gord said:

    Thanks for the info. Many of the WP themes that I’ve used over the years tend to have bloated CSS files – they more often than not use more than one CSS file too. CSS and JS minifiers are a necessity!

    @Harry – there are lot of tool around for creating sprites. Try this page for starters: http://stackoverflow.com/questions/527336/tools-to-make-css-sprites

  3. On April 11, 2011 at 5:31 pm

    Harry said:

    Thanks for this, been looking for ways to speed up my sites for a while now. Going to try the WordPress plugin now.

    I’ve also read about combining all images into a sprite but I’ve no idea how to do it. Can you (or anyone else) advise?

    Cheers

  4. On April 2, 2011 at 2:41 am

    Ryan Sammut said:

    Using Google’s Page Speed Online Tool, Minifying is one of the suggestions it gave me, so good post 🙂 Thanks 🙂

  5. On March 30, 2011 at 5:53 am

    dan said:

    The W3 Total Cache plugin , http://wordpress.org/extend/plugins/w3-total-cache/ , also has the option to minify css and javascript along with its main feature of caching pages and configuringa CDN.

    I’ve only used it for a VPS but I think its also compatible with shared hosts.

  6. On March 30, 2011 at 2:18 am

    Brampton Island said:

    I’m interested in trying this, but you mention doing a backup before installing the WordPress plugin – is it known for causing crashes?

    • On March 30, 2011 at 9:59 am

      Cat M. said:

      No, I installed the WordPress plugin without any issues. I think it’s just good to caution people to make backups of their sites before they minify code or install a plugin, as there might be some issues (such as a conflict between plugins, or the user makes an error when inserting the code). As a web hosting provider, we know how important it is to have a recent backup, just in case any changes don’t go as planned!

      Definitely give WordPress Minify a try–I’m using it on this blog, and I’ve noticed an improvement in load times.

    • On March 30, 2011 at 9:18 pm

      Brampton Island said:

      Cool. Thanks for the reply, Cat, much appreciated. I’ll have to give it a go…

  7. On March 29, 2011 at 7:40 pm

    Slappy Bear said:

    I’m using W3 Total Cache on my bloggy and that has minify and quite a few other options, it’s seems pretty good.

    • On March 30, 2011 at 10:01 am

      Cat M. said:

      I’ll have to check out that plugin–I’m using WP Super Cache, which is great, but I always like checking out new plugins. Thanks for the tip!