Quick wins to speed up your website
There’s a massive list of things that you can do to speed up your site, often though you need to be have root access to the server that your site is hosted on (or have a pretty good relationship with your host) to be able to really get the most out of it, and have it purring along with a setup just right for your needs, and no more.
Since most people won’t have a very high level of access to their server, often nothing more than FTP, that is all that will be required for the below tips. So without further adieu, lets begin.
Combine multiple CSS files into 1
Often CSS files are broken out into a few files to keep things organised, which does make sense as it’s easier to find what you are after when you need to make style changes, or you may want to load only a couple of your CSS files on one page, but other CSS files on another page, again, it makes perfect sense right?
Think about this though, if you were to combine all your CSS files into one, it would of course be larger but once the user has visited one page on your site, that CSS file will have been cached by their browser so all subsequent pages will not need to load any more CSS files. It also requires one connection to the server to grab the CSS, not 3 or 4 to get each individual CSS like you normally would do it.
The tradeoff is that you force all users to download all CSS regardless of which page they are viewing, but as noted above, they only need to download the one file, with one request, once, and it’s cached for all following pages.
Combine multiple JS files into 1
Use a CDN where possible
A what? A Content Delivery Network. Basically it’s a group of servers that all host the same files, and depending where the user is, the closest server will serve the file to reduce latency.
This has a few benefits, first of all it can often have a better speed in downloading the file to the user, and secondly, it allows the browser to have more open connections to download files (browsers can typically only have a set number of connections open to a given server, if you spread the requests out to different servers, you are essentially allowing for more concurrent downloads to speed up the load time), and finally you take a load off your server and keep your bandwidth down.
It’s often expensive to setup your own CDN (and out of the scope of this article) however there are a few files that you may be able to load via a CDN already, like jQuery for example.
Here is a list of common js files that you can load directly from Googles own CDN http://code.google.com/apis/libraries/devguide.html#jquery
Too often you see images on a site that are way larger than they need to be in terms of file size, added to that there’s often a LOT of images required for a given page, both good ingredients for a slow site.
Stitch background images together
There is a technique called CSS sprites that you can use to stitch (almost) all your background images together to be in the one file, so that you only need to load the one image then simply show a portion of that image where it is required. A great article on how to create sprites can be seen over at CSS Tricks.com http://css-tricks.com/css-sprites/
Optimize your images
For the images that you can stitch together, do your best to make them as small as you can without losing too much quality. If you can’t be bothered doing this manually, try using an online tool like Smush.it (http://www.smushit.com/ysmush.it/) This will load up your page, and squish the images for you ready for you to download from them and replace on your site. In some cases the savings can be huge.
Make them the right size
It’s tempting to just upload an image that is big enough to cater for all needs, then just use the height and width attributes to display it the size you want it, don’t.
If you upload a large image, and display it tiny, you are still forcing the user to download the original large image which wastes their time and your bandwidth. You should always decide what size you want the image to be, and use an image editing program to resize the image to that size and save it in a format optimized for the web.
CSS at the top, JS at the bottom
This is more of a ‘throughput’ item. Meaning that we want the users to see something fast, whether or not it actually is functional just yet. An end user doesn’t really care about the time it takes for the whole site to load as much as you and I, just the time it takes for them to see the content they are after.
Make sure everything exists
What do you do?
There’s tonnes that you can do to speed up your site, but these I find are a few quick wins. What do you do to speed your site up that doesn’t require server access?