Performance is finally becoming a bigger part of the conversation in web design and development. However, it can still be a challenge to get people to actually consume the great content that’s out there and adopt a performance approach on a more regular basis.
Fortunately, freelance developer and web-performance analyst Henri Helvetica (real name Henri Brisard), is on hand to offer his top tips on souping up your site’s performance.
01. Endeavour to measure
Helvetica suggests that first of all you have to ensure you measure. “You can never improve what you don’t measure, ” he explains. “Once you have your measurements and data laid out, you have to figure out what important elements to measure. You could have two pages that load in nine seconds, but one may have the viewport filled in much quicker, so you have a better user experience.
"You have to measure what is important in the load process for your site and your commercial enterprise. Think about what’s important for your users to interact with. Every site has its own individual needs.”
Once he’s had a look at a page load, which helps him pick up on how and when certain items load, Helvetica’s next step is usually to fire up Chrome DevTools to assess exactly what’s going on. It’s an obvious choice, because it’s right there and it’s free – you don’t need to jump into another tool to try to discover why a page may be slow. Yet many developers barely use it. “DevTools is a bit like a smoke detector, ” Helvetica argues. “If there’s a fire, DevTools will tell you. It will at least show you where the smoke is.”
02. Lose some page weight
Then Helvetica looks at the waterfall, which will indicate various issues such as the size of an asset and the latency that was involved in loading it. If the site contains poorly sized images, for example, you will usually see a very long waterfall, which is one of the easier pain points to quickly pick up on. Images are one of the biggest culprits for a slow-loading site – an issue that can be fixed fairly easily. As they’re the largest source of data, images are also the largest source of data savings.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
“I would always take account of your page weight ,” Helvetica explains. “No matter how you slice it, if you have one image that’s 3MB, or even three images at 1MB each, you’re likely going to have a user-experience challenge.
"That page weight will also be the victim of your network, because a cellular network can never really be predicted. So you want to make sure your assets are small and optimised for the viewport, which means you shouldn’t be able to see any desktop-size assets on a mobile device.”
Helvetica also recommends lazy loading, a technique that delays the loading of an object until it’s needed. “Not all users are going to make it to the bottom of a page ,” he warns. “Quite often you may be loading assets that are never going to be seen. Employing lazy load is going to be very beneficial because you’re saving on data as well as battery drain or memory management. If you’re not loading the image, you’re not going to have any memory to usurp on the device.”
03. See how you stack up
Another reason Helvetica favours DevTools is because it now also provides metrics like the first paint (the time it takes for the user to see the first pixel of content) and the first meaningful paint (the time it takes for the page’s primary content to become visible).
Then there is the filmstrip (either in DevTools or performance tool WebPagetest) that shows incremental screenshots of the browser rendering a site, so you can see what a page looks like when it loads. By examining them you can figure out which assets were loaded when and look into ways of loading some of them at an earlier time in the timeline.
In WebPagetest – which Helvetica praises for its inspiring level of detail – you can also export a video of the load and compare the filmstrip with that of a competitor. “Once you connect the dots, you can explore how to improve the user experience by bringing these assets into the viewport faster,” Helvetica explains.
04. Cut the clutter
Helvetica highlights that design decisions have an impact on performance as well, and that your first load into the viewport ideally should not just be as quick as possible but also as clutter-free as possible.
For that reason you need to understand the series of events that take place to render the initial view of a web page – the critical rendering path. These events can be optimised by avoiding loading assets that are not necessary and by making decisions around the selection of web fonts and image formats.
“Make sure you keep your SVGs as complexity-free as possible ,” Helvetica suggests by way of an example. “Then you’ll have less code when you render your SVG. I hear this from developers all the time. They’ll get an SVG from the designers and have to send it back because it would affect performance.”
This article was originally published in issue 303 of net, the world's best-selling magazine for web designers and developers. Buy issue 303 or subscribe to net.
Want further insight into souping up your site's speed?
If you're interested in ensuring your pages load lightning fast, make sure you grab a ticket for Generate New York. Henri Helvetica will be perusing present-day and even experimental practices employed in measuring web apps, and providing performant user experiences, as well as offering more insight into measurements such as first paint, meaningful paint and time to interactive.
Oliver is an independent editor, content consultant and founder of Pixel Pioneers. Formerly the editor of net magazine, he has been involved with the web design and development industry for more than a decade and helps businesses across the world create content that connects with their customers. He is passionate about content, user experience, accessibility and designing for social good.
