Let’s talk about web performance!
It’s one of these things where you hear it once, then see it everywhere – in tweets, blog posts or on podcasts: I’m talking about web performance.
Web performance means how fast a webpage is downloaded and displayed to the user. There’s a good reason that this is one of the hot topics in web development this year. Companies like Google and Amazon realise that increasing web performance has a significant impact on their business: Calculation at Amazon showed that a page load slowdown of one second could cost them $1.6 billion in sales each year. If a web page takes more than three seconds to load 40% of all the users will abandon it.
With this in mind, you’d think that everybody in the web business would be very cautious about performance. However, the web design trends pull us in the opposite direction: The demand for image heavy websites is high and every developer can choose from an almost infinite number of fancy javascript libraries, which add additional weight to a website. Research has shown that the average page is now two times larger than three years ago.
How do we perform?
With this in mind, I wanted to check the performance of our very own dxw website. As mentioned there are tons of good tools to help you reduce the weight of a webpage. A good one to start with is browserdiet. To see performance at a glance sites like webpagetest provide a great service.
The first test with the dxw site revealed that we also belong to the blameworthy ones, having a website weighing in at 2.6 Mb. As a first step I decided to reduce all the images to the actual size required plus loading all the images through an image optimizer service called kraken.io which decreased the page by 500Kb. I then created image sprites in order to reduce the amount of server requests. Task runners like Grunt or Gulp can be really helpful in this whole process, making it incredibly easy to create and use sprites.
However, the real heavyweight in our website was hiding in the media library of our WordPress dashboard. There were a handful of images which were uploaded with a bigger size than needed in the design and therefore had to be scaled down by the browser. Cropping down these images to the actually needed size, plus putting the images through kraken.io, finally got our page down to 800Kb, making the loading time significantly shorter.
Lessons learned
So what does web performance mean for our daily work as developers? Obviously we should always think about performance when creating websites for our clients. A web performance budget created at the beginning of a project can help. The budget could be a specific load time, a number of requests or the size of the page. Once the budget is set, the developers and designers have to stick to it. However, it also means that we need to help our clients learn to use a content management system (CMS) like WordPress with web performance issues in mind. Especially with images: it’s important to not to upload bigger images than needed, and good to compress them with an optimizer.
Performance is about respect
Designers, Developers, Project Managers and whoever else is involved in creating websites often forget that on the other side of their high speed desktop connection there might be a user commuting to work trying to get access to a website with a weak 3G connection. Public service websites are usually not created for a targeted user group but for everybody with access to the internet. Public service websites can contain vital information about health or security. To have a quick access to this information is important.
Performance should be one of our biggest concerns when designing for the public. Or, as Brad Frost puts it: “Ultimately performance is about respect. Respect your users’ time and they will be more likely to walk away with a positive experience.”