スマートフォンのバッテリーをより急速に消費させるのはどのようなウェブサイトなのか
スマートフォンやタブレットでウェブサイトを閲覧していると、思っていたより早くバッテリーを消費していることがあります。サイトによってバッテリー消費が異なるのは確かで、実際のところ、どういった要素がバッテリー消費を早めるのか、開発者がどのようなことに気をつければバッテリーを消費しにくいウェブサイトにできるのかなどについて、ブラウザのレンダリングエンジン「Webkit」の公式ブログが情報をまとめています。
https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
モバイル端末においてバッテリーを消費する要因は「CPU」「GPU」「ネットワークハードウェア」「画面」の4つ。これら4つのうち、画面の消費電力量は閲覧するウェブサイトによらずほぼ一定ですが、その他の3つはウェブサイトが要求する処理内容によって大きく電力消費量が異なります。
処理するタスクがそれほど多くない場合、CPU・GPUの性能は意図的に落とされており、電力消費量の少ないアイドル状態となっています。高い計算能力が要求されるとシステムはすぐにチップのクロック周波数を引き上げ、タスクを素早く完了してアイドル状態に戻ろうとします。より電力消費量を抑えるには「いかに素早くアイドル状態に戻るのか」が大切になってくるとのこと。
ページを読み込む際にアイドル状態を解除してより素早くページを表示することはユーザーにとって望ましい動作であることは明らかです。ウェブページの開発者は、バッテリー消費を抑えるために「最初の読み込みを高速にする」「一度ページのロードが完了したらむやみにスクリプトを動かさない」ことが重要になってきます。
タイマー機能はCPUのアイドル状態を解除するため、できる限り使用しないことが大切です。使用する場合も、タイマートリガーを1つに統合することで改善を図ることができます。また、アニメーション画像や自動再生されるムービー、画面外に出ても動作し続けるGIFやCSSアニメーションも好ましくありません。CSSアニメーションを行う場合はanimationやtransitionなどのプロパティを利用すると、画面外での動作をやめされることができ、バッテリー消費を抑えることが可能です。
さらに、サーバーの更新をチェックするためにポーリングを行うこともバッテリーの消費を早めます。こうした場合には、WebSocketやFetchなどの永続的な接続を利用するべきとのこと。
ブラウザが他のアプリの背後に行ったり、フォーカスが外れているなど、ユーザーがブラウザに注目していない場合、Webkitはページを非アクティブ状態にし、描画の停止やアニメーションの中断、タイマー機能の調整などを行います。
こうした情報を踏まえて、ブログではどうすればバッテリーを消費しにくいウェブサイトを作れるのかについて簡単にまとめられています。まず、ページを読み込む際にはリソースの読み込みや解析、ページのレンダリングなどが行われますが、現在の多くのウェブサイトではJavaScriptの実行が一番大きな作業となっており、その他の要素を圧倒しているとのこと。JavaScriptの実行時間を最小限に抑えることが節電のポイントとなっています。
Safari Technology Previewに搭載されているWebインスペクターの「タイムライン」のタブを使うと、閲覧中のページがどういった部分でCPUを使ったのかを視覚的に捉えることができます。
CPUを効率的に利用するために、Webkitは作業をいくつかのスレッドに分割して行っています。このうち、JavaScriptは「Main Thread」で動作するため、最適化を行う際にはメインスレッドでどれほどの作業が行われているかに注目するべきだとのこと。
JavaScriptだけでなく、「transform」「opacity」「filter」などのアニメーションを多用している場合、それが原因でCPU使用率が高まっている場合があります。タイムラインのレイアウトとレンダリングを確認すればページ内でどのような描画イベントが起きているのか確認できます。ページのどこでアニメーションが発生しているのか分からない場合は、要素タブからペイントフラッシュを有効にすることで、アニメーションが発生した時にその部分を赤く光らせることが可能とのこと。
また、「canvas」の描画にはGPUが利用されます。描画処理を最低限にするために、APIの呼び出しはコンテンツが変更された時のみにするべきだとのことです。
ネットワーク接続においては、ブラウザのキャッシュを有効に活用するほか、複数の接続を同時に行うことで節電することが可能だそうです。というのも、モバイルデバイスの無線チップは要求があるたびに電源が入るようになっているとのことで、細切れに要求を送るといくつものオーバーヘッドを生み出してしまいます。定期的にほんの少しのデータを送るというような動作は、データ送信そのもの以上にオーバーヘッドで電力を消費してしまっている可能性があるとのこと。
タイムラインのネットワークの部分を確認することで、複数回に分けられた接続をまとめられないか検討することができます。例えば以下の画像では数秒にわたって4回の接続が行われていますが、これらをまとめることでモバイルデバイスの電力効率を高めることが可能だそうです。
