Android Weekly Topics

2016年2月第1週 Googleが高速ページ表示フォーマットAMPの導入ガイドを公開

この記事を読むのに必要な時間:およそ 1 分

Googleが高速ページ表示フォーマットAMPの導入ガイドを公開

GoogleがモバイルWebを高速化する「Accelerated Mobile Pages(AMP)」の「サイト運用者向けAMP導入ガイド」の日本語版を1月29日に公開しました。

近年のモバイルWebは,広告や画像,JavaScriptを多用したリッチコンテンツとなっているために,ページの読み込みに時間がかかることが問題になっています。Google Developers Japanのブログエントリによれば,モバイルユーザのWeb体験は理想的ではないことが多くあると指摘しています。たとえば,ページの読み込みに3秒以上の時間がかかると,40%のユーザがそれ以上の閲覧を止めてしまうことをがわかっており,コンテンツに提供者は収益化の機会を失っているとしています。

AMPは,2015年10月に開始されたオープンソースプロジェクトです。まだ,仕様策定段階なのか,公開された導入ガイドの日本語版もバージョン0.2です。

将来的には,動画やアニメーションなどを使ったWebページが広告と共存しつつ,タブレットやスマートフォンなどで瞬時にコンテンツが表示されることを目的としています。AMPには,New York TimesやBBCなどが参加を表明しています。日本では,朝日新聞,産経新聞,日刊スポーツ,毎日新聞,株式会社イード,マイナビニュース,BLOGOSなどのコンテンツ提供者が対応を表明しています。

モバイルWebはなぜ遅いか

モバイルネットワークでは,4G LTEが使えるようになり帯域幅は広く取られるようになりました。また,次世代の5Gでは100Mbpsになるのではないかと言われており通信速度は年々向上しています。こうした状況にもかかわらず,なぜモバイル Webが遅いと言われるのでしょうか。この理由は「応答速度」です。

モバイルネットワークは,リクエストに対する応答速度が遅いと言われています。よって,複雑なCSSや多くの画像,広告などで構成されているWebページでは,これらを取得するリクエストを出してから,ダウンロードがはじまるまでの時間が長いために,ページの読み込みが遅くなります。一昔前は,モバイルWebと言えばシンプルなものでしたが,多くのユーザーがモバイルへシフトするに従ってリッチコンテンツが増える傾向にあり,ページの読み込み速度が年々低下していると言えます。

AMPでは,モバイルネットワークの特性を反映して,ファイルサイズを小さくするよりにも表示するページのリクエスト数をひとつにする(とは,言っても完全にひとつになるワケではないので,少なくするが正しい現状です)工夫をしています。また,スムーズなページ表示になるように,ページのレンダリングがブロックされないようにJavaScirptの使い方に制約を設けたり,画像や動画などは大きさを固定する,CSSはインラインでの記述を推奨するなどの工夫がされています。

このようにリクエスト数を削減して,ページ構成要素の再配置を少なくすることで,スムーズに読み込んで表示されるWebページを実現しています。

Facebookの「Instant Articles」やAppleの「Apple News」もページの読み込み速度を向上させる仕組みですが以下の点で異なります。

  • オープンソースなので誰もが自由に使える。
  • Googleのサービスだけに導入される仕組みではない。
  • AMPは,Webページで特別なAPIを使用しない。

AMPは,専用APIではなくHTMLをベースに仕様が策定されているので,AMPに対応したページは,既存のWebブラウザでも問題なくページが表示できます。たとえば,Appleであれば,新たな体験のために専用の仕組みとこれ用にあつらえたアプリを導入する流れになりますが,AMPでは既存のWebありきで考えられており,Googleらしいアプローチがとられています。

今回取り上げたAMPは,Androidに限った話ではありませんが,Androidユーザも恩恵にあずかれる話なので取り上げてみました。

今週は,このあたりで。また来週。

著者プロフィール

傍島康雄(そばじまやすお)

5月30日生まれ。

モバイルデバイスが大好物。それで動くアプリの開発に喜びを感じている。スマートフォン前夜のWindows Mobile,PalmOSのアプリに情熱を傾けていたが,最近は停滞気味でコードを書くよりも文章を書く機会が多くなっており,文章を書くのも,プログラミングと同じくらい奥深い作業だと感じている。

ブログ:http://yasuos.com/blog/

コメント

コメントの記入