ページの切り替えがネットワーク上での妨げにならない

ページ遷移が速いことは、プログレッシブ ウェブアプリ(PWA)のパフォーマンスをユーザーがどう認識するかの鍵となります。ネットワーク速度が遅い場合でも、画面遷移のテンポが速いと感じられる必要があります。

推奨事項

遅いページ遷移を見つけるには、シミュレートされた低速ネットワークを使用してウェブアプリをナビゲートします。Chrome で行うには:

[コメント]: <>(最初の 2 つの項目は web.dev のショートコードですが、どの言語に対しても英語から翻訳されていません)。 1. Control+Shift+J(Mac では Command+Option+J)を押して DevTools を開きます。2. [Network] タブをクリックします。3. [Throttling] プルダウン リストで [Slow 3G] を選択します。

アプリでリンクやボタンをタップするたびに、次の 2 つの方法のいずれかでページが即座に反応することを確認します。

  • ページはすぐに次の画面に遷移し、ネットワークからのコンテンツを待機している間、読み込み画面を表示します。
  • アプリがネットワークからのレスポンスを待つ間、ページに読み込みインジケーターが表示されます。

クライアントがレンダリングするシングルページ アプリの場合は、ユーザーを直ちに次のページに移行し、スケルトン画面を表示します。残りのコンテンツが読み込まれる間に、ページタイトルやサムネイルなど、すでに利用可能なコンテンツがすぐに表示されるようにします。

リソース