High Performance Mobile Web

Chapter 8. Optimizing Responsiveness and the Post‑Loading Experience

When we think about web performance optimization, we usually think about initial load times, but performance improvement also includes how the user perceives the whole experience (how fast users can achieve their goals) and the responsiveness of the content once it has been loaded.

In this chapter, we will analyze how to improve performance and perception of the whole experience, including providing immediate feedback and keeping a good frame rate consistently on animations and scroll operations.

Immediate Feedback

As we saw earlier, a user will perceive anything that takes more than 100 milliseconds. Therefore, if the user taps on a button and doesn’t receive any feedback, such as a UI pressed state, within 100 ms, he will perceive the delay. One of the goals of RAIL, therefore, is to provide feedback within this time limit.

Let’s review some techniques that we can use to keep the feedback within our goal.

Touch Delay

In 2007, Apple released the first touch-optimized browser for the mobile space: Safari for iOS. It was the first browser exposing a desktop viewport to classic websites that is zoomed out to fit on the small screen. We all know how this works: the idea was cloned in every other mobile browser from that time.

While multitouch screens allow us to zoom in and out freely, sometimes it’s difficult to just focus on one paragraph and make the zooming and positioning gestures to read that zone comfortably. ...