Speed Matters: Designing for Mobile Performance — A summary

Franco D'Alessio
Mar 26 · 10 min read

Awwwards, in collaboration with Google, produced a great eBook called Speed Matters. Designing for Mobile Performance. It explains what mobile web users expect and how they behave, and then provides great insights on how to optimize your sites to provide a better experience.

The cover page of the eBook Awwwards produced in collaboration with Google

This article is a summary of that eBook, which contains the things that I considered to be interesting and useful. Please read the full eBook for more details. On the last pages you’ll also find an extensive list of articles, videos and tools for more information.

The need for speed

53% of mobile site visits are abandoned if the pages take longer than 3 seconds to load.

The need for speed is a research carried out by Google which studies the relation between real and perceived performance by users.

The most important insight this study provides is this one:

Speed matters on the mobile web, but perception of speed is just as important.

How important is speed for users?

The list of UX factors considered most important by the users

In general, real downloading speed is quite fast. 7 out of 10 sites loaded in less than 4 seconds, and around 33% loaded in less than 1 second.

Google’s PageSpeed Insights is a great tool where you can test your website and get results for several speed metrics, both for desktop and mobile

Mobile browsing in context

Distribution of mobile web browsing by location

Which is not surprising is that in this context, page load speeds are perceived as being faster. For people that are at work or traveling/elsewhere, load times are perceived as being slower.

But even for fast loading sites, 29% of people still don’t actually perceive them as fast 🤔

So what affects the perception of speed?

Effective use of the site 👆

Web visits where actual speed was slow but felt to be fast tended to be retail sites. We know that long scroll sites are designed to populate the page “above the fold”, giving the impression that the page is complete, even though loading is still ongoing “below the fold”.

This GIF shows how Amazon loads content above the fold first

This can explain some of the distortion between the real and the perceived speed: the difference between the time after which a site can effectively be used vs. the time it takes to fully load. This is a prime example of design thought to optimize the perception of performance.

Age 👴

Younger users are more demanding. Users between 18 and 24 years old only perceived 50% of the sites as fast loading sites. This number goes up to 73% for users between 35 and 44 years old.

State of mind 💆‍♂

As previously said, when users are calm and relaxed, sites are perceived as being faster. In this context around 80% of the sites were perceived as fast loading sites.

When users are feeling rushed or anxious, the perceived speed slows down. In this context only around 40% of the sites were perceived as fast loading sites.

Place of activity 🏠

On the move things feel slower. For people sat down, 75% of the sites were perceived as fast. But for people on the move, only 52% of them. When we’re not at home and need the information as soon as possible, things feel slower.

Outcomes of speed

  • They could achieve their goals (92% vs 73% for slow perceived sites)
  • They were more likely to return to the website again (95% vs 62% for slow perceived sites)

Speed also significantly impacted brand NPS (Net Promoter Score): an average of 92 points vs 44 for slow perceived sites.

Improve the perception of speed 🏃

Understanding interface response time

Users have less patience when they first enter a site than when they make successive interactions within the same site. Some users will tolerate waiting up to 5 seconds for tasks that are part of the user flow.

First Meaningful Paint and Time to interactive

· Time to interactive is the time required by the browser to finishing building the DOM so the user can begin to interact with the application.

As we already discussed, most retail sites use a very good trick that addresses these two metrics: they produce a quick FMP and prioritize the load of necessary scripts so that the content becomes interactive.

Put the user in active mode

SOME years ago, executives at a Houston airport faced a troubling customer-relations issue. Passengers were lodging an inordinate number of complaints about the long waits at baggage claim. In response, the executives increased the number of baggage handlers working that shift. The plan worked: the average wait fell to eight minutes, well within industry benchmarks. But the complaints persisted.

Puzzled, the airport executives undertook a more careful, on-site analysis. They found that it took passengers a minute to walk from their arrival gates to baggage claim and seven more minutes to get their bags. Roughly 88 percent of their time, in other words, was spent standing around waiting for their bags.

