google

5 basic (and practical) ways to make your site load faster

James Royal-Lawson

• 2 min read

Faster is better. There’s no arguing about it. Google likes faster pages, people like faster pages. Your 3G wireless connection loves leaner, slimmer pages. God damn, your shareholders love them too!


Website performance optimisation, like search engine optimisation – or any optimisation – is a fine art. It also follows the law of diminishing returns. The largest efficiently gains can be made from a handful of optimisations. Futher gains are possible but at an increasingly higher cost.

5 basic tips

Here are 5 practical ways that you can improve the load time of your web pages.

  1. Head stuff. Put CSS first, Javascript last – Javascript blocks loading the other files in the head part of your HTML. Put your CSS and Javascript in as fewer files as possible, and minify them all.
  2. Width and Height. Declare width and height on all img tags – this reduces the need for browser redrawing/reflow once images are loaded. Yes, you can set the size in CSS, but in the tag itself is marginally better and often possible for web editors to do themselves.
  3. Code efficiently. Both HTML and CSS. Deeply nested div tags, empty div tags and overqualified CSS-selectors make James cry. For many this will be the least practical suggestion in this list.
  4. Static content. Serve static content using a CDN or (for example) Amazon S3 and a separate domain (for example, I use media.t1n.se). With Amazon S3 it is very easily for any website to spread requests over 3 domains if needed. An additional advantage of a separate domain is that you can keep it cookie-free, reducing requests and bandwidth even further. Exception: serve your CSS from your main domain.
  5. Trim the fat! Have less stuff on your page! – Ground breaking advice I know, but it’s too easy to let your web pages become cluttered, especially with sliding banners, widgets, and other externally hosted scripts. Use ROPS to assess the cost of new features.

Bonus tips

It goes without saying that you should be using gzip compression and sensible caching policies on your web host – if you’re not already, then it’s likely that fixing it is probably not “simple” (or unfortunately someone somewhere isn’t up to their job).

Google’s page speed analyzer which is available as an additional to the Firefox add-on Firebug gives some excellent feedback on the state of your web site, including practical tips. It also provides optimised images and compressed scripts as ready-to-download files.

Yahoo have written up best practices with regard to improving site speed. The list includes 35 different tips, and should keep you going a fair while.

Finally, this article is a great bit of further reading and gives detailed advice but written in a way that makes it accessible for more than just the front-end web developers it targets.

Responsive

If you are working on a responsive website, then congratulations! Make sure website performance optimisation is a clear part of your work. It’s more important than ever in these types of websites and has a huge impact on the user experience.

If looking for ways to optimise your website feels a little beyond you, get in touch, I’d be more than happy to help you out.

James Royal-Lawson+ is a digital strategist, optimiser and web manager based in Stockholm Sweden.