Website CSS and Image Optimisation

16 Mar

I’ve been doing a lot of work on our public website recently, moving it from ASP.net with a SQL server back-end and in-house CMS system, over to PHP with a MySQL back-end and a generic CMS system. The new site will be a lot more integrated with social media and will take advantage of HTML5 and CSS3 (where possible).

I’ve spent a lot of time tidying up our CSS, moving images over to the CSS file and generally just making the code neat. Now that the site is nearing readyness one of the jobs was to move the images over to a sprite. For those of you unaware of sprites, first take a look at this image:

Well, that’s a bit of a mess you might be saying, but no, it’s actually quite a good idea. The idea being that when you normally load a page from a website, each image is requested and then sent to your browser separately, all these request have overhead of course. If you combine them all in to one slightly larger image then you only have the overhead of one image, so overall the data usage will be lower. As it is of course, this one image is of no real use. The clever bit is in the CSS where you basically tell it the size and co-ordinates of the part of this image that you want to use. For example:

background: url(img/my-sprite.png) no-repeat top left;
.sprite-mydiv{ background-position: 100px 30px; width: 20px; height: 20px; }

On your little blog or website with a few visitors then you probably won’t notice the difference, but you may still have fun putting your sprite together. It’s also very easy to create your image sprite, head on over to http://spritegen.website-performance.org/. Then upload a zip file of all your individual images and it will, for free, create your single sprite image and all the CSS with all the positions required.

Of course you can go nuts on site optimisation, tweaking a byte or 2 here and there, I won’t be going quite that far but I will try to make a half decent effort.

I inherited the original CSS file and I’ve since changed it quite a bit, using what I needed from the old CSS. I was after a way to quickly scan the site and strip and unused CSS from the file, thus making the file smaller, thus making the site quicker to load. I used http://unused-css.com/ to do this for me automatically and was very impressed with their site. Simply enter your site details and set it running. It will then email you once it’s complete and you can then further clean the CSS file via the options on screen and download your new file.

The original CSS file was 38.2KB, the new, cleaner CSS file was 25.2KB, so not a bad effort.

Once the old CSS had been removed I then minified the CSS. This basically shrinks the CSS file further by removing comments and any unnecessary whitespace (I ran it at the highest setting, you will still wan’t to keep your original file for future site development). For this I headed over to http://www.minifycss.com/ and uploaded my CSS file. The new minified file size was 17.7KB, which is 46% of the original size.