7 expert tips for nailing web performance

Designers and developers constantly face the challenge of balancing cool visuals against a slick experience. So how do the experts do it?

Getting web performance right isn't easy; typically designers will want the best-looking site packing all the latest tricks, while developers are focused on ensuring that everything performs well, and it's hard to find an effective compromise.

You can learn some great ways of balancing looks and performance at Generate Sydney on 5 September, where Mark Zeman from SpeedCurve will explain the secrets of crafting a UX that's fast and rich, exploring three case studies that push the boundary of what's possible when delivering the richest web user experience possible in a way that is still highly performant. If web performance matters to you, book your ticket now.

And to further boost your knowledge, we asked seven experts how they approach web performance. Read on and learn.

01. Create a culture of performance

"I help people and organisations understand that performance isn't just a technical best practice, but rather an essential design principle," says Brad Frost. "Everyone needs to prioritise performance in their workflow, from business owners to managers, designers and developers. While establishing a culture of performance is much harder than applying clever developer techniques, it's a much more worthwhile endeavour that pays dividends in the long run."

02. Set a performance baseline

You can't optimise what you can't measure, notes Akamai CTO, Guy Podjarny. "Start by running a WebPagetest test against your key pages," he suggests, "and record your favourite speed and weight numbers as a baseline. Then repeat these tests in your build system, and break the build if you deviated from your baseline too much. With this line in the sand, you can gradually take on optimisation initiatives to raise the bar."

03. Establish a performance budget

For Katie Kovalcin from Sparkbox, web performance is something that should be approached by all team members from the very initial client conversations. "As a designer, I like to start by working with the developer to establish a performance budget before I begin designing, so I'm aware of the constraints I have to work within," she tells us. "We'll set a number, then have frequent internal check-ins as I design to make sure the choices that I make are aligning with the project's holistic goals. If a certain pattern is compromising those goals, we'll discuss it and come up with other design solutions that will be faster but still display the aesthetic I want to achieve."

Learn about crafting a UX that's fast and rich at Generate Sydney

04. Inline critical CSS

"We set ourselves budgets for our core performance metrics such as Start Render and Speed Index at the beginning of the project," says The Guardian's lead software developer, Patrick Hamann, "and use a combination of tools such as speedcurve.com, WebPagetest and our own RUM monitoring to ensure we never break them each time we deploy. Our biggest improvement to these metrics was to inline our critical CSS into the of our pages, which decreased start render times by over two seconds."

05. Balance aesthetics and speed

The team at Etsy approach web performance by understanding that it's a major part of the overall user experience. "We find it's important to balance aesthetics and speed, and to work toward understanding the business impact of both as much as possible," explains senior engineering manager, Lara Hogan. "We run A/B tests that measure design changes as well as performance changes to ensure we're building the best user experience possible for our members. We work on keeping performance top-of-mind throughout the product design process by making it easier to test and measure."

06. Lock down your frame rate

"Most people just prioritise loading performance," notes Chrome developer relations advocate, Paul Lewis, but he notes that while it's important, you also really need to measure how quickly your site responds to user inputs, and whether or not it hits a solid 60fps for scrolling and other animations. "Knowing your frames per second, and how much time you're spending in JavaScript, styles, layout, paint and composite is crucial, because users really notice when frame rates dip, or things lock up. Become BFFs with your developer tools and regularly profile your projects during development. If you've never profiled before, check out this guide to optimising your sites and apps."

07. Get everyone involved

"I approach web performance as a holistic, team-wide task," says frontend developer Harry Roberts. "Performance is everyone's problem, and should not be treated as one team or sprint's responsibility. I get involved with key product and design decisions as early as possible to ensure that everything is done in the best interests of the performance of the project; design treatments, feature requests and the code itself all contribute to the performance of the product. It is a fundamental, not a feature."

Learn about crafting a UX that's fast and rich with Mark Zeman at Generate Sydney on 5 September; book your ticket now! This article originally appeared in net magazine issue 268; subscribe today!


Jim McCauley is a writer, editor and occasional podcaster, and is available for space parties.