You can pay a small fortune to put your site on a really high powered server in order to speed it up, but there’s some much cheaper ways you can get it to run faster. A faster site leads to happier visitors, and it’s also increasingly becoming a factor which affects your Search Engine Optimisation (SEO). If you’re using a CMS system then one of the biggest boosts you can give it is by adding a static page caching feature.
Static Page Caching
A CMS system like Drupal or WordPress uses a database to store all of the site’s content in. When a web user visits a page on your site, they’re effectively making a series of requests to the database. On a simple site like this one, those requests would be ‘what should go in the header?’, what is the main content, what images are in it?, what should be in the sidebar?, what’s in the footer?
Obviously all of these queries take place very very quickly, but all of these are ‘dynamic’ requests – I.e. the database is answering all these queries afresh every time. If there’s lots of people asking the database these queries at the same time then it can slow it down considerably. Think of it like visiting a supermarket and getting some sausages from the meat counter, some cheese from the deli counter, and so forth in order to put those ingredients together to make the html page.
Every person who visits that particular page repeats this same process of asking the database the same questions and getting the same answers. Now imagine that after one person has done their shopping, the supermarket now knows the ingredients you need for that particular page/recipe. So it saves the next person’s time by putting all those ingredients together in a basket by the front door. Just tell them which page you want and they’ve probably made one earlier that’s ready to go.
This ‘basket’ is effectively what static page caching is all about. It’s all about skipping out the database altogether where possible. You visit a page on my site and it checks whether there’s a copy of that page in the cache already. If there isn’t then it will go and create it from the database as usual. Once it has done that it will make copy of that finished HTML page and put it in the cache folder. When the next visitor to that page comes along, the cache will send it that ready-made HTML file rather than ‘dynamically’ creating it from the database. Every 24 hours or so, or when you update the site and the content changes, the cache empties itself.
This puts much less strain on your server – which can dish up static files from a folder much more efficiently than it can process a lot of simultaneous connections to the database. This can make your site load a lot quicker, especially if you’re on a shared server with lots of other CMS databases.
There’s a couple of plugins/modules that provide this static caching functionality. If you’re us in WordPress then check out the W3 Total Cache plugin. If you’re using Drupal as your CMS then have a look at the Boost module. Both sometimes work straight out of the box, but they can just as often take a bit of tinkering to get setup and working properly. A lot can depend on the type and configuration of your server.
If you’ve been exporting all the images you add to your site in the right format and resolution then your images shouldn’t be taking up any more than bandwidth than they need to. Every now and again though you should see if you ‘optimise’ them even further (i.e. make the file size smaller without affecting the look of the image quality). An easy way to do this is to download the folder where your images are kept (in WordPress it’s usually in a wp-content/uploads folder) and then run those files through a program like Smush It to see if it can considerably reduce the file sizes. If it does then you can upload the squashed files to overwrite the existing ones on your server.
Another image compression technique is to use image sprites. These are especially used for the lots of little icon images that appear around your site. Although they may be small in file size, if your footer has 7 social network icons in it, and they each have anothe colour background one when they’re hovered over, then that’s a potential 14 times that the browser has to open another http request to your server just to get a tiny file. That’s not very efficient and a way around it is to combine all of your icons and small graphics into one file and then use CSS to only show the required bit of the bigger picture. There’s loads of online CSS Sprite Generators to choose from and they’re pretty simple to use if you don’t mind editing the style sheet for your theme.