As a developer, you may know that performance is a crucial factor, which decides if user willingly uses your application. No one wants to use the sluggish app, neither you nor user of your app.
Maybe you think that improving performance is only about compressing assets and code optimization. Well, there is a vast area of performance, which is often ignored – perceived performance.
Perceived performance describes how fast your app is in the user’s opinion. In other words, performance is measured not by some objective metrics, but by user’s feelings and opinion.
Luckily, there are some useful tools and techniques, that can help you improve the overall user experience. Here’s my short list of tips and tricks for enhancing perceived performance.
Skeleton loading
Do you remember this moment, when you open your Facebook for the first time, and you saw some incomplete layout, full of gray lines? This particular screen is called a skeleton screen.
Skeleton screen is something like a preview of next view that is going to enter, usually with text content marked as long gray lines and boxes in place of photos. This type of screen looks very similar to mockups used in wireframes that shows a simplified version of the layout.
Skeleton loading can visually speed up your application, comparing to a blank screen with a single spinner or progress bar. It’s achieved by making app interactive all the time and giving a preview of the next screen.
This concept can be combined with PWAs’ (Progressive Web Applications) app shell concept to provide the best user experience and native-like feeling.
Optimistic layout
A performant application is one that is not only fast but also responses in critical time for user’s actions. App’s response needs to be quick, preferably between 100 and 300 milliseconds. The upper limit is 1 second (1000 milliseconds), so if after this time user do not see any state change, he likely abandons his action. Unfortunately, some actions are that complex, that you can’t guarantee a response in under 1 second.
Happily, there is an easy way to tell the user that his request is in progress, so he must not leave our app. You can use Optimistic UI idea.
If you define your layout as optimistic, it means that your app doesn’t get blocked during waiting for an action to resolve. The very first step to making your app optimistic is to add a spinner or a progress bar to crucial parts of your app.
Take the button for example. It’s the commonly used element, which triggers an action. Either it’s changing current’s page route or sending entire form to the server, so should inform a user that something is happening. Here’s a simple example of how you can do it:
Sending data is not the only possibly blocking action in web apps. There is also a fetching, during which your application is downloading some data. This action also needs a loading state, especially if the app is fetching some crucial data.
Image preloaders
I find an image as the heaviest resource your browser needs to load. Now, we’ve got used to high-density screens, and high-resolution content served to please our eyes. Poorly, for us developers, more pixels means more kilobytes. Better image compression can reduce load time, but still, we can quickly reach the bottom limit, below which images looks terrible.
Medium introduced an exciting way to handle image preloading, which is now widely used in the industry. It’s called Progressive Image Loading. It’s an impressive and straightforward technique, which allows presenting a lightweight preview of the original image during it’s loading.
Without many details, this technique uses a tiny image, usually up to a few kilobytes, as a placeholder for the original image. Then, when the placeholder is in the viewport, it loads and fades in the source image. Thanks to using a lightweight placeholder, browser avoid loading large resources, as they are loaded on demand.
Snappy animations
It may not be obvious, but the way how you define animations can have an impact on final user experience. Animations affect not only on content presentation but also if your application looks performant. They are great for concealing action that runs too long, by faking an instant response.
Surprisingly it’s easy to overextend animation’s duration. Keep in mind this single rule – simple animation needs to run between 0.2 to 0.5 seconds. Everything below 0.1 feels instantaneous, and it’s not worth to animate it. More than half of the second is too much for a mere transition from one state to another. For complex animations, try not to go beyond 6 seconds. Above this limit, it’s better to split your animation into smaller ones.
Conclusion
I hope that the tips and tricks mentioned in this article will help you fix perceived performance in your application. Fortunately, modern web development gives us great tools and concepts, which we can freely use to boost up our app. Although using any tricks for visually improving performance may be a good strategy at some point, you can’t forget about the basics – proper assets’ loading and handling any performance bottlenecks.
If you seek more information about how to improve perceived performance, I strongly suggest you take a look at the list of recommended articles:
- Improved Perceived Performance with Skeleton Screens
- The App Shell Model
- Optimistic UIs in under 1000 words
- Progressive Image Loading and IntersectionObserver
- 6 Animation Guidelines for UX Design
- Performance is User Experience
- An Introduction to Perceived Performance
- Why performance is the best way to improve the user experience
- Taking A Look At The State Of Progressive Images And User Perception