Page transitions don't feel like they block on the network
— Updated
Appears in: PWA audits
Quick page transitions are key to how users perceive the performance of your Progressive Web App (PWA). Transitions should feel snappy, even on a slow network.
Recommendations #
To find slow page transitions, navigate your web app using a simulated slow network. To do that in Chrome:
- Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Network tab.
- In the Throttling drop-down list, select Slow 3G.
Every time you tap a link or button in the app, check that the page responds immediately in one of two ways:
- The page transitions immediately to the next screen and shows a loading screen while waiting for content from the network.
- The page shows a loading indicator while the app waits for a response from the network.
If you're working on a client-rendered single-page app, transition the user to the next page immediately and show a skeleton screen. Make sure to immediately show any content that's already available, such as the page title or thumbnail, while the rest of the content loads.
Resources #
Last updated: — Improve article