2020年6月29日にAccelerated Mobile Pages（以降AMP）について、AMPプロジェクトより公式の発表がありました。
本記事では発表内容の翻訳と一部抜粋を行っています。Wordpressや自社WebsiteでAMPをご利用されている方々や開発者の方々は参考にしてください。
タップできる目次
AMPとは？
GoogleとTwitterが共同で立ち上げたオープンソースプロジェクトです。
あらかじめGoogle等のサーバーにWebsiteでAMPに対応しているページをキャッシュすることで、モバイル端末上において快適にWebsiteが閲覧できるようになります。
AMP対応済のコンテンツは検索画面上で雷マークが表示されます。
2020のロードマップが発表
-
-
AMP as a Service: 2020 Roadmap – The AMP Blog
This blog is part of a series that we are starting to share AMP’s roadmap with the wider web communi ...
続きを見る
以下翻訳し一部抜粋しています。つたない内容もあるのでご了承ください。
原文は↑のリンクをご覧ください。
ざっくりまとめると
- Googleが発表したCore Web VitalsプログラムとAMPの方向性は一致してるよ
- Website自体を最初からAMPとして作ることをおすすめするよ
- 開発者向け：NEXT.js利用するとAMP使えるモードがあって簡単に使えるよ
- 非開発者向け：Wordpress利用者なら公式のAMP WordPressプラグイン使うといいよ
What is AMP as a Service?
AMP as a Serviceとは、開発者がパフォーマンスやインフラなどの問題に悩まされることなく、高品質なウェブ体験を簡単に作成できるようにすることに重点を置いています。
先月、Googleは、すべてのサイト所有者が測定すべきリアルユーザーのパフォーマンスとエクスペリエンスのメトリクスのセットにスポットライトを当てるために、Core Web Vitalsプログラムを発表しました。
AMPプロジェクトは、AMPページロードの大部分がすでにCore Web Vitalsで設定されたしきい値を満たしていることを共有しており、これは新たに発表されたGoogle検索ページのエクスペリエンスランキングシグナルの重要な要素です。
Choosing AMP First to increase productivity
AMPページ作成を選択する場合、開発者はペアAMP ページを提供する（HTMLページにAMPの等価物を作成する）か、標準的なエクスペリエンスをAMPで駆動させるかを選択することができます。
ペアAMP
最小限の労力でAMPページの作成を始めるには最適な方法ですが、開発チームは、Core Web Vitalsに対抗するページを作成しながら、長期的に生産性を高める方法を考える必要があります。
AMPファーストアプローチ
AMPファーストアプローチを活用した開発者は、デスクトップ、モバイル、そしてそれ以降のすべてにおいて、サイトのパフォーマンスと UX の最適化の恩恵を受けることができます。
このような理由から、開発者は、この機会にAMPファーストへの投資をお考えになることをお勧めしています。以下に、いくつかの戦略をご紹介します。
- AMPのパフォーマンスとユーザーエクスペリエンスの恩恵を受けられる体験のサブセットにAMPを使用する。
- AMPがあなたのチームをより生産的にし、ユーザーエクスペリエンスを向上させるのであれば、最初からサイト全体を完全にAMP化する。
AMP Optimizer: web development best practices at scale
時が経つにつれ、より多くのAMPページが利用され始め、開発者はウェブサイト全体の構築にAMPを使用し始め、AMPの読み込みパフォーマンスを改善する余地がありました。
これに対処するために、AMP Cacheの最適化をオリジンでの体験にもたらすツールであるAMP Optimizerを作成しました。
AMP公式サイトのAMP.devではAMP Optimizerを使用しており、AMPキャッシュからページを配信した場合と同等のパフォーマンスを実現しています。
画像の最適化やESMモジュールのサポートなど、ウェブ開発のベストプラクティスを自動化することができます。
AMP Optimizer Frameworks and CMSes
私たちの目標は、AMP OptimizerをフレームワークやCMSにシームレスに統合することで、最適化されたAMPを簡単に公開できるようにすることです。
Next.jsの統合は、優れたAMP開発体験がどのようなものであるかを示す完璧な例です。Next.jsには特別なAMPモードがあり、生成されたページは結果的に有効なAMPになります。
クールなのは、すぐにAMPコンポーネントを使い始めることができ、AMPのボイラプレートやAMPコンポーネントのインポートを気にする必要がないことです。
これらはすべてNext.jsに統合されたAMP Optimizerによって自動的に追加されます。
もう一つの例として、公式のAMP WordPressプラグインがありますが、これはデフォルトで最適化されたAMPを公開しています。つまり、公式の AMP WordPress プラグインを使用すると、AMP キャッシュのようなパフォーマンスがすぐに得られるということです。
終わりに
特に具体的なアップデートはなく、Google由来のトピックに影響する話でした。
WordPressにおいて今現在配布されている様々なテーマ内のAMPモードでは、Search Console上でエラーがでたりまだ不具合があるので、なかなか利用が難しい現状です。
今後のAMPプラグイン、各開発者がアップデートしてAMPがより使いやすいなることが期待されます。