Introduction to Perceived Performance | Matt West | Original Article 2014

Perceived Performance Is a Measure of How Quickly a User Thinks Your Site Is, and That’s Often More Important Than Its True Speed

Performance is important. It can mean the difference between making a sale and losing a customer to the competition. Your website needs to respond quickly to requests from users, and this means optimizing your site with performance in mind. I’ve written about performance optimization in the past, but from the viewpoint of you, the developer. Examining network timelines and Page-Speed scores is all well and good, but there’s a whole area of performance optimization that this technical stuff doesn’t cover.

Perceived performance refers to how fast a user thinks your website is, not necessarily how fast your technical stats say it is. When it comes to optimizing your websites, it’s what the user thinks that matters, not the technical wizardry that’s going on behind the scenes.

In this post, you’re going to learn about a few key concepts of perceived performance and some techniques you can use to make your websites feel faster.

Note: Using the techniques outlined in this post is in no way a substitute for good (traditional) performance optimizations. Instead, you should use these techniques to complement your existing optimization strategies and further enhance the overall user experience

0.1 Seconds – Operations that are completed in 100 ms or fewer will feel instantaneous to the user. This is the gold standard that you should aim for when optimizing your websites.

1-3 seconds –  Operations that take 1-3 seconds to finish are generally OK, but the user will feel the pause. If all of your operations take 1 second to complete, your website may feel a little sluggish.

5-10 Seconds – If an operation takes 10 seconds or more to complete, you’ll struggle to maintain the user’s attention. They may switch over to a new tab, or give up on your website completely.

If you cannot use progress bars, another option is to mask the loading time by using animations. Research has shown that you can significantly reduce the feeling of waiting by keeping a user’s attention occupied. Say that you’re loading some content from the server that is going to take 1 second. You could mask this loading time by applying a 1-second animation that slides out the current content and then slides in the new content loaded from the server. If the content loads before the animation has completed, the user may be none the wiser that the new content had to be fetched from the server. If the animation completes before the content is loaded, you can fall back to displaying a loading spinner. In this case, users will still feel as though they are waiting for a shorter amount of time, as they will have been distracted by the animation.