AMP がパフォーマンスを改善する仕組み

AMP ページは以下の最適化処理の組み合わせによって高速化されており、一瞬で読み込まれているように見えます。

説明を読むより聞く方が好きな方は、以下の動画をご覧ください。この動画では AMP エンジニアリング リーダーの Malte Ubl が、以下の記載内容と同様の概要説明をしています。

非同期スクリプトのみ使用を許可する

JavaScript は ページ上のほぼすべての要素を変更できる強力な言語ですが、 DOM の構築をブロックして、ページのレンダリングを遅らせてしまうことがあります (JavaScript との相互作用を追加するもご覧ください)。 JavaScript によってページ レンダリングの速度が低下しないよう、 AMP では非同期の JavaScript のみ使用を許可しています。

作成した JavaScript を AMP ページに使うことは禁止されています。 インタラクティブなページ機能については、JavaScript の代わりに カスタム AMP 要素で処理します。 カスタム AMP 要素の内部で JavaScript が使われている場合もありますが、 それらはパフォーマンスを低下させないよう綿密に設計されています。

一方、サードパーティの JS は iframe 内で使用可能で、 レンダリングの妨げにはなりません。 たとえば、サードパーティの JS が パフォーマンスにかなりの悪影響を及ぼす document.write API を使っていても、 メインページのレンダリングをブロックすることはありません。

すべてのリソースサイズを静的に決定する

イメージや広告、iframe などの外部リソースのサイズは HTML で規定する必要があります。 そうすることで、AMP はリソースがダウンロードされる前に、各要素のサイズとレイアウトを決定できます。 また、AMP はリソースのダウンロードを待たずに、ページのレイアウトを読み込みます。

AMP はドキュメントからリソース レイアウトを分離します。 たった 1 回の HTTP リクエストで、すべてのドキュメント (とフォント)を配置できます。 AMP はリソースを多く消費するスタイルの再計算やブラウザでのレイアウトをしないよう最適化されているため、リソース読み込み後に再配置をすることは一切ありません。

拡張機能によるレンダリング ブロックを回避する

AMP では、拡張機能がページ レンダリングをブロックしないようにしています。 AMP は拡張機能にも対応しています。 ライトボックスInstagram の埋め込みツイートなどがその例です。 これらの機能は追加の HTTP リクエストを必要としますが、 リクエストによってページのレイアウトやレンダリングがブロックされることはありません。

カスタム スクリプトを使用しているページは、 最終的にカスタムタグが含まれることを AMP システムに通知する必要があります。 たとえば、amp-iframe スクリプトは amp-iframe タグが含まれることをシステムに通知します。 AMP は中身がわからない状態で、先に iframe ボックスを作成します。

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

サードパーティの JavaScript をすべてクリティカル パス から外す

サードパーティの JS は同期的に JS を読み込んで、 同期型のスクリプトを document.write する傾向があります。 たとえば 5 つの広告があって、それぞれ同期読み込みを 3 回ずつ行い、 接続のレイテンシが 1 秒であるとすると、 JS を読み込むだけで 15 秒もかかります。

AMP ページではサンドボックス化された iframe 内でのみ、サードパーティの JavaScript を使用できます。 このように使用を iframe 内に制限することで、メインページの実行をブロックしないようにしています。 仮に複数のスタイルを再計算する必要が出てきても、 iframe は非常に小さいので含まれる DOM もごくわずかで済みます。

スタイルの再計算やレイアウトに要する時間は DOM サイズに依存します。よってページのスタイルやレイアウトを再計算することに比べれば、iframe の再計算は非常に短時間で終わります。

CSS はすべてインライン スタイルにしてサイズを固定する

CSS はページの読み込みや、あらゆるレンダリング処理をブロックし、肥大化する傾向があります。 そのため、AMP HTML ページはインライン スタイルで記述する必要があります。 これにより、一般的なウェブページに比べると 1 つ、たいていの場合は複数の HTTP リクエストがクリティカル レンダリング パスから削除できます。

また、インライン スタイルシートの最大サイズは 50 キロバイトです。 これだけあれば非常に凝ったページでも十分ですが、ページを制作する際は常にきれいな CSS を書くよう努めてください。

