PRPL は、ウェブページの読み込みとインタラクティブ化を高速化するために使用されるパターンを記述する頭字語です。
- 遅れて検出されたリソースをプリロードします。
- できるだけ早く初期ルートをレンダリングします。
- 残りのアセットを事前キャッシュに保存します。
- 他のルートやクリティカルでないアセットを遅延読み込みします。
このガイドでは、これらの手法がどのように連携し、独立して使用してパフォーマンスを向上させるかについて説明します。
Lighthouse でページを監査する
Lighthouse を実行して、PRPL 手法に沿った改善の機会を特定します。
- Ctrl+Shift+J（Mac の場合は Command+Option+J）キーを押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [パフォーマンス] チェックボックスと [プログレッシブ ウェブアプリ] チェックボックスをオンにします。
- [Run Audits] をクリックしてレポートを生成します。
詳細については、Lighthouse でパフォーマンス改善の機会を見つけるをご覧ください。
重要なリソースをプリロードする
Lighthouse では、特定のリソースが解析されて遅れてフェッチされた場合、次のような不合格の監査が表示されます。
プリロードは宣言型フェッチ リクエストです。ブラウザのプリロード スキャナで検出できないリソース（background-image プロパティで参照される画像など）をリクエストするようブラウザに指示します。遅れて検出されたリソースをプリロードするには、rel="preload" を含む <link> タグを HTML ドキュメントのヘッドに追加します。
<link rel="preload" as="image" href="hero-image.jpg">
<link rel="preload"> ディレクティブを追加すると、そのリソースのリクエストが開始され、キャッシュに保存されます。ブラウザは、必要に応じてそのデータを取得できます。
重要なリソースのプリロードの詳細については、重要なアセットをプリロードするガイドをご覧ください。
初期ルートをできるだけ早くレンダリングする
Lighthouse では、サイトが画面にピクセルをレンダリングする瞬間である初回ペイントを遅らせるリソースがある場合は、警告が表示されます。
Lighthouse では、First Paint を改善するために、重要な JavaScript をインライン化し、async を使用して残りを遅延させ、スクロールせずに見える範囲で使用する重要な CSS をインライン化することをおすすめします。これにより、レンダリングをブロックするアセットを取得するためのサーバーへのラウンドトリップがなくなるため、パフォーマンスが向上します。ただし、インライン コードは開発の観点からメンテナンスが難しく、ブラウザによって個別にキャッシュに保存できません。
First Paint を改善するもう 1 つの方法は、ページの初期 HTML をサーバーサイドでレンダリングすることです。これにより、スクリプトの取得、解析、実行中にコンテンツをすぐにユーザーに表示できます。ただし、これにより HTML ファイルのペイロードが大幅に増加し、操作可能になるまでの時間（アプリケーションが操作可能になり、ユーザー入力に応答できるようになるまでの時間）が長くなる可能性があります。
アプリの First Paint を減らすための正しい解決策は 1 つではありません。インライン スタイルとサーバーサイド レンダリングのメリットがアプリのトレードオフを上回る場合にのみ、検討してください。これらのコンセプトの詳細については、以下のリソースをご覧ください。
アセットを事前キャッシュに保存する
プロキシとして機能することで、Service Worker は、再訪問時にサーバーではなくキャッシュから直接アセットを取得できます。これにより、ユーザーはオフラインのときにアプリケーションを使用できるだけでなく、再訪問時のページの読み込み時間が短縮されます。
ライブラリで提供できるよりも複雑なキャッシュ要件がない限り、サードパーティ ライブラリを使用して Service Worker の生成プロセスを簡素化します。たとえば、Workbox には、アセットをキャッシュに保存するサービス ワーカーを作成、維持できる一連のツールが用意されています。サービス ワーカーとオフラインの信頼性の詳細については、信頼性学習パスのサービス ワーカー ガイドをご覧ください。
遅延読み込み
Lighthouse では、ネットワーク経由で送るデータが多すぎると、「不合格」と表示されます。
これにはすべてのアセットタイプが含まれますが、JavaScript ペイロードが大きい場合は、ブラウザが解析とコンパイルに時間がかかるため、特にコストが高くなります。Lighthouse では、必要に応じてこの点に関する警告も表示されます。
ユーザーがアプリケーションを最初に読み込むときに必要なコードのみを含む小さな JavaScript ペイロードを送信するには、バンドル全体と遅延読み込みの各チャンクをオンデマンドで分割します。
バンドルを分割したら、より重要なチャンクをプリロードします（重要なアセットをプリロードするガイドをご覧ください）。プリロードにより、より重要なリソースがブラウザによってより早く取得、ダウンロードされるようになります。
Lighthouse は、さまざまな JavaScript チャンクをオンデマンドで分割して読み込むだけでなく、重要でない画像の遅延読み込みの監査も行います。
ウェブページに多数の画像を読み込む場合は、ページの読み込み時に、スクロールしなければ見えない範囲またはデバイスのビューポートの外にあるすべての画像を先送りします（遅延サイズを使用して画像を遅延読み込みするをご覧ください）。
次のステップ
PRPL パターンの背後にある基本的なコンセプトを理解したところで、このセクションの次のガイドに進み、詳細をご確認ください。すべての手法を同時に適用する必要はありません。次のいずれかを実施することで、パフォーマンスが大幅に向上します。
- 重要なリソースをプリロードする。
- 最初のルートをできるだけ早くレンダリングします。
- 残りのアセットを事前キャッシュに保存します。
- 他のルートと重要性の低いアセットを遅延読み込みします。
詳しくは、PRPL パターンをご覧ください。