Speed is design
Updated on Mar 02, 2021
A few months ago I visited New York. I was lucky enough to have internet on my phone (thanks Three). While walking around the streets I wanted to find the number for One Observatory. With my phone in hand I started to load their website. I waited, then waited some more. Part of the page had loaded but I was still waiting for the text to show – I was waiting for a custom font. The page took over a minute to fully load.
Sometimes the web feels as slow as it’s ever been. It’s slowly grinding to a halt. But why is this?
I think the answer is in the history of how we design websites. If we go back to the late 90s and early 2000’s we were speed conscious. Every image, script or flash embed added painful seconds to a page load. When we were using dial up internet on our desktop computers, speed was the primary concern.
In the early to mid 2000’s broadband started to become more prevalent. We had quicker internet speeds and more powerful computers. That meant we started to use more images, larger images, more scripts and custom fonts. We had become so used to slow speeds of the late 90’s that we accepted them as the norm. Instead of making our pages faster we made them heavier.
Fast-forward, smartphones are the dominant browsing device – both in developed and developing nations. The assumptions we made about screen size and internet speeds are out the window. Unfortunately for many websites the days of adding more images, scripts and fonts never ended. The average page load for a website is now larger than the original Doom game.
But why do we feel compelled to keep adding more weight to our webpages? Why can’t the web be faster instead? We’ve become complacent. Casually disregarding speed for new features while testing on our high speed connections.
Just like me, I’m sure you’ve had equally frustrating moments waiting for a page to load the content you desperately need. At that moment, whether it’s on the streets of New York or a coffee shop in Stafford, you just want the content fast.
During the last year we’ve seen a rise in ad blocker usage. Ad blockers not only block adverts but also some scripts. Some mobile ad blockers also support the blocking of custom fonts. As a result we see huge leaps in performance.
While this is only a quick fix to make sites faster, it is the first time the public have cried out for a faster, better web.
Using performance budgets to make websites fast
Every feature or designed element has an cost. The web is a balancing act between features, design, speed and performance. The difficulty is weighing up whether that feature or design element out ways the costs to speed and performance. A common way to keep speed of pages in check is with a performance budget.
A performance budget is where you set limits a page cannot exceed. These could be number of file requests, total size of page, time to load at certain connections or a combination. Then throughout the project the performance budget is monitored to ensure it doesn’t go over the limits set. If something exceeds the budget the team need to decide whether that feature is justified. If so, what else could be removed so the performance budget isn’t exceeded.
It’s a great method of working because it forces everyone on the team to be performance first driven. It’s puts performance at the top of the priority list. The client needs to prioritise their content, the designer needs to consider each design element and developers need to program with speed in mind.
It takes discipline from everyone. As the phrase goes “time is money” and the faster a page loads the higher the conversions - proven plenty of times.
Thinking mobile first
Thinking mobile first is a great way of ensuring a website is as fast as possible. Mobile first forces you to consider and prioritise what is important. Mobile first helps create a minimal viable product. Once you have that, you can see if there is room in your performance budget to introduce more features and design elements.
Working together
Your visitors want your content fast. We all want a fast web. Let’s work together to make it better.
