There's an old story about why elevators have mirrors. Occupants in a New York high-rise began complaining about poor elevator service during peak hours; wait times were too long. Because of the age of the building, there wasn't a mechanical fix. The building manager turned to his staff which, fortunately, included a recent grad with a psychology background. This employee observed that wait times weren't excessively long, perhaps the complaints were due of boredom? He suggested installing mirrors so occupants could look at themselves or others without appearing to do so. The mirrors went in and the complaints stopped. When occupants had something to occupy their attention, elevator rides no longer felt too long.
What does this have to do with web performance? In this series, we've looked at optimizing code, tuning servers, crunching images, etc. to achieve maximum performance. Once we’ve exhausted our best practices, what can we do to hold the users attention and prevent boredom? What if we could make the site feel faster by altering how content is loaded or redirecting the user’s attention? Interested?
Avoid content blockers
This technique doesn't reduce the amount of data the user has to download, but it structures the load so users have something to interact with as soon as possible.
Images are huge bottlenecks, especially photos. Typically images load in a jagged manner: half of the image pops in, then a little more and finally the whole thing pops into place. This is the default, 'baseline' method of loading JPGs. Consider exporting your photos as progressive JPGs. Progressive JPGs load the entire image immediately albeit in a pixelated state. As more image information is downloaded, the photo's resolution improves until it's fully loaded. The result is that the user has something to react to sooner. Progressive JPGs aren't necessarily smaller files, but they feel faster. Note that browser support of progressive JPGs isn't universal so your mileage may vary.
Loading animation and progress bar design
Loading animations and progress bars are great because they can effectively 'speed up' the user's sense of time. They give users a sense that your web app is loading faster than it is. A few tips:
- Don't use a loading animations for interactions that are under a few seconds. That will actually make the interaction feel longer. That’s bad.
- Research has shown that progress animations that move backwards and opposite to the progress direction feel faster. This video demonstrates the effect.
- Radial indicators show a loading state but, unlike progress bars, they don’t show time until complete. For radials, more ‘pulsations’ feel faster; the more times that loader spins, the faster your web app feels.
This post only scratches the surface of optimizing 'perceived performance'. The key is giving users something to interact with as soon as possible even if the entire page/image/app isn't finished loading.