Among the first web development books I read was Speed Up Your Site by Andrew King. It’s close to 15 years old at this point and I suspect a bit out of date given all the changes in web development over that time, but it taught me early in my career about the importance of website performance.
In fact, my very first client hired me because she wanted her site to load faster. Her site had been built using HTML tables and it used images for nearly every part of the content. I redeveloped the site with CSS, which at the time wasn’t commonly used. When I was finished pages that had taken 90 seconds to load on the old site were loading in under 8 seconds on the new site I built.
In addition to redeveloping with CSS, I used other tips I’d learned from Speed Up Your Site and implemented them as best as I could. I felt happy with the results, as did my client, and I thought I had a pretty good handle on optimizing the performance of any website I would accept as a project.
That was more than a dozen years ago and much has changed since then. There’s a lot more to improving site performance than using CSS and removing whitespace in your code. While I still know some things about website performance, I’m afraid I’ve lost touch with the subject and don’t know more than I do know.
This site doesn’t load as fast as I’d like it to. Over the years I’ve come across checklists of things to do and applied their suggestions with various degrees of success. About a year and a half ago, I moved this site from one host to another and in the process lost some of the performance tweaks I’d made, though I did manage to make a few improvements in the switch.
While I find checklists helpful at times, most do little more than offer some code to copy and paste. Sometimes the checklists will make suggestions without even showing you how to implement the fix.
I thought I would spend some time and dig into the topic of website performance. I want to do more than offer a list of things to try. I want to spend time getting back the handle I used to have on performance and have since let slip through my fingers. This series is as much for me as it is for you.
Over the next few weeks I want to set the landscape. I want to talk about why performance is important and then help you understand what to measure and where you should put your efforts. I’ll do my best to help both of us understand waterfall diagrams and I’ll talk about performance budgets. After that I’ll take a break from the topic and come back to it a few weeks later with another series talking about how to actually make performance improvements.
Why Performance Matters
When you visit a web page, would you rather it load faster or slower? I assume you either answered faster or you were lying. Our want of faster loading web pages is why performance matters. In fact, that’s all you should need to know to want to make your own site load faster, but in case you need more convincing…
About 25 years ago Jakob Nielsen wrote a book called Usability Engineering and he offered some advice about response times which had already been in place for at least 25 years before he wrote the book.
- 0.1 second is about the limit for having a visitor feel as though the system is reacting instantaneously.
- 1.0 second is about the limit for a visitor’s flow of thought to stay uninterrupted, even though the visitor will notice the delay.
- 10 seconds is about the limit for keeping the visitor’s attention focused on the task they want to perform.
Because a site visitor will still feel like the site is reacting instantaneously at 0.1 seconds, there’s no need to offer any feedback aside from the result of their interaction. Similarly, between 0.1 and 1.0 second, no feedback is needed because the visitor’s thoughts remain uninterrupted.
10 seconds is about the limit for keeping attention. Anything above 1.0 second and below 10 seconds should get some feedback during the delay so a visitor knows something is happening. Above 10 seconds and you can expect a visitor to lose focus and start performing other tasks while waiting, assuming they wait at all.
When I look at those numbers, they suggest a web page should load in under 10 seconds at an absolute minimum and that meeting the minimum is still a lousy performance job. I’ve talked before about your site leaving an impression the moment it starts to load and I’d say performance itself is probably one of the most important impressions you can make.
Amazon has run tests that show if the pages of their site load one second slower they’d lose $1.6 billion every year. Google has found that an extra half second to load search results drops traffic 20%. Granted you and I aren’t Amazon or Google, but still those are some pretty big numbers.
Statistics Related to Performance
Within a few seconds of searching, you can find all sorts of statistics about how improving the performance of your site improves traffic, time spent on site, ecommerce conversions, signups, and even the general impression of your site.
Here’s a sampling of statistics that I found when I searched. I honestly have no way of verifying these numbers. I’m trusting the sites that reported them and I’ll link to the articles below.
- 47% of people expect a web page to load in 2 seconds or less.
- 40% will abandon a web page if it takes more than 3 seconds to load.
- Ancestory.com saw a 7% increase in conversions after improving render time by 68%, page weight by 46% and load time by 64%.
- AliExpress reduced load time by 36% and saw a 10.5% increase in orders and a 27% increase in conversion for new customers.
- 53% of visits to mobile sites are abandoned after 3 seconds
- 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
Some of these numbers are a few years old, but hopefully you get the point. Performance matters.
Here are the articles where I collected the stats above. There’s a lot more if you’re willing to search and click through to the results of your query.
- WPO Stats
- Making a difference with performance
- How Loading Time Affects Your Bottom Line
- 55 Web Performance Stats You’ll Want to Know
Perceived Performance
One quick topic before we go. I’ll pick up on this again later in the series. If you look at the stats I presented in the previous section, you’ll notice mentions about the expectations of the visitor and people saying sites were too slow. I’d guess in neither case did those people actually time how long the web pages loaded.
There’s real performance and there’s perceived performance. A site visitor probably doesn’t care that the site is loading a javascript library in the background that animates a button click further down the page. What they care about is being able to read the first paragraph of content as soon as they can. They won’t care about the Javascript unless and until they click the button and it doesn’t work.
- Performance is a measure of how fast your site is.
- Perceived performance is a measure of how fast a visitor thinks your site is.
You want to improve both, but realize that for some things performance is more important and for some things perceived performance is more important.
For example, adding a progress indicator makes people feel like progress is being made regardless of any actual progress. Adding one isn’t going to speed up your site, but depending on when and where you add one, it’s possible visitors will think the site did something faster.
Closing Thoughts
I hope that wasn’t too much introduction. The main thing to take away is that performance is important and even small improvements measured in milliseconds can impact your bottom line.
I’m by no means an expert on website performance and this series is my way of learning how to improve the performance of this site and any other I build. Hopefully it will also help you learn as I share my experience and what I learn.
Next week I want to look at the critical path or all the things that happen from the moment you request a web page in your browser to the point where it displays. In the weeks that follow I’ll talk about setting a performance budget, show you tools that can measure the performance of your pages, and explain what the waterfall diagrams they produce tell you about where you should make improvements.
Download a free sample from my book, Design Fundamentals.