They Won’t Wait: A Warning for Slow Websites

2019-06-25

Your website is probably slow. I’m not trying to make you feel bad or dismiss all the hard work you’ve put into your project. Heck, performance might have been a core value of the design. But websites can always be faster.

People have become increasingly more impatient over the last decade when it comes to technology, specifically non-native web-based interactions. Users expect your website to load almost instantly or they will leave and try another site, probably one of your competitors. Why should they stick around if your competitors’ websites load half a second faster?

Users are tired of being bombarded with tracking scripts, having to download massive component libraries, forced to deal with “accept cookies” prompts, playing a small mini-game of “close those ads!”, and then being subjected to never-ending loading screens. This is not the internet we were promised.

It’s in my nature, I always liked speed.

Guy Lafleur

We can do better

If there is only one thing that you learn from this post, hopefully it’s knowing to better value the time and money of your users. It’s a user’s choice to visit your website, so taking advantage of their time is extremely careless. Don’t be arrogant and ignore the cost of data on most mobile plans either. Eating up a chunk of someone’s data just for hitting your website is rage-inducing. That’s how you can lose customers permanently.

Let’s do an analogy, because I love stupid analogies:

Imagine going to your local hardware store because you need to buy a new hammer. Once you get to the entrance a woman holds the the door closed and asks you if it’s alright for someone to follow you around the store today. You say no. She then follows up by asking if you accept their hardware store agreement before proceeding inside - you tell her “sure”. She finally opens the door and lets you in. As you walk into the store she quickly stuffs a few advertisements for other local businesses into you hand. “Thanks”, you mutter.

Once inside you realize the hardware store is very big and manually looking for a hammer might take a while. You walk up to the front desk to ask where you can find a hammer but notice the cashier is playing with their phone behind the counter. You try to get their attention but they simply raise their hand and shout “Be with you in a minute”. After a short while they get off their phone and finally listen to your question. They then tell you where to find the hammers.

Does this sound like a fast and easy experience?

As silly as this hypothetical trip to the hardware store might be, it’s exactly what many current websites are putting their users through. Users - read customers - are coming to your website with a specific goal in mind; checking out a product, consuming information or just satisfying their curiosity. Stop putting so many blockers and excessive bloat in front of them.

Data doesn’t lie

If my terrible analogy wasn’t enough to convince you to implement better performance on your website, then maybe some “BIG DATA” will.

• Amazon (PowerPoint, slide #15): 100 ms of latency resulted in 1% less sales.
• Google (video): 500 ms caused a 20% drop in traffic.
• Walmart (slide #46): a 100 ms improvement brought up to 1% incremental revenue
• Mozilla: Shaving 2.2 seconds off page load time increased downloads by 15.4%
• Yahoo: 400 ms resulted in a 5 to 9% drop in traffic

All data taken from instant.page which I am a huge fan of ♥

The fact something as small as 100 ms can have such a profound impact on your bottom-line should be eye-opening. You’re leaving money of the table by not tackling even the low-hanging, easy performance wins. You need to start valuing your users’ time and stop serving them excessive garbage they never asked for.

Small and easy wins

Not all of these suggestions can work for every project (due to restrictions, brand guidelines, required marketing targets, etc.) but for most developers/designers they should be easy to implement: (in no particular order of importance)

• Reduce the number of web requests
  • HTTP Requests
• Use web-safe fonts when available or if using custom fonts utilize the font-display property
  • CSS Font Stack
  • Font Display for the Masses
• Make proper use of critical CSS
  • How to Use Critical CSS
  • Automatically generate CSS based on “above the fold”: criticalCSS
• Process all media (images / videos) through 3rd party tools
  • Cloudinary
  • Kraken.io
  • Piio
  • Sidenote: this blog uses the jekyll-cloudinary plugin to automatically process images
• Use “just-in-time” preloading (highly recommended for improved UX)
  • Instant Page
• Avoid using heavy tech-stacks whenever possible
  • Unless it is a critical use-case, users should not have to process or download extra resources
  • This also includes remove ads, pop-ups, 3rd party sign-up prompts, cookie notifications, over-the-top element animations, and all other garbage. This impacts UX performance, which is just as crucial as website loading speed

No need to be extreme

These quick “guidelines” are just a solid jumping-off point when tackling new projects or re-working current websites. There isn’t some agreed upon golden standard when it comes to web performance, but I find these rules work as a great place to start. Hopefully it can help others as well.