Great website performance

This has a huge impact on how websites perform because people accessing websites on mobile devices often do so over slow wi-fi or 3G connections. Page loading time is now taken into account by Google in terms of search rankings and 47% of consumers expect a web page to load in two seconds or less. So, if your website is sluggish, you’ll no doubt have higher bounce rates, less return visits, frustrated users and a poor reputation. Having a speedy, mobile-responsive website is absolutely crucial. In this post we look at how we worked with business consultancy, DPA, to develop a high performance website that has already improved lead generation.

DPA is a business consultancy that helps improve business performance through people and works with organisations like eBay, Sony, and Telefonica, so it was crucial that its website was fast and looked great on all devices. According to the IDG Global Mobile Survey 2014, mobile is preferred over the PC for executives conducting research during and after office hours, so this is particularly important for DPA, especially since 86% use tablets and 72% use smartphones to investigate products or services for their business. The old site was slow and difficult to navigate on mobile devices, so Preface Studios was briefed to build a new site that addressed these issues in collaboration with DPA’s in-house design studio.

Working in WordPress, we used our mobile first approach – which means considering how the site will work on mobile devices and then working up to the desktop version. Web designers have to consider how a site will scale up and down on different screen sizes too and images, graphics and animation used on websites are often the elements that take the longest to load. We used the WebP format, which means great savings on image load time. The server was set up to check if a .webp extension of a jpg/png file exists, and if so, it serves that image instead on Chrome. This means the images can be up to 40% smaller, even though they look the same. We also enabled the homepage slider on tablet screen size and above only, replacing the slider with a single banner image on mobiles to increase performance.

A new picture element (the srcset method) was used too. This is a new HTML5 specification which allows multiple sizes of images to be declared on a web page, so that a browser can choose the most appropriate image to download. For example, if you are on an old 1024 x 768 computer, the banner image downloaded will be the 1024px wide version. While, if you look at the website on a retina tablet or a large monitor, the largest 2250px wide image will be used. Srcset is only supported in the latest versions of browsers, but from our traffic analysis we saw a lot of users of the existing DPA site used old browsers, so we used the Picturefill polyfill to make it work all the way back to Internet Explorer v8.

DPA is always willing to experiment with new ideas and we worked in collaboration with the Head of Studio, who provided the initial designs to complement a new corporate brand. He comments: “Everyone at Preface Studios was an absolute pleasure to deal with. Their consultative approach and know-how really helped me to understand how my site could work and what its potential was. They set up systems and processes for us to collaborate together from the outset which worked brilliantly. They worked very closely with me to get a result that far exceeded my expectations. From past experience, I knew the relationship between designer and developer can be a tricky one, but I’m so pleased I found Preface Studios as all the pain was taken away – thanks Pat!”

The new website has led to a much better user experience: having never had a direct lead from its website before, DPA has already had new leads as a result.

A well-structured, superbly designed website is no good if it’s slow. A high performance website makes make the online experience consistently seamless, and most importantly gets information to your target audience quickly.

Sign up to our newsletter today for more branding resources.