AMP オプティマイザの使用

Important: this documentation is not applicable to your currently selected format ads!

AMP オプティマイザはサイトの AMP キャッシュ最適化を行うツールです。優れたページエクスペリエンスを作り出し、Core Web Vitals コンプライアンスを達成するには、AMP オプティマイザの使用が鍵となります。AMP オプティマイザの仕組みに関する詳細は、詳しく説明された AMP 最適化がガイドを参照してください。

AMP はすでに高速ではないのですか？

「ちょっと待って、AMP はデフォルト設定を変えずに高速なのではないですか？」と思っている方もいるかもしれません。その通りかもしれません。AMP ランタイムは高速化に最適化されているため、すべての有効な AMP ページの読み込みは高速です。ただし、ブラウザが AMP ページをさらに素早く読み込むためにサーバーに実装できるパフォーマンス最適化がほかにもあります。

当初 AMP キャッシュは AMP ページの大半を送信していました。キャッシュはさらにページの最適化を行い、強力なユーザーエクスペリエンスを保証していました。しかし、時が経つにつれ、より多くのサーフェスが AMP ページにリンクするようになり、開発者はウェブサイト全体を AMP で構築し始めました。そのため、AMP チームは、独自のオリジンで AMP キャッシュのようなパフォーマンスを得る AMP ページを配信できるように、AMP オプティマイザの制作に着手し始めたのです。

AMP オプティマイザの統合

AMP オプティマイザを使用するには、3 つの方法があります。

オプティマイザのビルトイン統合を備えたサイトジェネレータまたは CMS を使用する。
ビルドシステムまたはサーバーに、AMP オプティマイザを統合する
ホスティング環境に、AMP オプティマイザを統合する

CMS とサイトジェネレータ

最適化された AMP を公開する最も優れた方法は、AMP オプティマイザをビルトインサポートしているサイトジェネレータまたは CMS を使用する方法です。この場合、AMP ページは自動的に最適化されます。現在のところ、以下のサイトジェネレータと CMS が AMP オプティマイザを統合しています。

カスタムビルドまたはサーバー統合

AMP オプティマイザは自分で統合することもできます。多数のオープンソースの AMP オプティマイザ実装が提供されています。

AMP オプティマイザ（Node.js）: 最適化された AMP を生成するための Node.js ベースのライブラリ。amp.dev で入門ガイドを参照してください。実装は、AMP チームが管理しています。
AMP Toolbox for PHP: a PHP based library for producing optimized AMP. The implementation is maintained by the AMP team.
amp-renderer（Python）: Node AMP オプティマイザの Python ポート

サーバーや静的サイトが動的にレンダリングするページには、さまざまな統合があります。

ビルド時: 静的サイトでは、ビルドの一環として AMP ページを最適するのが最良です。このアプローチは、AMP ページの最適化によって配信パフォーマンスが影響を受けないため、理想的と言えます。AMP オプティマイザ + Gulp 統合のサンプルを参照してください。
レンダリング時: ウェブサイトの性質がより動的であるか、静的に変換を適用できない場合、AMP ドキュメントがサーバーでレンダリングされた後に最適化を実施することができます。この場合、配信時間を高速化するために、2 回目以降のリクエスト用に、変換済みのページをキャッシュするのが最良です。キャッシングは CDN レベルやサイトの内部インフラストラクチャ（Memcached など）のほか、ページがメモリに収まる程度の大きさであればサーバー自体でも行われます。このアプローチの詳細については、AMP オプティマイザを Express.JS に統合する実演デモを参照してください。

ホスティングプロバイダでの統合

一部のホスティングプロバイダでは、ウェブページのデプロイや配信時にカスタムロジックを実行することができ、AMP オプティマイザを統合するための優れたオプションです。以下は、その統合の例です。

Written by @sebastianbenz