注記
- 本記事は2017年5月現在の情報です。
- 「No Standalone AMP」は造語です。「Standalone AMP」に対してそれ以外の実装方式に名称がなかったため、本記事ではこの単語を使わせていただきます。
- 先日LINE株式会社で行われた、Front-end Developer’s Workshopで発表した内容の改訂版となります。
はじめに
AMPは「Accelerated Mobile Pages」の略称で、アンプと呼ばれています。AMPという単語の定義が広く実態が掴みづらいので、本記事では下記の定義で話しを進めます。
| 単語 | 定義 |
|---|---|
| Accelerated Mobile Pages Project | モバイル端末で画面を高速表示することを目的として、2015年10月にGoogleとTwitterが共同で発足したプロジェクト。 |
| AMP | Accelerated Mobile Pages Projectで高速化のために定義された仕様。 |
| AMP HTML | AMP実装時に利用するHTMLベースのフレームワーク（カスタム要素を使い機能拡張したHTML）。 |
| AMPページ | AMP HTMLで実装されているページ。 |
| 非AMPページ | 通常のHTMLで実装されているページ。 |
| AMP実装 | 「No Standalone AMP」「Standalone AMP」を含んだ、first-party対応。 |
| AMP対応サービス | Google Search、Twitter moments、はてなブックマークなどのAMPのサードパーティ対応を行っているサービス。 |
AMPとは？
Accelerated Mobile Pages Projectはスマートフォン端末でWebページを高速表示するために発足されたプロジェクトです。AMPに基づきHTMLを作成することで、AMP対応サービスで高速にWebベージを表示することができます。
対応方法はシンプルです。HTMLの変わりにAMP HTMLと呼ばれるAMPの仕様に基づいたHTMLを作成し、サーバーにアップロードすることで対応できます。
AMP HTMLは通常のWeb browser上でも動作し閲覧できます。ChromeなどのWeb browserで挙動を確認しながら作業を進められます。
上記の設定が完了すると、GoogleはAMPページをクロールしHTMLや画像ファイルのキャッシュを専用のCDNサーバーに保存します。その後、Google検索結果に反映され、Google AMP Viewerで高速でページが表示されるようになります。
No Standalone AMPとは？
AMPには2種類の実装方式があります。「No Standalone AMP」と「Standalone AMP」です。
| 単語 | 説明 |
|---|---|
| No Standalone AMP | 既存のページとは別にAMP HTML実装したページを用意して、AMPページをGoogleに認識させる手法です。2017年5月現在で主流になっている実装方法です。 |
| Standalone AMP | PC、SP（Mobile）AMPを1つのAMP HTMLで実装する手法です。2017年4月に公開された、AMP Startで実装されているものが「Standalone AMP」です。 |
私が注目しているのは「Standalone AMP」です。
簡単なランディングページは「Standalone AMP」で実装できる未来が来たらいいと思い、2016年10月ごろから検証を進めています。Googleのモバイルファーストインデックス対応が来年めどで実施される予定なので、まだ積極的にはおすすめできませんが今後に期待ですね。
AMP実装をするとどうなるのか？
AMP実装を行うことで、下記の2点の効果が得られます。
パフォーマンス改善
ページのレンダリングパフォーマンスが2～4倍程高速化されます。私の検証しているページでも約3倍のパフォーマンス改善がされました。
AMP HTMLはHTMLの初回ロード時にネックとなる、各リソースのロードとCSSのレンダリングパフォーマンスにコミットしたフレームワークです。Webページの高速表示で高い効果を発揮します。さらに、各サービスでプリロードやCDNのキャッシュ対応を施してくれるので、表示パフォーマンスが95%改善されたという報告もでています。
Googleの検索結果に優遇表示
リッチカード（carousel UI）で表示される特別枠にページ情報を追加で表示できます。この特別枠に表示されることでアクセス数の増加を見込めます。「AMP = SEO」と認識される理由の一つとなっています。
