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

Published on Updated on

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.

In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

Resources

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.