今月7日、Googleが、オフィシャルブログにてモバイルWebを高速に表示するためのAMP(Accelerated Mobile Pages) Project を発表しました。

Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web

スマートフォンやタブレットなどのモバイル端末でのWebの閲覧は、多くの場合にページの読み込みに時間がかかってしまうため、ユーザーはウェブページを素直に見るのではなく、ニュースアプリや広告ブロックを搭載した閲覧環境でページを閲覧するようになってきました。

iOS9ではコンテンツブロックという広告ブロック機能も搭載され、その流れは加速的しているのではないでしょうか。

そこで困るのは、広告が主な収益源であるGoogleや、オンライン出版社、Webテクノロジー企業などです。ユーザー体験を損なわずに（広告とともに）ページを高速に表示させる仕組みが必要ではないかと考えたのかもしれません。

そんな中発表されたAMPは、高速に表示されるウェブページを作成するためのフレームワークです。このフレームワークを使用すると、検索結果やTwitterのリンクから瞬時にページを表示することができます。Google 検索上のデモが紹介されていますので、スマートフォンから試してみてください。

AMP demo : rugby - Google Search

カード上に並べられた記事をタップすると、ページの遷移もなく記事が表示されます。また横へとフリックすれば次の記事に瞬時に移動することができます（そしてちゃんと広告も表示されています）。

AMPは、AMP HTMLという静的なHTMLを作成するためのフレームワークです。このフレームワークの中でウェブページを作りGoogleやTwitterがキャッシュすることで、ページを高速に表示させることができます。

AMP HTMLのドキュメントは、AMPの公式サイトやGithubのリポジトリで詳しく紹介されていますが、一番大きな点はjavascriptの実行が大幅に制限されていることです。また img 要素や video 要素も制限されています。ただしそれらが実現していたことができなくなるわけではなく、代わりにAMP HTMLが提供しているAMP HTMLコンポーネンツで実現します。

AMP HTMLコンポーネンツには下記のものが用意されています。

• amp-img : 画像を表示
• amp-video : 動画を表示する
• amp-youtube : Youtubeの埋め込み動画を表示する
• amp-ad : 広告を配信する
• amp-twitter : Twitter のツイートを埋め込む
• amp-carousel : スライドショーを作成する
• etc...

他にも色々なコンポーネントが用意されています。

画像や動画などのリッチな表現はある程度コンポーネントで出来るとなると、次に考えるのはアクセス解析ではないでしょうか。

現在では多くのアクセス解析がページにjavascriptを設置することでユーザーの行動を記録しています。アクセス解析に関しては、amp-pixelが用意されています。こちらは少し古い手法ですが、画面上には表示されない微小な画像を埋め込んでユーザーの行動を記録するタイプの解析を利用することができます。

他にもCSSに関してもごく僅かですが使用できないプロパティがあったり、ページに直接埋め込む必要があるなど制限があります。

ここまででAMP HTMLの概要をお話ししましたが、こんな大変なAMP HTMLへの対応をWebサイト全体で対応して完全にAMP HTMLだけのWebサイトにしなければいけないかと思われるかもしれませんが、そうではありません。

すでに対応しているBBCなどのメディアも通常の記事ページと、AMP対応の記事の双方を公開しています。※それらはmeta情報で関連付けられます。

このことで、Googleの検索結果などからは高速に表示し、通常はリッチな記事を表示するということも可能なようです。ただし、通常の製作方法と違うページを管理しなければなりませんので運用のコストはあがるでしょう。

まだ日本語でのGoogle検索では対応してませんので、実際にすぐに効果が出るわけではありません。加えて自サイトの対応ブラウザとAMP HTMLコンポーネンツの対応ブラウザが合致していない、javascriptでの表現がAMP HTMLコンポーネンツでは表現できない、CSSの運用が大変になるなど考えなければならない点は少なくはありません。

とは言え、ページを高速に表示することはビジネスへの影響も大きく考慮すべき点です。すぐに導入することは難しいかもしれませんが、AMP HTMLフレームワークの考え方に触れて、自サイトの表示速度を見直すのも良いのではないでしょうか。

また実装例をについては、個人ブログにまとめていますので参考にしてください。

AMP(Accelerated Mobile Pages) HTMLしてみたという話