So the airport decided on a new approach: instead of reducing wait times, it moved the arrival gates away from the main terminal and routed bags to the outermost carousel. Passengers now had to walk six times longer to get their bags. Complaints dropped to near zero.

You can see the full story here.

There are two forms of waiting: passive and active. In passive waiting, the user simply watches something loading, without doing anything. When this happens, people overestimate waiting times by 36%.

You want to get people to active mode. Just like in the Houston airport story, you have to occupy users to hack their perception. If you make them wait while interacting with a game or answering a little questionnaire, the same amount of waiting time will feel shorter.

Create instant interactions

Check these UI animations and microinteractions for some prime examples.

Use the right loader ⏳

It can also be more informative to show the length of the remaining waiting time than the percentage of data still to be loaded.

Alitalia does this when you search for a flight

UX Patterns

Preemptive start

It is the realization of the beginning of a task before the user demands it. For example, by showing a questionnaire you distract the user while other assets are loaded.

Other examples are:

  • Loading assets on login screen
  • Preload assets on rollover
  • Preload content on previous states (preload the content of the next screen)
  • Preload assets while the user is on a multi-step forms

Early completion 🕐

In this case we partially show content that is not yet complete. The most common example is video streaming.

🖼 Other techniques regarding images include:

  • Progressive images. Images are loaded in successive states. The user can see a low resolution representation of the image that continues downloading.
  • Placeholders or low-res blurred images like used here in Medium.

Optimistic UI

Optimistic design, which can sometimes be dangerous, is a model where an incomplete task is presented as complete. It is based on the fact that only between 1% and 3% of client requests get a server error 🎉 It helps to create a smooth and interrupted experience for the user.

Only between 1% and 3% of client requests get a server error

A great example of this are Instagram likes. When you like a post, the action appears to be immediate, but in reality it is stored in the database at a later stage.

Smooth and optimized animations

Easing functions

The different ease functions curves
  • Use Ease-out for UI elements
  • Avoid Ease-in and Ease-in-out with long times. They are perceived as too slow for the users. Use them only for short times
  • For Ease-out and Ease-in use a duration of between 200–500ms
  • For Bounce and Elastic effects use a duration of 800–1200ms

Animation optimization

When using CSS transitions or animations, try to only use opacity and transform properties. All other properties are very slow to animate, especially on mobile devices.

CSS or JS animations?

  • Use CSS for simple animations, transitions and to animate DOM elements.
  • Use JS for complex animations, to animate sequences, independent transformations and path animations.

Designing for mobile performance

Content strategy ✍️

A very useful tip is to always create a Performance Budget to avoid an excess of unnecessary resources.

The performance budget 💰

The performance budget should include the following data:

  • Page weight in kilobytes, including all assets
  • Percentage assigned to each type of asset (images, CSS, JS, etc.)
  • Number of HTTP requests
  • Max time to load over 3G connections

Image strategy 🖼

Separate your images in these 4 categories:

  • Navigation and action images
  • Branding and priority images
  • Decorative images
  • Informative images

The first two types are very important and are the images that need to be always present. You need to work on decorative and informative images. While they’re nice to have, they are not critical, so try to replace them whenever possible with alternative designs (color blocks, text, etc.).

Deliver the minimal code needed

You want to deliver the minimal code to make a page useful upfront. Consider splitting your JS and only serve down the minimal code to make the current page useful for the user. Non-critical code should be lazily loaded in or added on the pages that absolutely need it.

Preload critical resources ❗️

But nobody knows more about your assets than you, the author of the site. You need to know which of them are critical to load early on each page, and design/code them according to that.

Inline critical CSS

Eliminate render-blocking resources in above-the-fold content

Loading contents that are not directly involved in the rendering of this prioritized visible content causes a delay that directly impacts conversion rates and user’s speed perception of the website.

So… What do you think? 😃

Thanks for reading ❤️

Franco D'Alessio

Written by

Web Developer and UI/UX Design enthusiast

More From Medium

Also tagged Mobile

Also tagged Mobile

Also tagged Mobile

SwiftUI: LongPressGesture

Also tagged Web Development

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