hello people

Posted

Googleが推してやまないAMPとは一体何なのか

昨年末あたりからAMPという言葉をよく耳にするようになりました。爆速でWebページを表示できて、Googleが推している事ぐらいは知っていたのですが、実際どんなものなの？という事で基本を理解するために色々調べてみました。

AMPとは

AMPとは、Googleにより推進されているAccelerated Mobile Pages （アクセラレイティッド・モバイル・ページ）という、モバイル端末でのウェブページの表示を高速化するためのプロジェクトの事です。
そのプロジェクトの一環で、「AMP HTML」というフレームワークがオープンソースとして公開されました。一般的にAMPが「AMP HTML」の事を指す事も多いようです。

AMPが生まれた背景

Googleのウェブマスター向け公式ブログの内容を引用するとAMPには以下の背景があるようです。

スマートフォンとタブレットは、人々が情報と接する方法を大きく変えました。今日、多くの人がスマートフォンを使って、たくさんのニュースや新しいコンテンツに触れています。世界中のメディアやコンテンツ提供者が、モバイル ウェブを通じて読者に記事やコンテンツを提供していますが、そのユーザー体験は、残念ながら理想的ではない場合もよくあります。ある調査では、ページの読み込みに 3 秒以上かかると、40％ のユーザーがそれ以上の閲覧をやめてしまうことがわかっています。これは、コンテンツ提供者にとっては、広告や定期購読による収益化の機会を失うことも意味します。

インターネットの安全と高速化の実現を掲げているGoogleにとって、AMPはとても意義のあるプロジェクトのようです。

まずはDEMOを見てみよう

AMPのDEMOページをGoogleが用意しているので、こちらのURLからアクセスできます。
ただし、モバイルページを表示する必要があるので、スマートフォンでアクセスするか、もしくはブラウザのWebインスペクタでモバイル表示にしてください。

“ニュース”と検索してみると、以下のように検索結果にAMPと表示されているのが分かります。

AMP_DEMO

Googleの公式ブログでも動画が見れるのですが、ものすごく高速でWebページが表示されるが分かります。
また、カルーセル形式になっていて、横にスワイプする事で次々にWebページを移動する事ができます。

なぜ高速で表示できるのか

AMPはフレームワークであり、特に新しいWeb技術を使用している訳ではありません。
既存のWeb技術（HTML、CSS、JavaScript）を駆使する事で高速表示を実現しているのですが、AMPが高速で表示できる理由として、以下の点の２点が挙げられます。

  • HTMLの記述を厳しく制限している
  • AMPで作成したHTMLはGoogleのサーバーにキャッシュされる

HTMLの記述を厳しく制限している

AMPでは、HTML、CSS、JavaScriptにおいて遅延の原因となる要素を禁止にすることで高速表示を実現しています。
具体的には以下のようなルールが存在します。

  • applet, base, embed, form, frame, frameset, object, param要素は使用禁止
  • img, audio, video要素はampが独自に強化したamp-img等のカスタムエレメント使用する
  • 外部CSSの読み込みを禁止。リクエスト数を減らすためにCSSはHTML内にインラインで記述する
  • レンダリングを止めてしまうため、任意のJavaScriptは禁止。AMP-JSと呼ばれるAMP用のライブラリのみ使用可能
  • リフロー防止のために画像や動画のサイズ（width, height）を必ず指定する
  • 広告などは読み込み優先度が低いiframeで表示

AMPで作成したHTMLはGoogleのサーバーにキャッシュされる

AMP

Google公式ブログより引用

前述のルールを守って、AMPで作成されたHTMLはクローラーからのインデックス時にGoogleのサーバーにキャッシュされます。
そして、ユーザーがモバイルから検索表示した場合、AMPのHTMLが存在すればキャッシュされているHTMLを表示します。
そのため、Webページへのアクセスが発生しません。

開発者は通常のHTMLとAMP用のHTMLそれぞれを用意する事で出し分けを行う事ができますが、AMP用のHTMLだけを用意しても問題ありません。
また、通常のHTMLとAMP用のHTMLは以下のようにlinkタグを用いてクローラーに互いの存在を知らせる事ができます。

<!-- 通常のHTML -->
<link rel="amphtml" href="http://example.jp/amp.html">

<!-- AMP用のHTML -->
<link rel="canonical" href="http://example.jp/normal.html">

AMPの現状

この記事の執筆時点（2016年3月5日）の話ですが、つい先日の2月25日にGoogleの検索表示に対応されました。

Googleトレンド

Googleトレンドで見ても公開直後から急速に検索数が伸びているため、注目度が伺えます。

しかし、前述の通り、AMPには特別なルールがあるため、すべてのサイトに適用できる訳ではありません。
現状では、ニュースの記事やブログなどテキストベースの静的なコンテンツがターゲットになるようです。
また、AMPはあくまでモバイルページのためのフレームワークなので、PCは対象外です。（同じルールを適用すれば、当然高速化はできると思いますが）

ただし、今後はあらゆるサイトを対象に検討を進めているため、AMPのプロジェクトについてGithub上でどんどん議論しましょう、との事です。

国内の事例としては、株式会社イードのモバイルメディアが既にAMPに対応されたらしいです。対応が早いですね。

まとめ

去年の10月にAMPプロジェクトが発足され、今年の2月にGoogle検索表示に対応する等、なかなか早いスピードでプロジェクトが進んでいる事からGoogleの本気度が伝わってきますね。
そのうち、AMP HTMLの作成をサポートするツールなんかも出てくると思いますし、来年頃にはAMP用のHTMLを作成する事がスタンダードになっているかもしれません。今後も注目していきたいと思います。