The time it takes for a website to load is as much an issue now as it’s ever been. With recent reports suggesting 3 seconds is all it takes for users to leave a website, and sites like The Guardian making concerted efforts to achieve sub-1 second load times, it’s clear that quicker sites achieve better results.
When I launched the Supersonic Playground website a few months ago, I wanted it to be a visually immersive and interactive showcase of the work we do. But it also needed to be responsive. And quick to load. Achieving each of these things individually is straightforward enough. Achieving them together was somewhat more challenging. When the site was initially launched, it was achieving average load times of around 10-12 seconds, which was unacceptable. By using clever performance techniques we’ve managed to achieve load times of under a second. Here are a few lessons we learned along the way.
Optimise, optimize, optimize… and then optimize some more
As a designer, my weapon of choice is Photoshop, which has some pretty decent image optimization tools built in. But it’s not without its faults. Photoshop has a habit of adding unnecessary data that increases file sizes, especially PNGs. There are some handy guides online to help, like this very good one on Smashing Magazine, but even better is Tiny PNG’s online tool (which despite the name also includes JPGs!).
Not everyone has access to Photoshop though, and so a well built website should be set up to optimize images automatically. By leveraging WordPress’s built in image resizing tools, we were able to ensure every image was resized to fit the space in which it appears. Combine this with Tiny PNG’s WordPress plugin that automatically optimizes images on the fly, and our images were now in a much better state. Once we’d condensed and minified our script files, our optimisation was complete and we were able to save some serious page weight.
Despite our best efforts to optimize the site, it was still stubbornly slow, so our next move was to introduce website caching. If you’re not familiar with it, caching works something like this: for a dynamic, content managed website like ours, there can be time delays as the website interacts with the database to serve the content. Caching effectively creates a static copy of the site, making it much quicker to load. As the Supersonic Playground site is built on WordPress, we used the popular W3 Total Cache plugin, and after installing it the loads times were halved to around 5-6 seconds. Not bad, but still not good enough.
Content (delivery) is king
Smaller files are great, but the physical distance it takes for them to travel to the end user is another key factor in a website’s speed – the closer the files, the quicker the site will load, and this is where content delivery networks (CDNs) can make a big difference. They literally packages up the files and distribute them to servers all over the world. We signed up to MaxCDN, one of the market leaders, and by far and away this was one of the best steps to achieving the sub 2-second load time that we were targeting.
The host with the most
Not all hosting packages are born equal, and they can also make a big difference to the speed of a website. Despite the myriad packages available, hosting essentially boils down to two options – shared or dedicated. With shared you literally share a server with many other websites. This can prove very cost effective, but it can often lead to server lag, especially as traffic increases. Having a dedicated server gets over this, but at a significant cost. At the moment there’s not a need for Supersonic Playground to be on a dedicated server, but this will be the final step as traffic to the site increases.
The end result
Achieving a visually immersive and interactive showcase site that’s also responsive doesn’t mean it can’t also be quick to load. In fact many people assume that ‘responsive’ is just about changing the size of the site to fit the device. With bandwidths on mobile devices varying greatly, the load time of the site is just as important, if not more so.
Hopefully this article shows that with a bit of careful consideration, a super quick site is not hard to achieve at all.