Faster websites do better across a whole variety of metrics. Speeding up websites improves SEO and therefore click-through rates, so faster websites rank better, and it boosts conversions, so it definitely improves user experience as well.
As a web designer you’ll want to do everything that you possibly can do to make your website faster, including implementing a CDN (Content Delivery Network), prefetching resources, compressing images, leveraging browser caching, and a bunch of other backend optimisations. However, there is a way that we can make websites feel faster, even if the website already loads at lightening speed. It’s a technique called improving perceived performance.
Perceived Performance is how fast the above-the-fold content renders—this is the content that the users digest first, while the rest of the content (the below-the-fold content) is loading.
When optimising websites for better perceived performance, you’ll still reap the same benefits as a website that is truly fast, which includes site visitors staying longer, increased conversions, and a better user experience overall, however, the boost in metrics is even greater. Let’s look at the top strategies to implement when dealing with impatient users. Many of these strategies are based on human psychology, and how users interpret/evaluate content.
Occupied vs. Unoccupied Time
Occupied time is when you’re actually doing something, while unoccupied time means you’re waiting to do something. For example, if you’re waiting at the airport baggage claim to collect your luggage, it’s going to feel really long and maybe even torturous. However, the difference between waiting for baggage and waiting for a website to load, is that you have to collect your baggage, whereas website visitors can choose (and will choose) to try another website.
Yes, users are impatient. Every 1-second delay results in a 7% reduction in conversions, according to a Kissmetrics study.
———
Editors note:
Interesting ideas about occupied time. See, I become quite stressed when ideas and tasks build up, so I use up unoccupied time almost religiously. If I’m walking down the street, I consciously brainstorm. If I’m waiting for the microwave to beep three times, I’m standing there reorganizing my Wunderlist. I thought I was crazy, but this reaffirms that users simply hate unoccupied time.
———
Skeleton Screens
Progress bars and spinners are useful for letting the user know that something is happening, but only on a smaller scale (like when a file is uploading). On a larger scale, like when an entire screen is loading, a spinner is nothing more than an awkward reminder that you’re making the user wait, and since most browsers display a spinner in the tab anyway, it’s relatively useless.
An effective way to make a website feel faster is to use a skeleton screen. A skeleton screen fills the webpage with content gradually—this shows the user that something is actually happening, and also gives the user something to focus on (something is better than nothing).
Luke Wroblewski, Product Designer at Google, conducted a study that compared user happiness with and without using a loading spinner. Soon after implementing the spinner, the team received complaints that the spinner-version of the app was taking longer to load than the non-spinner version that used the skeleton screen technique (which is the default behaviour of the browser, btw). In reality, both versions took the same amount of time to load, but the perceived loading times were higher when content wasn’t being displayed immediately.
Since new content is displayed on the screen bit-by-bit, it creates a feeling of continuous progress, and the user has content to digest while the rest of it is rendering/downloading. How to implement, you ask? Just don't use a loading icon/spinner.
Vital Content Needs Priority Loading
When you focus on making the most important content on the webpage load first, the user has something to occupy their time, and it no longer matters if the rest of the webpage is still loading. If the user wants to read an article on a blog, yet unessential content like ads, background videos and "other content you might enjoy" sections are appearing first, it’s easy to see why such a scenario would lead to an impression of a slow site, as there’s a huge difference between delivering a section of content, and delivering the section that the user wants to see.
A Nielsen Norman Group study confirmed that loading vital content first (and quickly) leads to a higher user-engagement rate, where the user that saw what they wanted right away spent 20% of their time with it, whereas the user with an 8-second delay spent 1% of their time with it. If the vital content is restricted by a loading delay, engagement will drop significantly.
Heavy Features Above-the-Fold
Perceived performance ultimately comes down to reducing the content that’s required for loading your above-the-fold content. Here are the worst offenders:
- Animations and fancy transitions
- JavaScript that adds little value/unnecessary functionality
- Heavy media (large images and videos, especially when high-res/uncompressed)
- Abstract bitmap visuals that can easily be accomplished with SVG/CSS
Continue reading %A Designers Guide to Fast Websites and Perceived Performance%
by Marc Schenker via SitePoint
No comments:
Post a Comment