Mirosław Ciastek
Feb 5 · 6 min read
Thanks to Tomasz Cichos

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.

Skeleton loading

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.

Source: https://blog.ionicframework.com/wp-content/uploads/2018/03/facebook.png

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.

Source: https://developers.google.com/web/fundamentals/architecture/images/appshell.png

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.

Optimistic layout

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:

Source: https://cdn.dribbble.com/users/50261/screenshots/1426764/submit_button.gif

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.

Source: https://content.linkedin.com/content/dam/engineering/site-assets/images/blog/posts/2016/12/ember-concurrency-4-loading-without-blocking.gif

Image preloaders

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.

Source: https://cdn-images-1.medium.com/max/2000/1*vRW5LZSGsCdpPQlkGF-gNQ.gif

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.

Snappy animations

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.

Source: https://cdn-images-1.medium.com/max/1600/1*M97op6JKo8cYJH7EQVfJ2A.gif

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.

Conclusion

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:


This is an edited article that has been originally posted during 2018’s Performance Calendar.


Did you like it? Tap the 👏 button! Thank you!

You can find me on Twitter and Github.

SwingDev Insights

We've already made over 80 products for startups. We've gained valuable knowledge and experience… Now it's time to share it!

Thanks to Lena Stalmasińska

Mirosław Ciastek

Written by

Front-end Developer ♦ Passionate about performant web apps and beautiful UIs

SwingDev Insights

We've already made over 80 products for startups. We've gained valuable knowledge and experience… Now it's time to share it!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade