An Introduction to Perceived Performance - Treehouse Blog

An Introduction to Perceived Performance - Treehouse Blog Learn to code. Start your free trial with Treehouse. Home Subscribe Free trial Learn An Introduction to Perceived Performance Matt West writes on April 23, 2014 45 0 12 19 Share with your friends Your Name Your Email Recipient Email Enter a Message I read this article and found it very interesting, thought it might be something for you. The article is called An Introduction to Perceived Performance and is located at http://blog.teamtreehouse.com/perceived-performance. Captcha Submit (Illustration by Mat Helme, Treehouse ) Perceived Performance Is a Measure of How Quick 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, or losing a customer to the competition. Your website needs to respond quickly to requests from users and this means optimising your site with performance in mind. I’ve written about performance optimisation in the past, but from the viewpoint of you, the developer. Examining network timelines and PageSpeed scores is all well and good, but there’s a whole area of performance optimisation 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 optimising your websites, it’s what the user thinks that really 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 are in no way a substitute for good (traditional) performance optimisations. Instead, you should use these techniques to compliment your existing optimisation strategies and further enhance the overall user experience. Response Times and Perceived Performance One of the biggest bottlenecks in usability is response times — waiting for new content to load, or an operation to complete. In his book Usability Engineering , Jakob Nielsen identifies three main response time limits. 0.1 seconds — Operations that are completed in 100ms or fewer will feel instantaneous to the user. This is the gold standard that you should aim for when optimising your websites. 1 second — Operations that take 1 second 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. 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. Of course this depends on what operation is being completed. For example, users are more likely to stick around if they’ve just submitted their card details in the checkout than if they’re waiting to load a product page. Jakob Nielsen originally published these three limits back in 1993. I think the first two are still reasonable, but I would speculate the upper limit is now closer to 5 seconds. As internet speeds have increased, we’ve grown used to browsing the web at a lighting pace. The ability to multi-task has also shortened our attention span as we’ll tend to switch to something else if a web page is taking too long to load. Some even say that we now live in an A.D.D. Culture , in which attention has become the most valuable resource. Free trial on Treehouse: Do you want to learn more about obtimising your website and other front-end tips? Click here to try a free trial on Treehouse . Loading Dialogs You now know about the response limits you need to aim for, but what if it’s just impossible to complete an action in 100ms? There’s always going to be operations that take time to finish. Whether you’re loading content over a network, or manipulating a particularly large data set on the client (think: sorting tables), some operations simply take time. In these instances, it’s best to use some sort of loading dialog to show the user that something is happening and that your website hasn’t just locked up. How you choose to display this loading dialog can have a big impact on your websites perceived performance. Let’s explore. #renio interesting! Facebook did A/B testing to determine that users blamed FB on left, iOS on right, for slowness. pic.twitter.com/zEVbTime1Q — deeje (@deeje) January 31, 2014   This tweet by @deeje was doing the rounds earlier this year showing how Facebook found that changing the appearance of the loading animation impacted who users perceived to be behind the slow loading time (Facebook or iOS). Progress bars provide realtime feedback to the user and help to increase perceived performance. Loading animations like spinners are good, but progress bars (with a percentage figure) are even better. If you can, it’s always best to display a progress bar to the user that gives them realti