Two quick & easy ways to speed up your website
Often, if we don't think about it too much, the website we develop on our local machine can easily end up being the exact same one we put live -- that is, we don't change anything before pressing 'Upload'. This isn't particularly bad, it's just a bit sloppy. In this post, I'll put forward some food for thought on steps to take before pushing your site (or app) up onto the web.
1) Minify your JS and CSS
It might sound like a pain, but remember, you're only doing this when you push live, i.e. not very often. It's worth the extra two minutes for what I've found is generally a 40-70% reduction in file size. Not bad, especially when writing a large, complex web app. Why wouldn't you halve the load time for your CSS and JS if you could?
2) Reduce the number of HTTP requests
Large request numbers are the main cause of sluggish sites. It's quite easy to rack them up, too. Most sites use jQuery or something similar; add a few plugins and some homemade stuff and you can easily be approaching twenty requests. View the source of this site, and you'll see there's just one css file and one js file (combo.css and combo.js), CDN jQuery and conditional IE stylesheets aside.
You can reduce more requests by using CSS background sprites instead of multiple images as much as possible, though if you're too aggressive you can end up making things difficult for yourself. Here's an excellent article on the topic. The short version is it's great to use sprites, but limit each one to a maximum number of images. Certainly don't create one giant sprite for every background image on your site.
There are other interesting ways to reduce requests -- one such technique is employed on this very site -- using css3 fonts for scalable icons and decals. I've created my own custom SVG font using the wonderful Inkscape which I use for most of my design work already. Now the curly leaf decorations, social media icons and other fun stuff are a) all scalable and b) all in one file.
Obviously, less bandwidth and faster page loads are both worthy goals, but with increasing on-the-go traffic meaning that people are often viewing your site over a 3G (or if they're lucky, 4G) connection, making your site load time as low as possible is more important than ever.
It's not just mobile connections that can be sluggish, though -- I've often been at a coworking event or using wifi in a coffee shop and found that the venue's connection is lagging under the sheer number of people using it. I recently couldn't update an online database because the upload (a mere 200k) took too long and the system timed out -- obviously a different kettle of fish but illustrative of the general point -- there are some infuriatingly slow and unreliable connections out there, and, for the forseeable future, a significant, and shifting, segment of your audience are going to be using them. Let your site be the one that loads faster than the rest -- after all, if they can visit your site but your competitor's is timing out, guess who gets the sale? Happy squashing!