モバイルの重要性が高まる中、開発者は閲覧時に早くコンテンツを読み込めるように、通信容量の少ないサイトを開発しようとしているかもしれません。
ですが、実際のところはあまりうまくいっていないようです。ページの重さやリソース数は毎年増えています(Average Page Weight Increased Another 16% in 2015)。
ダウンロードスピードは速くなっているにも拘わらず、ファンシーなアニメーションや、スクロールする要素などでページサイズが肥大化し、結局遅いWebになってしまっています。
そこで、ブラウジングの速度を上げてダウンロードの量を減らしたいときは、Chromeのデータセーバーを活用しましょう。
データセーバーの紹介
データセーバーはモバイル時のデータ使用量を格段に減らしてくれる、Google Chromeの新機能です。
データセーバーは、ページの全体量を自動的に減らせすことを目的に、グーグルのサーバーと技術を利用して、2014年から実験的に開発されてきました。似たようなものとして、Operaがしばらくの間提供していたターボモードがあります。
データセーバーはモバイル(AndroidとiOSの両方)の設定を有効にすると使用可能になります(編注:2016年5月時点ではiOSでは利用できない)。またOperaのデスクトップブラウザーでもデータセーバー拡張機能をインストールすると有効になります。
データセーバーの仕組み
基本的に、データセーバーはデバイスではなく、グーグルのサーバーにWebコンテンツを送信します。
リクエストを送信してお気に入りのサイトを読み込むと、ブラウザーはコンテンツをダウンロードせず、データセーバーがデータセンターのグーグル最適化サーバーに接続し、最適化されたコンテンツを提供します。簡単なイラストで説明しましょう。
データセーバーの機能
データセーバーはグーグルサーバーを通ってChromeのネットワークトラフィックを渡します。サーバーは自動圧縮、縮小、イメージのやりとりをしてWebを構成して、貴重な帯域幅をできるだけ使わないようにします。
グーグルがデータセーバーを使ってすべてのデータを集めるための最適化プロセスにはいくつかのステップがあります。
HTTP/2経由のコンテンツ
最適化サーバーはできるだけHTTPではなく、HTTP/2でコンテンツをリクエストします。HTTP/2はHTTPが改良されたバージョンです。従来あちこちにあったデータを結びつけているHTTPに多くを接続するのではなく、調整されたTCPだけで接続することで、サーバーへの接続が減るため、コンテンツをすばやく読み込むのに一役買っているのです。さらにHTTP/2は将来のリソースもキャッシュできるので、必要なときにすぐに読み込めます。
画像の自動通信
画像とリッチコンテンツはダウンロードがもっとも遅くなる要素です。シングル画像でさえも、ときにはスクリプトやスタイルシートがあるとかなりの重さになることがあります。
データセーバーよってアクセスする最適化サーバーは新しいWebPフォーマットを扱います。WebPとは新しい画像フォーマットで可逆(PNGなど)や不可逆(JPGなど)のフォーマットをサポートしています。WebPは多くの容量を節約します。平均してPNGのような可逆画像は変換時に25%も縮小され、JPGのような不可逆画像だと最大34%も縮小します。
サイズが画質を反映していると思うかもしれませんが、違いはわずかです(Google Developersのサイトで比較したものが確認できます)。
画像非表示
接続が遅いときは、画像を最適化する代わりに、グーグルは画像を1枚も送信しないことがあります。ページが読み込まれると画像を有効にするか選択するプロンプトが表示されます(続いてフェッチし、圧縮し、ブラウザーに送信)。
デフォルトだと強制されることはではないので、3Gや4G回線にきちんとつながっていれば、自動的に選択されることはありません(Google次第のようです)。
縮小と圧縮
最適化プロセスの一環として、すべてのリソースは縮小されます。
グーグルのサーバーはCSS、JS、HTMLの中身をすべてを確認し、自動的に空白を削除してサイズを縮小しています。また全コンテンツがgzip圧縮(プロセスのさらなる高速化)で提供されます。
改良されたDNSリクエスト
デバイスがサイトをリクエストすると、DNSの参照が必須になっています(URLをIPアドレスに変換するため)。圧縮プロセスの一部として、グーグルのサーバーはDNSリクエストを実行し、キャッシュから必要な情報を入手したり、直接フェッチしたりします。
微々たることに思えるかもしれませんが、名前解決の負担を減らして、全体のプロセスをすばやくしています。
プライバシーと安全なトラフィック
注目すべき点は、データセーバーがアクセスするのは標準HTTPトラフィックだけだということです。HTTPS上の安全なページを読み込みたいときや匿名モードを使用しているときは、データセーバーのスイッチはオフになり、ページはデータセーバーを使わずに処理されます。
データセーバーを有効にする
データセーバーは2015年12月にモバイルデバイス用のChromeに導入されており、モバイル版のChrome(AndroidとiOSの両方)に使えるいまが絶好のチャンスです(編注:2016年5月時点ではiOS版では利用できない)。
Chromeのデスクトップ版を使っている場合、データセーバーChromeエクステンションをダウンロードすると有効になります。グーグルの公式エクステンションの使用を開始すると、データグラフがあっという間に作成され、どのくらいのデータ量を節約できたか見られます。
このグラフがあると一目でどのくらい帯域幅を節約できたかわかります。さらに、詳細ページをクリックすると、各サイトごとにデータ使用量の分析を確認できます。
実際のデータセーバー
データセーバーの使用方法が分かったので、機能が有効になっているWebサイトをいくつか比較してみましょう。
ここで知りたいのは、サイトの全サイズ、レスポンスタイム、データセーバーを使って壊れたものがあるかどうかです(自動圧縮が関連しているため)。
各サイトは数回読み込まれ、公平かつ平均的なものが選択されます(サイトのほとんどに広告があるので、各ページの読み込みはわずかに異なります)。データセーバーを使ったときと使わなかったときの平均速度とサイトの重さが知りたいポイントです(キャッシュ無効時)。
SitePoint.com
やはり自分たちのサイトから始めましょう。SitePointのWebサイトを見ると、JSファイルと小さな画像で重たく構成されています。
データセーバーが無効のとき:
サイトは133ものリクエストがあり約1.2MBの重さになります。読み込みは平均しておよそ3秒かかります。
データセーバーが有効のとき:
データセーバーを有効にしたあと、ページの重さはだいたい700~780KBに減ります。リクエストの数は特に変わりはありませんが、ページの読み込みは確実に1秒に長くなります。
ページの重さが減った理由は、主にJSとHTMLリソースを縮小したことによるものです。データセーバーがあればちょっと時間はかかりますが非常に多くの帯域幅を節約してくれるのです。
web.bird.digital
Webサイトで節約できるところがあるか比較するのはいいことです。このサイトにポートフォリオ画像が数枚と大きなスライダー、小さなサムネイルがある、とっても重たいメディアです。
データセーバー無効のとき:
約1.2MBのデータが63ものリクエストからダウンロードされます。読み込み時間はだいたい1.8~2秒の間です。
データセーバーが有効のとき:
データセーバーが有効だと、サイズは劇的に減り、650~700KBまで縮小されます。サイズの減少はWebPフォーマットへのダイナミックな画像通信によるものがほとんどです。このデータ節約の代償はダウンロード速度が平均して0.5秒余計にかかってしまうことです。
ebay.com
オークションサイトとして人気のあるeBayのホームページ(非ログイン時)は、1日の最新取引やオークションへカテゴリーされた商品のランダムコレクションを展示しています。こちらもまた重たいサイトです。
データセーバーが無効のとき:
サイトは200ものリクエストでおよそ2.4MBの重さです。完全に読み込むのに、約4.5秒かかります。
データセーバーが有効のとき:
データセーバーが有効のとき、ページの重さはちょうど1.4MBまで急激に減ります。一般的にデータセーバーを使用すると、グーグルサーバーにすべてを転送しなければならないので、ページ読み込みは遅くなります。しかしeBayはほとんど変わることがないようです(ときどき早くなることもあるほど)。
こちらは、ダウンロードサイズが半分になっても代償は何もない、とても良いケースです。
まとめ
全体的に見て、データセーバーはすばらしく便利な機能でモバイルデータ使用量を減らしてくれる可能性があると言えます。
データセーバーがどのように働くかをいくつかのサイトを例に挙げ見てきました。一般的に、全ページの重さの最大30~40%を減少させ、若干の読み込み速度の低下を引き起こしますが、気にならないくらいです。
どんなものでもそうですが、欠点もあります。データセーバーは圧縮するので、小さいサイズをダウンロードをする際には、品質とスピードが犠牲になる可能性があります。また、データセーバーを使用すると、プライバシーとデータの保護はサードパーティー(グーグル)企業に頼ることになります。
最後になりますが、データセーバーを使ってみて、自分に適しているか確かめてみてください。
(原文:Saving Bandwidth with Chrome’s Data Saver)
[翻訳:中野汐里]
[編集:Livit]