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:
[comment]: <> (The first two list items arefr om a shortcode from web.dev, but it was not translated from English for any language.)
1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
2. Click the Network tab.
3. 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.