Industry experts focused on performance at this year's UpFront Conference - here's why.
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
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.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
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
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.
