Learn Measure Blog About

Page transitions don't feel like they block on the network

Updated

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:

  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.

Each PWA audit is weighted equally in the Lighthouse PWA Score, except for three manual audits: Site works cross-browser, Page transitions don't feel like they block on the network, and Each page has a URL. Learn more in the Lighthouse Scoring Guide.

Resources

Last updated: Improve article