Recent Blog Posts View All Blog Posts
Contact Us

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 one is easy. Load CSS at the top of the page and Javascript at the bottom. Why?

CSS blocks rendering. Nothing will be displayed on the screen until all style information has been processed, so load all CSS in the <head> tag. Javascript, on the other hand, blocks downloads. Because the script may alter the page, the browser stops downloading other assets until the script has finished downloading. To get around this, load scripts last before the closing <body> tag.

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.

Progressive JPGs

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. 

Want to stay up to date with O3?
Sign up for our newsletter
Sign our newsletter

Oops, something went wrong! Please try again.

You have successfully signed up for our newsletter!
comments powered by Disqus
Back to Top