Skip to content
Learn Measure Blog Case studies About
On this page
  • Recommendations
  • Resources

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

May 4, 2019 — Updated Sep 19, 2019
Appears in: PWA audits
On this page
  • Recommendations
  • Resources

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 #

  • Source code for Page transitions don't feel like they block on the network audit
  • Skeleton Screen
Last updated: Sep 19, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.