CS Chris Smith
CodePen Mastodon X (formerly Twitter) Feed

Performance Perception Trick: Processing Lists Faster

by Chris Smith
,

I've got a little trick to make the processing of lists appear to go faster than it actually does.

Let's suppose we have a list of 10 items and there's some kind of processing to be done on them, maybe sending them off to a service which returns a Boolean true/false response for each. In reality we post a single request with the data of the 10 items and we get a single response back after 3 seconds.

In the UI we can use animation to make it look as if each item is being sent one at a time by adding a 100 millisecond delay between each state change. This means that the user thinks the last item of the 10 is sent after 1 second but in reality it's already gone a second ago buying us extra time.

When we get the response, rather than show all the results immediately, we can use a similar animation to make them appear one by one with a 100 millisecond delay again. Although this is slower than just showing them all it maintains the illusion of the items being processed one by one.

So, the reality, without the trickery, is like this:

0Request sent,
perceived waiting time begins
3Response returned,
UI updated,
perceived waiting time ends

This would mean a perceived waiting time of 3 seconds.

And with the trickery:

0Request sent,
animation started
1Animation ends,
perceived waiting time begins
3Response returned,
animation started,
perceived waiting time ends
4Animation ends

Even though the time to getting the final bit of data on screen is actually extended to 4 seconds, the perceived waiting time is reduced to 2 seconds.