AMP Conf 2018. Feb 13/14. Amsterdam.
AMP Conf. Feb 13/14.

さまざまなプラットフォームで優れたユーザー エクスペリエンスを実現

動画を見る

AMP ページを構成する重要な 3 つの要素

AMP HTML

AMP HTML は、安定したパフォーマンスを実現するための制限が設定された HTML です。

AMP HTML は基本的に、カスタム AMP プロパティで拡張された HTML です。ごく単純な AMP HTML ファイルは次のようになります。

<!doctype html>
<html >
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

AMP HTML ページ内の大半のタグは通常の HTML タグですが、一部の HTML タグは AMP 固有のタグに置き換えられます(AMP 仕様の HTML タグについての説明もご覧ください)。こうしたカスタムの要素は AMP HTML 要素と呼ばれるもので、これにより一般的なパターンを効率よく簡単に導入できます。

たとえば、amp-img タグを使用すると、まだ対応していないブラウザでも srcset の全面的なサポートが可能になります。AMP HTML ページを初めて作成する方法についての説明をご覧ください。

AMP ページは、検索エンジンや他のプラットフォームで <link rel=""> HTML タグにより検出されます。サイトのページについて非 AMP バージョンと AMP バージョンの両方を作成するか、AMP バージョンのみを作成するかを選ぶことができます。詳しくは、ページを検出可能にするをご覧ください。

AMP JS

AMP JS ライブラリは、AMP HTML ページの高速なレンダリングを確実に行えるようにするものです。

AMP JS ライブラリでは、AMP の最適なパフォーマンスを実現するための方策をすべて実施し、リソースの読み込みを管理して、上記のカスタムタグを提供することにより、サイトのページの高速レンダリングを確実に行えるようにしています。

大幅な最適化に役立つ機能の 1 つとして、外部リソースの要素がすべて非同期化されるので、ページのレンダリングが妨げられることがなくなります。

パフォーマンスを改善するその他の技術には、すべての iframe のサンドボックス化、リソースが読み込まれる前にページ上のあらゆる要素のレイアウトを事前に計算する機能、遅い CSS セレクタの無効化などがあります。

最適化、ならびに制限について詳しくは AMP HTML の仕様をご覧ください。

AMP Cache

Google AMP Cache は、キャッシュされた AMP HTML ページの配信に利用できます。

Google AMP Cache は、すべての有効な AMP ドキュメントを配信する、プロキシベースのコンテンツ配信ネットワークです。AMP HTML ページをフェッチしてキャッシュし、ページのパフォーマンスを自動的に改善します。Google AMP Cache を使用すると、効率を最大限に高められるように、ドキュメント、すべての JS ファイル、あらゆる画像が、HTTP 2.0 を使用する同一の生成元から読み込まれます。

また、Google AMP Cache には、検証システムが組み込まれており、ページが適切に機能すること、外部リソースに依存しないことを確認できます。この検証システムでは、ページのマークアップが AMP HTML の仕様を満たしていることを確認する、一連のアサーションを実行します。

別の検証ツールが、各 AMP ページに付属しています。この検証ツールでは、ページのレンダリング時に検証エラーをブラウザのコンソールに直接記録できるので、コード内の複雑な変更がパフォーマンスやユーザー エクスペリエンスにどのように影響するかを確認することが可能です。

詳しくは、AMP HTML ページのテストについての説明をご覧ください。

AMP で得られるメリット