モバイルでのウェブページ読み込みを高速化させるテクノロジーの「AMP（アンプ）」。Accelerated Mobile Pages（加速されたモバイルページ）という名前の通り、スマートフォンのブラウザでのウェブページの読み込み時間を短縮できます。ICS MEDIAでは以前「AMPに対応したHTMLの作成方法」で導入方法を紹介しましたが、当サイトも3ヶ月前からAMPに対応させ運用してきました。
AMPはウェブ業界・SEO業界で話題になっているものの、導入して得られるメリットを紹介しているサイトはほとんどありません。そこで、当サイトでAMPを導入して得られたメリットを紹介します。
AMPは軽量ページ仕様なので、読み込みが早い
まずはAMPの仕組みを簡単に紹介します。通常のHTMLページとは別にAMP専用ページを用意します。AMP専用ページとは基本的にはHTML5でマークアップしたHTMLページになります。AMP特有の細かいルールがありますが、このルールにしたがってコーディングすることで、次の理由でページの読み込み速度が向上します。
- AMP HTML：HTMLのマークアップで作成しますが、利用できるタグやCSSやJavaScriptが制限されているため、ページの読み込みをブロックする要因が少ないのが特徴です
- AMP JS：モバイルに最適化された専用のJavaScriptライブラリによって、読み込みが高速化されてます。具体的には画像はAMP JSによって遅延読み込み（レイジーローディング）するため、ファーストビューの表示が高速化します
- AMP Cache：ページはGoogleのCDNにキャッシュされます。このホスティングサーバーはHTTP/2などの仕組みを使って配信されるため、転送が高速です
▲上図はGoogle Developers Japanより引用。作成したAMPページはAMP Cacheにホスティングされている
AMPによってページの読み込みがどのぐらい早くなるか関心がある方は多いでしょう。当サイトの記事で測定したところ、ほとんどの記事でファーストビューまでの表示（loadイベント発生までの数値）で、2倍程度の読み込み時間短縮になりました。
| 種類 | リクエスト数 | 転送容量 | Loadまでの時間 |
|---|---|---|---|
| AMP対応ページ | 12 リクエスト | 0.71MB | 398ミリ秒 |
| 標準ページ | 47 リクエスト | 2.6MB | 747ミリ秒 |
※AMPは画像を遅延読み込みする機能が存在するため、ファーストビューでの転送容量が少なくなる傾向があります。当サイトもHTTP/2やリバースプロキシーを利用するなどWordPressを極限まで早くするようチューニングしていますが、AMPページではそれよりも高速に表示されています。
筆者はモバイルブラウザでのページ読み込み高速化によって、アクセス数が伸びる、SEO的に有利になる、エンゲージメントが向上する、といったことに期待していました。
AMP対応の効果は今のところ局所的
結論からいうと、AMP対応して得られたメリットは局所的なものでした。一部の記事がバズったときに、アクセス数の向上を確認できたというものです。まずアクセス数の数値から、AMPの状況を見ていきましょう。次のグラフはAMP対応してから現在までのアクセス数の記録です。
▲アクセス解析はAMPページのみに絞り込んで表示
上位1位のAMPページは2,000PVとなりましたが、2位以下のAMPページのアクセスは100PV前後とほとんどありません。ICS MEDIAの通常の記事のアクセス数は平均1,000PV程なので、AMPページの全体的なアクセス数が極端に低いことがわかります。
AMP対応によって得られた主なアクセス参照元は2つ。はてなブックマークとGoogleのカルーセル掲載です。次のページでこれらを詳しく紹介します。