フォントのトリガーを効率化する

ウェブフォントは非常にサイズが大きいので、 ウェブフォントの最適化はパフォーマンスに大きな影響を与えます。

同期スクリプトと外部スタイルシートがそれぞれ数個ある典型的なページの場合、それらがすべて処理されるまで、ブラウザは非常に重たいフォントのダウンロードを開始できません。

AMP システムではフォントのダウンロードが始まるまで HTTP リクエストを行わないと宣言しています。 それを実現できているのは、AMP の JS にはすべて非同期属性があり、インライン スタイルシートの使用のみ許可しているからです。その結果、ブラウザのフォント ダウンロードをブロックするような HTTP リクエストは発生しません。

できるだけスタイルを再計算しない

何かを計測すれば、必ずスタイルは再計算されます。するとブラウザはページ全体をレイアウトしなければならないので、多くのリソースが消費されます。

AMP ページでは、描画処理を始める前に DOM をすべて読み込みます。 これにより、1 フレームあたりのスタイル再計算は最大でも 1 回になります。

スタイルとレイアウトを再計算する際の影響については、 レンダリング パフォーマンスをご覧ください。

GPU アクセラレーションが有効なアニメーションのみ実行する

手早く最適化する唯一の方法は、GPU 上で実行することです。 GPU はレイヤーやレイヤー上での実行方法を把握しているので、 レイヤーを移動したり、非表示にしたりできます。ただしページ レイアウトの更新はできません。 そのため GPU は更新処理をブラウザに任せますが、これは好ましいことではありません。

アニメーション関連の CSS 規則によると、アニメーションには必ず GPU アクセラレーションが使用されます。 具体的には、AMP は transform と opacity でのみアニメーションと遷移が可能なので、 ページレイアウトは必要ありません。 詳細については、 transform と opacity を使用してアニメーションを変更するをご覧ください。

リソースの読み込みに優先順位をつける

AMP はあらゆるリソースのダウンロードを制御し、読み込むリソースの優先順位付けを行っています。 具体的には、必要なものだけを読み込み、遅延読み込みされるリソースはプリフェッチします。

AMP はリソースのダウンロード時に、 その時点で最も重要なリソースが最初にダウンロードされるよう処理を最適化します。 イメージや広告がダウンロードされるのは、ユーザーの目に入る可能性が高い場合や、 スクロールせずに見える範囲や、ユーザーがすぐに表示位置までスクロールすると考えられる場合のみです。

AMP は遅延読み込みされるリソースのプリフェッチもします。 リソースの読み込みはできるだけ後回しにしつつ、できるだけ早くプリフェッチを行うようにしています。 そうすることで読み込み時間が大幅に短縮され、 実際にリソースがユーザーに表示されるときだけ CPU が使用されます。

ページを瞬時に読み込む

AMP では、新しい preconnect API を大いに活用して HTTP リクエストを最大限に高速化しています。 その結果、 ユーザーがページの開く前に、そのページをレンダリングできます。 ユーザーが実際にページを選択した時点でページがすでに利用可能になっている場合もあるため、 瞬時にページを読み込むことができます。

プリレンダリングはすべてのウェブコンテンツに適用できますが、 帯域幅と CPU を多く消費します。AMP は、これらの消費を抑えるよう最適化されています。プリレンダリングによってダウンロードされるのは、スクロールせずに見える範囲にあるリソースのみです。 CPU を多く使うものは事前にレンダリングされません。

AMP ドキュメントを瞬時に読み込めるようにプリレンダリングする場合でも、 スクロールせずに見える範囲のリソースのみが実際にダウンロードされます。 AMP ドキュメントを瞬時に読み込めるようにプリレンダリングする場合でも、 CPU をたくさん使う可能性があるリソース(サードパーティの iframe など)はダウンロードされません。

詳細については、 AMP HTML がプリロード スキャナーをフル活用しない理由をご覧ください。

AMP の高速化に貢献する

AMP はオープンソースのプロジェクトです。 AMP をさらに高速にするため、皆さまのご協力をお願い致します。 詳細は、AMP プロジェクトに貢献する方法をご覧ください。

See what AMP can do for you