The following tables of app startup stages and timings — and user stories — provide best practice guidelines for Firefox OS apps, in terms of "acceptable" app performance on all Firefox OS devices (including low-spec devices.) This forms the Firefox OS Performance team's UX-approved definition of performant apps, and is part of Mozilla's program for advancing Firefox OS responsiveness and perceived performance.
App startup stages and recommended time goals
The following tables define different stages of app startup, and some time goals that you should aim for when trying to improve perceived app performance. For more information on running performance tests against Firefox OS, see Raptor.
Stages
| Stage | Description |
|---|---|
| Navigation UI Visible | The wireframe of the application is visible, e.g. headers, footers, or navigation elements. |
| Navigation UI Interactive | The wireframe of the application, e.g. headers, footers, or navigation elements, are enabled for user interaction. |
| Content Visible | The initial 'above-the-fold' content is displayed and has completed rendering. In this state, the application appears visually ready to for user interaction. |
| Interaction Ready | The core subset of user interactions are enabled for 'above-the-fold' content. |
| Content Ready | The application's remaining or non-essential content has loaded and is ready for interaction and all background processing has completed. |
Goals
| Speed | Action |
|---|---|
| 0 - 140ms | App's icon shows it has been touched. |
| 0 - 1.0s | App's launch animation is started and completed. |
| 0 - 1.0s | App's wireframe, e.g. banner and controls, are loaded and visible. |
| 0 - 1.0s | App's visible content or a loading indicator must be displayed. This metric should be hit by the "Content Visible" stage above. |
| 0 - 1.25s | App is ready for user interactions, e.g. touch, scroll, etc. |
Note: These goal times refer to application cold launch and are cumulative. For example, application icon touch to application interaction ready is expected to occur within 1.25s.
Implementation
Using the following User Timing marks will show performance data in the Raptor performance testing tool.
// navigationLoaded
performance.mark('navigationLoaded');
Emit this marker when your application designates that its core chrome or navigation interface exists in the DOM and you have marked it as ready to be displayed, e.g. when the element is not display: none; or other hiding functionality.
// navigationInteractive
performance.mark('navigationInteractive');
Emit this marker when your application designates that the core chrome or navigation interface has its events bound and is ready for user interation.
// visuallyLoaded
performance.mark('visuallyLoaded');
This marker maps to the important Content Visible marker above. Emit this when your application designates that it is visually loaded, e.g. the "above-the-fold" content exists in the DOM and you have marked it as ready to be display, again not display: none; or other hiding functionality.
// contentInteractive
performance.mark('contentInteractive');
Emit this marker when your application designates that it has bound the events for the minimum set of functionality to allow the user to interact with the "above-the-fold" content made available at visuallyLoaded.
// fullyLoaded
performance.mark('fullyLoaded');
Emit this mark when your application has been completely loaded, for example any relevant "below-the-fold" functionality has been injected into the DOM, been marked visible, and is ready for user interaction. Any required startup background processing should be complete and should exist in a stable state barring any further user interaction.
User stories
The following user stories provide some insight into how users will perceive time and performance during app usage.
Perception of cause and effect (140ms)
- Time: 140ms.
- Use cases
- Touch states (i.e. keyboard)
- Transitions
- Device rotation
- Stories
- As a user I expect a visual change within 140ms of launching an app.
- As a user I expect buttons or list items to show their highlight state within 140ms of being touched.
- As a user I expect screen transitions to begin to occur within 140ms of initiation.
- As a user I expect an app to start redrawing as portrait/landscape within 140ms of rotating the device.
Perception of progress
- Time: 1s.
- Use cases
- App launch.
- Initial paint.
- Load above the fold.
- Load fully.
- Long-running operations (eg: downloads, wifi connect).
- Time to first Interaction.
- Stories
- As a user I expect an app's first view (above the fold) to complete rendering within 1 sec.
- As a user I expect continuous visual updates of the progress of long running operations.
- As a user I expect to be able to interact with an app within 1 sec.
Hand-eye coordination
- Time: 100ms.
- Use cases
- Drag & drop (homescreen & dock icon moving.)
- Scrolling.
- Pinch/zoom.
- Swiping pages, opening drawers.
- Stories
- As a user I expect to a drag operation to visually respond within 100ms.
- As a user I expect a visual response within 100ms when I pinch/zoom in a place where it's supported.
- As a user I expect scroll operations to visually respond within 100ms of initiation.
- As a user I expect scrolling to remain in synch with touch events within 100ms.
- As a user I expect a visual response within 100ms when initiating a swipe.
See also
Videos
- Fluent 2014: Ilya Grigorik, "Speed, Performance, and Human Perception"
- Fluent 2014: Steve Souders, "The Perception of Speed"
- SXSW 2012: Andy Hume: "CSS for Grownups"
Documents
- Cognitive Biases
- Cognitive Load: The latest behavioral economics & consumer psychology research distilled down into helpful little brain gems.
- CSS
- High Performance Web Sites (Steve Souders)
- Jank-free Web
- Perceived Performance Introduction