AMP の仕組み

すべての AMP JavaScript を非同期に実行

JavaScript は強力で、ページのほぼすべての要素を変更することができますが、DOM の構築をブロックしたりページのレンダリングを遅延したりする場合もあります（「JavaScript を使用してインタラクティブにする」もご覧ください）。JavaScript によってページのレンダリングが遅延しないよう、AMP は非同期の JavaScript のみを許可しています。

AMP コンポーネントは内部的に JavaScript を使用している場合がありますが、パフォーマンスが低下しないように慎重に設計されています。

独自の JS は amp-script で許可されており、サードパーティの JS は iframe で許可されていますが、それによってレンダリングがブロックされることはありません。例えばサードパーティのJSが 非常にパフォーマンスの悪い document.write API を使用していても、メインページのレンダリングがブロックされることはありません。

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

サードパーティのJSは、同期的な JS の読み込みを好んで使用します。また、document.write などの同期スクリプトも好んで使用されます。例えばページ上に5つの広告があり、その広告によって3つの同期読み込みが発生し、かつそれが1秒ずつ接続遅延を起こしている場合、JS を読み込むだけで 15秒かかることになります。

AMP ページではサードパーティの JavaScript を使用できますが、使用できるのはサンドボックス化された iframe の中だけです。使用範囲が iframe に限定されているため、メインページの実行がブロックされることはありません。このような JavaScript により複数のスタイルが再計算されたとしても、そのごく小さな iframe にはほとんど DOM が含まれていません。

スタイルの再計算とレイアウトにかかる時間は DOM のサイズに限定されるため、iframe の再計算はページのスタイルとレイアウトの再計算に比べて非常に高速に行われます。

スタイルの再計算を最小限に抑制

皆さんが何かを測定するたびにブラウザはページ全体をレイアウトする必要があるため、コストのかかるスタイルの再計算が発生します。AMP ページでは、すべての DOM が読み込まれてからすべての書き込みが発生します。これにより、フレームごとに発生するスタイルの再計算を1回までに抑制しています。

スタイルとレイアウトの再計算がレンダリングパフォーマンスに与える影響の詳細をご覧ください。

リソースの読み込みを優先

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

AMP はリソースをダウンロードする際にダウンロードを最適化し、その時点で最も重要なリソースが最初にダウンロードされるようにします。画像と広告がダウンロードされるのは、ユーザーが見ている可能性が高い場合、スクロールせずに見える範囲にある場合、またはユーザーがすばやくスクロールする可能性がある場合のみです。

AMP は遅延読み込みされるリソースもプリフェッチします。リソースはできる限り後から読み込まれますが、できる限り先にプリフェッチされます。このようにリソースは非常に高速に読み込まれますが、CPU はリソースが実際にユーザーに表示されるときにのみ使用されます。