Why your responsive website needs the power of performance

Perceived Performance

As well as the actual load time, the perception of the speed of a website is just as important, as Dean Hume, Richard Rutter and Yesemenia Perez-Cruz all touched upon.

Custom web fonts, for example, can create a delay in displaying content while the browser downloads the required font. Replacing this with a web-safe font, which displays until the custom font has downloaded, can offer users a quicker experience.

Dean Hulme gave an acronym to remember technical changes which can be made to improve projects; RAIL.

  • Response
  • Animation
  • Idle
  • Load

For the last point, you could consider loading some CSS inline. By isolating the most important CSS and adding that inline, you'll allow a page to render significantly faster and increase the perception of a performance.

Budgeting From The Start

Managing and prioritising features and elements which affect performance can be a difficult task, which is why the conference placed a big emphasis on performance budgets.

By setting performance targets for load time, page size or a combination of the two at the start of a project, designers and front end developers can focus on website speed early on and ensure it's at the forefront of every decision.

UpFront 2015 gathered many top web designers and developers together

UpFront 2015 gathered many top web designers and developers together

With the help of automated workflow tools like Gulp and Grunt, a performance budget helps developers and designers prioritise what is important in a site build and allows us to understand the implications of adding images, JavaScript, web fonts and styles.

Alongside Grunt and Gulp, Dean Hume also mentioned a number of different tools which are becoming increasingly invaluable for automating front end development. These include:

  • Kraken.io – for optimising images and improving load time
  • Gulp-responsive – to generate different sized images to enhance responsive sites
  • Critical gulp – to speed up perceived page load time by adding inline CSS
  • UnCSS – which will remove any unnecessary styles
  • Louis – an ideal gulp task for measuring performance and analysing performance budget

Performance Led Development

Summing up the conference, it's evident that performance should be an essential design feature, not just something to consider during the technical aspect of a project.

Placing an emphasis on performance budgeting and understanding the importance of speed and responsiveness across all devices and browsers, including those on games consoles, is the key to building a successful website today.

Use automated workflow tools to improve your processes and ensure that load times – perceived and actual – are the best they can be. If that means compromising on design elements, at least you'll be aware of it from the initial stages of the project.

Words: Dave Redfern

Dave Redfern is a designer and front end developer at iWeb Solutions,
an e-commerce website design agency based in Staffordshire.

Like this? Read these!