As a developer, you may know that performance is a crucial factor that decides if a user willingly uses your application. No one wants to use a sluggish app, neither you nor the user of your app.
Maybe you think that improving performance is only about compressing assets and code optimization. Well, there is a huge part of the topic 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.
Do you remember the moment when you open your Facebook for the first time and see an incomplete layout, full of gray lines? This particular screen is called a skeleton screen.
A skeleton screen is something like a preview of the 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 the 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. Here, using cache you can boost the time of loading the next screen.
A performant application is one that is not only fast but also responds in critical time with the user’s actions. The app’s response needs to be quick, preferably between 100 and 300 milliseconds. The upper limit is 1 second (1000 milliseconds). If after this time the user do not see any state change, he likely abandons his action. Unfortunately, some actions are so 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 the app. You can use the Optimistic UI idea.
If you define your layout as optimistic, it means that your app doesn’t get blocked while waiting for an action to resolve. The very first step inmaking 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 that triggers an action. It is either changing the current page route or sending an entire form to the server, so you should inform the user that something is happening. Here’s a simple example of how you can do it:
Sending data is not the sole possible blocking action in web apps. There is also a fetching action, during which your application can download some additional data. This step also needs a loading state, especially if the app is fetching some crucial data used for creating the main layout of the view.
An image is one of the heaviest resources your browser needs to load. As users, we have gotten used to high-density screens and high-resolution content to please our eyes. Unfortunately, for us developers, more pixels means more kilobytes, and more kilobytes means long load times. Better image compression can reduce load times, but still, we can quickly reach the bottom limit of an image’s good quality.
Medium introduced an exciting way to handle image preloading, which is now widely used in the industry. It’s called Progressive Image Loading, and it is an impressive and straightforward technique. This technique allows presenting a lightweight preview of the original image before it’s fully loaded.
Without many details, this approach 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 then transitions to the source image. With a lightweight placeholder in place of an original image, the browser avoids loading large resources, as they are loaded on-demand.
It may not be obvious, but the way you define animations can have an impact on the final user experience. Good animation affects not only a presentational aspect of content but also improves the perceived performance of your application. Animations are great for concealing actions that run too long by adjusting duration to fake the app’s instant response.
Surprisingly, it’s easy to overextend the animation’s duration. Keep in mind this single rule — a simple animation needs to run between 0.2 to 0.5 seconds. Everything below 0.1 of a second feels instantaneous and it’s not worth animating it. More than half of a 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 small parts and play them in one timeline.
I hope that the tips and tricks mentioned in my article will help you improve the perceived performance in your application. Fortunately, modern web development gives us great tools and concepts that we can freely use to speed 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 as a proper way of asset loading and handling any performance bottlenecks.
If you seek more information about how to improve perceived performance, I strongly suggest you to 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
This is an edited article that has been originally posted during 2018’s Performance Calendar.