ヨコハマとともに生きるクリエイティブ研究サイト
最近、ECサイトを中心にWebページの表示スピードという指標が重要視されてきていますが、まだまだ重いサイトが多く存在しています。2015年10月7日にGoogleはモバイルサイトを高速で表示させることを目的としたAMP（Accelerated Mobile Pages）というプロジェクトを発表しました。
画像やJavascriptなどWebサイトの表示が遅くなる原因は様々ありますが、PCサイトベースで広告タグをはじめありとあらゆる要素を詰め込むことを前提にモバイルサイトも設計されていることが大きな要因です。そんな現実を根本的に打破するべく提唱されたのが、このAMPプロジェクトです。
AMPプロジェクト公式サイト
https://www.ampproject.org/
AMPプロジェクトの主なターゲットは、ニュースなど日々大量のコンテンツを発信するメディアサイトが中心となっています。
SNSで普及したストリーム型のタイムライン上では、サクサクと情報を見ることができますが、いざ中のコンテンツを見ようとリンクを開いてみるとなかなか表示されなかったり、画像や広告が読み込まれるたびにページの位置が変わってしまったりという経験はよくあると思います。
高速化を目的に開発されたAMP HTMLというフレームワークでつくられたコンテンツはタイムライン上でページ遷移なしに表示させることができます。
検索デモ：g.co/ampdemo
AMPプロジェクト自体は、日本の新聞社も含む30社ほどの出版会社とTwitterやLinkedInといったプラットフォーム群でスタートしています。ここで配信されるコンテンツは「AMP HTML」と呼ばれる新しいフォーマットで作成される必要があります。
「AMP HTML」は独自のHTMLタグを用いたフレームワークで、より洗練された文書構造と一切の無駄を排除することで軽量化を図っています。AMP HTMLの特徴的な部分としては、Javascriptがサイトのパフォーマンスを阻害する一因として、AMPのコアライブラリ以外のJavascriptファイルを排除している点にあります。
リッチなコンテンツを実現するにはCustom ElementsやWeb Componentsの利用を推奨しています。
Facebookは一足先にタイムラインからのニュース記事を高速に表示するためのInstant Articles（https://instantarticles.fb.com/）を発表していましたが、GoogleのAMPも取組みとしては同じ方向性を向いているようです。
大きな違いは今のところInstant Articlesが限られたメディアとFacebookアプリ上での取組みであるのに対して、AMPは出版社の数の多さもさることながら、他プラットフォームも巻き込んで展開しているところにあります。
また、オープンソースでフレームワークを公開しているので、試験的な導入の敷居も低くなっています。
GitHub AMP Project
https://github.com/ampproject
Googleの公式サイトによると、WebPagetestのSpeed Indexで15〜85％の向上が見られたとあります。
そこで私たちも公開されているデモサイトから実際のスピードをいくつか計測してみました。日本の新聞社の記事を東京の3G回線で計測した結果を見ると、何らかの要素が画面に表示され始めるのが通常のスマホサイトでは4~5秒に対し、AMPでは3秒前後で表示されていました。
全ての要素が表示されるのにはAMPでは9〜10秒程度で終わっている一方、スマホサイトでは32〜42秒もかかっていました。Speed Indexは6〜60%と広がりが大きいですが、スマホサイトの容量が3000KB以上、250以上のリクエストがあるのに対して、AMPでは440〜630KB、40以下のリクエストというかなりの軽量化が実現されているのが分かります。
上段：AMP 下段：スマホサイト
上段：AMP 下段：スマホサイト
Webサイトのパフォーマンスを向上させるポイントとして、ファイルの読み込みにかかるローディングコストと描画処理などにかかるレンダリングコストがあります。
一般的にローディングコストを下げるためには、リクエスト数を少なくする／容量を下げる／通信速度の改善などが主な対策となります。AMPでは恣意的な部分もありますが参照するファイル数を根本的に減らしているのに加えて、デモのページはGoogleの用意したCDNから配信することでローディングコストを下げています。
一方、レンダリングコストを下げるために、AMPフレームワークを用いて無駄を排した文書構造とした上で、表示を妨げるJSファイルを排除しています。
画像ギャラリーのあるページ
青軸：AMP 赤軸：スマホサイト
・スピードの改善
・検索結果やタイムラインからの流入増
・AMPフレームワーク専用ページの作成が必要
・ADタグや解析タグなどサードパーティJSが使用できない
・アクセス解析への影響
ユーザーがスマホでのレンダリング開始に耐えられる待ち時間は４秒以下と言われている中で、Webサイトの表示スピードの向上によって、タイムラインなどからページを開いた際の離脱を防ぐことは大きなメリットがあります。
一方、AMPで対応する場合には新たに専用ページを作成したり、サイトを改修したりする必要があるので、既存のサイトにすぐに導入することは難しそうです。
また独自タグでのリッチコンテンツの実装はできるものの、動画はYoutubeしか埋め込めないなど制限もあります。アクセス解析はJSタイプではなく、iframeや画像ビーコンでの対応となるため、こちらも利用できるものは限られてくるかもしれません。AMPと通常ページとで、同一記事が異なったURLで存在することになるので解析への影響も気になるところではあります。
それでもソーシャルや検索からの一次タッチポイントのロスを防ぐ手段としては有効かもしれません。
既に大手のメディアやプラットフォームを含めた試験運用が始まっていますが、今後このような手法が広く一般的になった場合を考えると、ニュースサイトのみならず、オウンドメディアや一般的なサイトにとってもスピードがWebサイトの指標として重要になってきます。
特にソーシャルでの拡散を目的としたキャンペーンサイトなどもリッチな表現を追求するだけでなく、パフォーマンスという面でのユーザーエクスペリエンスが求められるようになることが考えられます。
AMPを導入するしないに関わらず、今後のWebサイト、特にモバイルサイトではパフォーマンスを抜きには語ることができなくなることは確実になってきました。
Mobify（モビファイ）とは
Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。
