WebPerf Perceived Performance – Don’t Forget the User

Normally when it comes to web performance, speed is everything. We usually recommend not obsessing over GTmetrix, PageSpeed, or Pingdom scores that much and instead focus on how fast your website is loading. However, there is one exception to that rule, and that is you need to also take into account “perceived performance.” In today’s post, we will explore why perceived performance can be a crucial factor in your website’s success and the best overall experience for your visitors.


Perceived Performance


Perceived performance can be described as simply “how fast does your website feel when it loads?” This can be slightly different than how fast your website actually loads. Perceived performance is all from the perspective of the user, not from a website speed test tool. Generally, the two go hand in hand, but that’s not always the case. Below are a couple examples of things that might speed up your site, but not necessarily help your perceived performance.

Psychological time in our brain usually differs from objective time on the clock. – Denys Mishunov
​

Lazy Loading


A good example of a faster website with worst perceived performance is how lazy loading is sometimes implemented on websites. The images below were taken from the unveil.js project, which is a lightweight plugin to lazy load images for jQuery. This plugin uses an animated spinner to show that the image is still loading. Notice how when we captured the screenshot the below images loaded, but the top one is still waiting. Just by having the spinner there it immediately gives us a feeling that there is a delay. This is not what we want visitors to feel.

---

Luke Wroblewski learned this first hand when they were experimenting with their Polar app, which has now been acquired by Google. They added a spinner to let people know things were loading. However, this was the feedback they got. “There seems to be an excessive amount of waiting around for pages to refresh and load -it doesn’t seem as quick as the previous version.”

By adding the progress indicators people started watching the clock, and in the end, it had the reverse affect. Lazy load can be an effective way to speed up a website by not loading all of the assets immediately, but we recommend skipping the loading indicator altogether and tweak the viewport so that they don’t see them loading as they scroll down. Perceived performance means thinking like the user.

Web Fonts


Another common example we see of perceived performance vs actual performance is when it pertains to how you load web fonts. A lot of people tend to follow guidelines from tools such as Google PageSpeed and others so closely that they just move the CSS for their Google fonts to the footer. While this does fix the render blocking issue it also creates FOUT, flash of unstyled text, because you are loading the fonts towards the end of your DOC load.

FOUT can be very annoying, distracting, and also again make it seem like it is taking longer for your page to load. Another example of this is Typekit. Even though it loads asynchronously, FOUT can be detrimental to your visitors. There are better ways to both correctly load web fonts and achieve fast load times, see our post on web font performance.

How Fast Should Your Website Load?


Kyle Peatt from Mobify summed it up quite nicely, “They don’t care about how many requests your website makes or how fast the screen repaints. But they do care about what those things impact — their perception of performance.”

Ilya Grigorik, a web performance engineer at Google, had a great talk at Fluent 2014 on the subject of Speed, Performance, and Human Perception. In it, he crafted a formula to better define perceived performance.

perceived performance = f(expected performance, UX, actual performance)

He made the point that achieving good performance, both actual and perceived, includes not only the web developers but also the designers. It should be a collaboration, as most developers tend to lean towards actual performance and designers learn more toward perceived. Collaborating can help you achieve a better balance.

Now with that in mind, the “actual performance” still does matter. That is of course why we operate a content delivery network. Forbes recently ran a test in which they started adding delays intentionally to their pages to see how it would affect their conversion rates.



As you can see, the lower conversation rates directly correlated with the slower load times.

age load time 7 days impact 28 days
1 second slower -4.9% -4.6%
2 second slower – -5.0%
3 second slower -7.2% -7.9%

In Google’s Site Performance for Webmasters video, Maile Ohye, states that “2 seconds is the threshold for e-commerce website acceptability. At Google, we aim for under a half second.” And that was back in 2010! So if you are approaching the 3 second mark you probably have some work to do. Generally aiming for under 2 seconds is at least a good benchmark to begin with.

Summary


As you can see there is a big difference between perceived performance and actual performance. Both are equally important, both from a systems point of view and UX. If you have one without the other, most likely your website will not perform as well as it could. Remember, when it comes to using website speed test tools, don’t always blindly follow their advice, otherwise you could be hurting your perceived performance.

Related Articles

• Perceived Web Performance – What is Blocking the DOM?
• Pinpoint Website Performance Issues
• How to Benchmark a Website

The post Perceived Performance – Don’t Forget the User appeared first on KeyCDN Blog.

Continue reading...

 

Yup perceived performance is indeed key. Folks can use webpagetest.org to test and then focus on the Speed Index score result Speed Index - WebPagetest Documentation