I have long since been an advocate of proper markup, web standards, and accessibility. Most people at InterWorks don’t know it, but when I go home at night, my relaxation time is figuring out what it takes to make websites load faster. I have ultra high expectations for speed and usability! That said, somebody at Google was nice enough to compile a list of things that can help you make your website load faster. It took me quite a while to figure some of these out on my own, and here are my experiences with the tips that I’ve used.

Use Every CSS Declaration Once

If you have multiple elements that require the same styling, this is a good way to lower the file size and render time. 

GZIP Compression

This is my favorite of all time, because its speed increase is HUGE compared to its difficulty to implement (VERY easy). When you gzip everything that you can, things come in much faster. Rather than load a page as the source is received, the page loads all at once as its decompressed – not only is it faster, but it immediately appears faster! If you have ANY questions as to how to enable compression, call me now, or catch me on twitter: @bradfair!

HTTP Caching

Google talks about this from the client/browser perspective, but I’ll hit it from two perspectives. When a client visits a page, if there are elements that are static, or frequently unchanged, those should be cachead. You should have expires headers on all those elements, particularly images. Make sure to set the expires date to a reasonable time – if you change your logo once a week, set it to a week or half a week – and keep in mind that if it’s at one week, the people who visited your site immediately before the change will not receive it for a full week!

Now, caching from the server side. In my experience, CMS systems that generate pages on the fly are relatively fast under light load. You begin realize just how slow and inefficient they are under a heavier load. What I’ve found useful is to cache all parts of the web page that do not constantly change, and read from cache if no change has been detected. In all my custom CMS work, I write a cached version on every change, so the site appears dynamic, but loads MUCH faster.

Page Speed / YSlow

One of the ways that I check which of these tips will improve page load time is by using YSlow. @joseym told me about Page Speed not too long ago. These tools are excellent in pointing out oversights that hinder the user experience. It’s all about the USER EXPERIENCE!

Optimizing Images

When looking at images, be mindful of which format will give you the best size for quality. When I use JPG, I will typically put it at 70 quality because it’s a great size tradeoff. In some instances, a PNG will be lower cost, and in some instances it’s JPG FTW! 

MINIFY, MINIFY, MINIFY

When you can, minify your JavaScript and tidy up your CSS. Make sure that things don’t repeat, and use as little as possible.

More

Google has plenty of information on the remainder of the 12 things – I recommend you have a look at it and make good use of it!

If you have any questions, catch me on twitter (@bradfair), AIM (windmist1), or just give me a call. I’m happy to help in any way I can, and the whole world benefits from you making your website faster!