AMP オプティマイザの使用
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 オプティマイザを統合するための優れたオプションです。以下は、その統合の例です。
- Netlify AMP Optimizer Plugin
- Cloudflare Workers(近日公開予定)
- AMP Optimizer Docker Image(近日公開予定)
- Add yours?
-
Written by @sebastianbenz