Tricks to Speed Up Your Site
A recent post on CSS-Tricks about ideal page size got us thinking about page size’s oft-discussed counterpart – load time. We all agree that quicker load times are a good thing, but we have to weigh that goal against the desire for rich-media content and effects that enhance a user’s experience with the brand. Unless you have a brand that’s suited to a minimalistic design, your site is going to be a decent size; luckily there are several things you can do to speed up even the most feature-heavy sites.
Minify your CSS/JavaScript. It’s amazing how much you can reduce a file’s size by minifying a document to remove all unnecessary characters. Line breaks, spaces and comments are excellent organizational tools that save time when you have to edit your code, but they have the opposite effect when someone tries to load the page. Depending on the length of your document, you’ll see a 20-30% size reduction. That may only mean 3kb saved on some files, but don’t dismiss that number as insignificant – minifying ten files like that will quickly add up to a substantial 30kb reduction. Try CSSCompressor and JavaScriptCompressor to see how much space you can save.
Combine images into sprites. File size isn’t the only concern when it comes to load times – HTTP requests can be just as much of a factor. Combining your background images into a CSS sprite may not change the total file size, but reducing the number of server requests will get your pages loading faster and visitors looking at your content. If your images have irregular dimensions like 47px, 131px and 374px, you may be tempted to round them to nearest 5 or 10 for the sake of quicker math, but we recommend resisting that impulse. It may take a little longer to do your background-position calculations, but considering it’s a one-time headache, it’s better to power through and serve a smaller image. After all, the whole exercise is about reducing load time. Check out SpriteMe – a great tool that identifies possible images to include and then generates a sprite.
Cache page components. There are a lot of elements on a website – logos, navigation menus and headers, for example – that don’t change very often, so why do we force viewers to download them every time they visit? Most web designers already add cache settings for images, but they should really be specified for scripts and, unless you’re planning a major redesign, stylesheets as well.
For extra-fast loads, you can serve commonly-used code that’s hosted on Google Code. If a first-time viewer has visited another page that does the same, they’ll already have a cached version of the file saved. And if that file happens to be the jQuery library, you’ll have knocked 100kb off your load time right off the bat. Just don’t forget to have a local copy as a backup in case Google Code goes down. It’s rare, but it can happen.