Apple WebKit エンジニアの Benjamin Poulain 氏と Simon Fraser 氏は、モバイル デバイスのバッテリー寿命を延ばし、ユーザーが Web コンテンツを操作できる時間を増やすために、電力効率の高い Web ページを設計する方法について Web 開発者にアドバイスを提供しました。
「ウェブ開発者は電力消費についてほとんど考えないが、本当に考えるべきだ」とフレイザー氏はツイッターで述べた。
WebKit は、Apple のモバイルおよびデスクトップ Safari ブラウザの中核を成すブラウザ レンダリング エンジンですが、そのプログラマーが提示するヒントは、どのブラウザで表示される Web ページにもほとんど当てはまります。
モバイル デバイスのディスプレイ画面、CPU、GPU、ネットワーク ハードウェアは、主に電力を大量に消費するコンポーネントであると Poulain 氏と Fraser 氏はブログ記事で説明していますが、画面の明るさなどの設定はユーザーが決定し、かなり一貫している傾向があるため、Web 開発者はコードが他の 3 つのコンポーネントとどのようにやり取りするかに重点を置くように勧めています。
開発者は、ユーザーがコンテンツをアクティブに操作しているとき、ページが操作なしでフォアグラウンドにあるとき、およびページが隠れているときのエネルギー消費を考慮するようアドバイスしています。
「最適化」
「ページの読み込み速度とタッチへの反応速度を速くしたいのです」と彼らは述べています。「多くの場合、最初の描画時間やユーザーが操作するまでの時間を短縮する最適化は、消費電力の削減にもつながります。」
そして、すべてがロードされた後は、できるだけ早くアイドル状態に戻ることが目標になるはずだと彼らは言います。
JavaScriptの使用は可能な限り最小限に抑えるべきです。「一般的に、実行されるJavaScriptが少ないほど、ページの電力効率は向上します。なぜなら、スクリプトはブラウザが既にページのレイアウトと描画のために行っている処理の上に機能するからです」と研究者たちは述べています。
CPUを起動するタイマーを最小限に抑えることで、アイドル時の電力消費をゼロに近づける必要があります。また、アニメーションは継続的に実行すべきではありません。APIは、IntersectionObserverアニメーションが表示されている場合にのみ実行することで、この点に役立ちます。非効率的なスクリプト駆動型アニメーションよりも、宣言型アニメーション（CSSアニメーションとトランジション）を優先する必要があります。ネットワークポーリングの代わりに、持続的な接続を使用するか、またはそれらを使用するべきですWebSocket。Fetch
requestAnimationFrameWebKitは、ページが非アクティブになったときにタイマーを自動的に調整し、呼び出しやCSSおよびSVGアニメーションを停止することで、消費電力を削減します。AppleのiOSおよびmacOSオペレーティングシステムは、タブプロセスPageVisibilityを一時停止することで、さらなる節約を実現できます。しかし、開発者はAPIなどのツールやイベント監視などの技術を活用し、可能な限り電力を大量に消費する処理を停止する必要があります。
Google Chromeには、独自の省電力機能がいくつかあります。例えば、最近実装された遅延読み込み画像属性（現在のブラウザビューでは表示されない画像の読み込みを回避する機能）はChrome 76で導入されましたが、他のブラウザではまだ利用できません。
Poulain 氏と Fraser 氏はまた、開発者が Safari の Web インスペクタを利用して、特定のページ デザインの CPU 使用率を最適化することを推奨しています。
シンプルに
ネットワーク電力の削減に関しては、小規模で頻繁な送信は無駄な電気オーバーヘッドを繰り返し必要とするため、可能であれば無線リソースをリクエストするのではなく、ブラウザのキャッシュを使用し、ネットワーク リクエストをグループ化することを 2 人は推奨しています。
ブラウザ自体も、効率的なブラウザコードと同様に、省電力化において重要な役割を果たします。開発者に省電力設計の追求を促すのではなく、ユーザーにChromeのような電力消費量の多いブラウザを捨て、Chromium以前のMicrosoft EdgeやBraveの最新バージョンのようなリソース消費量が少ないブラウザに切り替えるよう促すことも、別の選択肢となります。広告やトラッキングスクリプトをブロックすることによる全体的な省電力化は言うまでもありません。
エネルギー効率の高いブラウジングは、今に始まったことではありません。2012年には、スタンフォード大学の研究者たちが、Wikipediaのモバイルサイトのスクリプトを変更するだけで、読者のエネルギー消費量を30%削減できることを示す研究論文を発表しました。
AppleのWebKit技術者はプライバシーの回避がセキュリティ上の問題であると宣言した
続きを読む
彼らがテストしたウェブサイトの中で、エネルギー消費の点で最もひどかったのは、皮肉なことに apple.com でした。研究者らは、このサイトがモバイル デバイス向けに最適化されておらず、大きな CSS ファイル、多数の画像、非効率的な JavaScript を含んでいたため、特にエネルギーを大量に消費していると指摘しました。
「例えば、Appleのホームページでは、ユーザーの位置を追跡するために使用されるJavaScriptが、携帯電話に3G接続を強制的に設定させる更新を生成する」と論文は説明している。
そのため、キャッシュを使用しているにもかかわらず、これら10サイトのエネルギー消費量は、キャッシュを使用していないときとほぼ同じでした。これは、モバイルウェブサイトの設計にとって重要な教訓です。動的なJavaScriptは、ページの電力消費量を大幅に増加させる可能性があるのです。
アップルが教訓を学んでいるのは明らかだ®
