In my previous Website Optimisation Tips blog, I talked about methods of reducing the size of individual files to make your website load faster. In this blog I want to discuss a few ways of reducing the number of files used on your website as well as adding an extra bit of compression using your .htaccess file.
Combine your files
Your website will load faster and more efficiently the less server requests it needs to make so it make sense to reduce the number of files required to run the page. Combining all of your common file types into a single file will do just that.
For CSS, I typically keep everything organised with Sass using individual .scss files for each element (in this case ‘bx-slider.scss’ and ‘fonts.scss’) which are then compiled into a single minified master stylesheet which gets cached the first time the visitors lands on the site.
I’ve gone a bit mad for vector graphics over the past year or so. Not only are SVG images typically smaller in file size than PNG alternatives, they also remain crisp and smooth whatever size you set them to.
Icon fonts are particularly useful as they allow you to combine all of your vector icon graphics into a single file. Each icon can then be called on when required by adding a specific class to your HTML tags.
To create an icon font, first you need to save out any icons you need as SVG’s. You can then upload each graphic to the free ICO Moon tool to create an icon font and download a handy zip file with all the instructions you need to integrate it into your website.
Once you have the font prepared you can then control the size, colour and hover states of any icons easily using CSS.
As an additional benefit, using icon fonts is also significantly easier to manage than using images as you don’t need to save out several different coloured versions of a single icon, which is particularly annoying for dealing with hover states, and if you (or your client) decide to change the colour of an icon you can do it in about 2 seconds using CSS instead of having to edit each icon in Illustrator or Photoshop and save it out again.
Since I originally wrote this, there has been a lot of support for using inline SVG’s as an alternative to icon fonts which you can read about on CSS Tricks which I might try out on my next project.
OK, so you’ve combined your common files, minified your code, optimised your images and you’re ready to go live!
There’s an extra way you can compress your files even more to make your site load even quicker and that’s by gzipping them using you .htaccess file.
You do this by adding a gzip module to your .htaccess file which looks like this:
Note that each different file type used by the site is listed and set to deflate.
Setting Cache Expiry Dates in .htaccess
If you’re reading this you’ll already know that caching is when your web browser stores files of a visited web page so it can load the page quicker next time it needs that file again. You’ll also probably used to explaining to your clients that their updates aren’t showing because they need to clear their cache (to which they may reply “How do I do that in IE7?”).
What you might not know is that you can set how long the browser stores the files for in your .htaccess file to prevent you having to download them again.
You do this by adding an expires module to your .htaccess file. This example is the one used on this very website:
As you can see, you can set specific expiry dates for individual file types as well as a catch all default. Files that aren’t likely to change very often can have later expiry dates.
And finally… If you want it doing properly, do it yourself!
As a final point on website optimisation, I suggest that if you are absolutely serious about optimising your website you should avoid using third party tools/plugins and code it yourself as it it is the only way you can be completely sure of successfully minifying and combining all your files.
However, since I like those plugins and they provide functionality that would otherwise take me a while to create myself it’s a trade off I’m happy to make!
You can test how well your (or any) website is optimised using Google’s Page Speed tool.