Performance driven web design
Have you ever been frustrated by the speed of a website? I know I have, more times than I care to remember.
Many of us are lucky enough to have internet available on our phones abroad. While on holiday in New York I wanted to book some tickets. I thought, now I have the internet on my phone this should be a doddle. Unfortunately, the page I was trying to visit was 7mb in size. This meant it took over 1 minute to load! To make things more frustrating, nothing appeared on the screen until 30 seconds into loading.
Remember the game Doom? To put things into perspective, the average web page is now the size of the entire game, coming in at a whopping 2.4mb in size.
Why are websites so large?
In the early 2000’s computers were getting faster and broadband started to become prevalent in households. Website owners saw this as an opportunity to create a more media rich experience — adding more images, larger images, Flash, scripts and custom web fonts.
We had become so used to the slow speeds of dial up that it became the accepted norm. Instead of making web pages faster we made them heavier.
Then, on 4th June 2007 this happened.
In the decade preceding the introduction of the smartphone, we had been creating websites with the assumption that computer processing power and internet speeds would continue to improve. The birth of the smartphone meant we were no longer able to predict the capabilities of a device. Every assumption we made about increasing processor power and internet speeds were out the window. What we had been creating was now a slow and painful experience for those with smartphones.
Fast forward to today and people all over the world can now access the internet. Ranging from super fast broadband to mobile 2G speeds. From extremely fast computers to low powered smartphones. With over 50% of users browsing on mobile devices, this is something we can’t ignore.
But why make our websites fast?
Faster websites make more money
This isn’t some grandeur statement. It’s a fact backed by dozens of studies and tests by leading eCommerce websites.
Research from Google’s DoubleClick found that 53% of visits to mobile sites are abandoned after 3 seconds. When they compared sites that load in 5 seconds to ones that load in 19 seconds, they found the faster website had 70% longer average session lengths and 35% lower bounce rate.
Walmart saw a 2% increase in conversion for every 1 second of improvement in load time. Every 100ms improvement also resulted in up to a 1% increase in revenue.
Etsy saw a 12% increase in bounce rate when they added 160kb of images to their mobile page.
Amazon famously increased the load time of their website by 100ms. They saw a 1% decrease in revenue for every 100ms added.
Staples reduced median homepage load time by 1 second and reduced load time for the 98th percentile by 6 seconds. As a result, they saw a 10% increase in their conversion rate.
The rise against slow websites
Still not convinced speed is important? During the last year we’ve seen the rise of ad blockers. Ad blockers are plugins that block certain scripts from loading on the page. As a result people can see a huge leap in performance.
While this is only a quick fix for making the internet faster, it’s the first time the public have cried out for a better web experience.
What is a slow website?
This may sound like a silly question but there are different ways to measure performance.
The simplest method is to measure the time and size of the page to load from start to finish. This has merit to find out the overall cost of a page — for example if a customer is using a mobile data connection it could cost a lot to download data. Here is a neat little tool to find out the cost of downloading your website from across the world. Unfortunately, this simplistic method isn’t very accurate when measuring the time for a page to load. This is because the website might feel like it has loaded much quicker than the actual time for it to complete. The page could still be loading assets in the background while the user happily browses around the page.
This leads onto perceived speed. In my opinion this is much more important. Perceived speed is how fast a website feels to use. The page could render within a couple of seconds while other assets are loaded in the background. This means a large page might feel fast and a small page might feel very slow.
What causes a website to be slow?
To understand how to make a website faster we first need to understand why they are slow. There are dozens of things that impact the performance of a page but here are the ones I consider to have the biggest impact.
The internet connection speed is only one of many factors that affect the performance of a website. It’s easy to jump to conclusions, making the assumption that if a person has a faster internet connection, they can access a website quicker. This can be true. However, home broadband connections are shared across an entire household. It’s possible for the connection to become congested.
Server and user location
The location of the web server and the person trying to access the website will also impact the speed. Even at the speed of light, it takes 1.3 seconds for a web session to be initiated between Australia and the UK. That’s a significant amount of time just to make an initial connection.
The simplest solution is to locate your server near to the majority of your customers. If your customers are more widely spread, you could invest in a content delivery network (CDN). CDN services can be used to distribute your assets around the world. Assets can then be pulled from the nearest server to the user. This can significantly improve the performance of a website but can be costly to implement.
How a page looks can have a massive impact on the performance. For example, if you’re using a carousel (a slideshow of banners) this can add over 1mb to the size of the page. Custom fonts can add 100’s of kilobytes to each load and also slows down the rendering of the page. Large images can double the size of a page even if they’re only there for cosmetic reasons.
Number of assets
The number of assets used per page will increase the time for them to download. It’s quicker to download 1 file that is 1mb than 10 that are 100kb each. This is because the browser can only create a limited number of simultaneous connections.
There is a caveat to this, the new HTTP2 protocol will allow many more files to be downloaded simultaneously, although this isn’t widely implemented yet.
How do we make websites fast?
Unfortunately there is no quick answer. You can of course add a few plugins (such as caching and image optimisation) to your website to get a speed bump. However, this often adds an additional layer of complexity and only masks the problem.
A fast website requires a team effort where performance is put at the forefront of all decisions. Every feature or designed element has a cost to performance. It’s a balancing act between features, design and performance. As a team, we need to weigh up the pros and cons of each element and decide whether it’s inclusion outweighs the cost to performance.
Performance budgets can be used to keep websites in check. A performance budget sets limits a website cannot exceed. These could be size on page size, number of assets, perceived speed, actual speed or a combination. Throughout the project, the budget can be monitored to ensure it doesn’t go over. If it does, the team must decide if that feature is important enough to keep and what else can be sacrificed to keep the page within budget.
Another example is off-the-shelf themes. These can be very affordable compared to a custom design but are also extremely heavy. They’re designed with the kitchen sink in mind. You name a feature and a theme will probably have it. This means websites using off-the-shelf themes can be extremely slow. Statistics prove that slow websites convert less. It might be short-sighted to spend less on your website upfront at the cost of performance.
Everyone who touches the website, from content editors to designers and programmers impact the performance of a site. Performance budgets are a great way to create a visible and accountable way to build and maintain a performance driven website. It helps prioritise what content is important and encourages people to think about speed throughout the lifespan of the project.
Time is money. The faster a page loads, the higher the conversion. This should be enough encouragement to prioritise speed on your website.
Originally published at https://www.iweb.co.uk/2016/09/performance-driven-web-design/