この記事は Eric Steinlauf による Google Developers Blog の記事 "The Speed Benefit of AMP Prerendering" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
 投稿者: Google ソフトウェア エンジニア、Eric Steinlauf


本日は、プリレンダリングが読み込み時間に与えるメリットについて、最新の分析を紹介したいと思います。AMP は、ページ読み込み時間を短縮するために設計されました。また、Google 検索は、ページ読み込み時間を短縮する特に重要な方法の 1 つとして、リンクがクリックされる前にプライバシーを保護しつつ AMP ドキュメントのプリレンダリングを行っています。

First Viewport Ready

AMP フレームワークは、すべてのページ コンテンツのレイアウトと、すべてのリソースの読み込みステータスを把握できるように設計されています。そのため、すべての「ファースト ビュー」コンテンツが読み込まれたタイミングがわかります。また、ドキュメントがプリレンダリングされたり、表示されたりしたタイミングもわかります。つまり、AMP フレームワークは、クリックしてからファースト ビューのコンテンツが表示されるまでの時間を計算できます。AMP は、First Viewport Ready（FVR、最初のビューポートの準備完了）というカスタム指標を使ってページ読み込みのスピードを測定します。この指標の定義は、「ユーザーがクリックしてから、ファースト ビューの広告以外のリソースが load イベントを発行するまでの時間（プリレンダリングも考慮されます）」です。AMP ドキュメント全体がプリレンダリングされていれば、この指標は 0 になります。クリックされた時点でドキュメントのプリレンダリングが完了していない場合や、まったくプリレンダリングが行われていない場合、この指標は 0 よりも大きくなります。
Google 検索には、プリレンダリングされる AMP ドキュメントも、プリレンダリングされない AMP ドキュメントもあります。そのため、プリレンダリングが FVR に与える影響を確認することができます。下のグラフは、プリレンダリングが行われる場合と行われない場合の FVR をパーセンタイルで示しています。AMP フレームワークがドキュメントの表示前にプリレンダリングを正常に完了した場合、FVR は 0 になります。
プリレンダリングが行われる場合と行われない場合の FVR をパーセンタイルで示したグラフ

First Contentful Paint

First Contentful Paint（FCP、最初のコンテンツの描画）は、ブラウザが測定するページ読み込みスピード指標です。この指標は、AMP ドキュメントだけでなく、すべてのドキュメントで利用できます。FCP は、DOM のコンテンツの一部が初めてレンダリングされたタイミングを指します。FCP が高いということは、明らかにページが遅いことを意味します。ただし、FCP が低くても、必ずしもページの読み込みが早いとは限りません。最初に表示されるコンテンツが重要とは限らないからです。これは便利な指標ですが、AMP はどのコンテンツが表示されているかを把握しているので、コンテンツの表示タイミングを理解したい場合、FVR を使う方がよいでしょう。
FCP はプリレンダリングを考慮しないので、AMP はプリレンダリングを踏まえた派生指標として、クリック前の時間を引いた Prerender-adjusted First Contentful Paint（PFCP、プリレンダリング調整済みの最初のコンテンツの描画）を計算します。プリレンダリングが行われない場合、PFCP = FCP となります。FCP もプリレンダリングによって低下しますが、違いは FVR ほど劇的ではありません。
プリレンダリングが行われる場合と行われない場合の FVR をパーセンタイルで示したグラフ
プリレンダリングが行われる場合の PFCP の中央値は、プリレンダリングが行われる場合の FVR の中央値よりも高くなっています。これは驚きかもしれません。これが起こるのは、クリック後にブラウザが画面にコンテンツを描画しなければならないためです。PFCP にはこの時間が含まれますが、FVR には含まれません。

まとめ

AMP ドキュメントのプリレンダリングを行うと、ページの読み込み時間を大幅に短縮できます。プリレンダリングを行うと、ユーザーが早く見たいコンテンツを早く表示できます。ページ読み込み時間はさまざまな方法で測定できますが、この点は測定方法によらず一貫しています。このスピードアップには、プライバシーを保護したプリレンダリングが必要です。現在のところ、これを行えるのは AMP だけです。今後は、Signed Exchanges などの新しいウェブ プラットフォーム機能によって、非 AMP ドキュメントでもプライバシーを保護した即時読み込みが実現できるようになるでしょう。

Reviewed by Chiko Shimizu - Developer Relations Team