はじめに
現在、サイトにとって最も重要なことは、スマートフォンやタブレットからアクセスされたときに適切に動作することです。この記事では、Chrome DevTools と Android デバイスを使用して、モバイル ブラウザ向けにサイトを最適化する方法について説明します。
モバイルウェブの最適化が重要な理由
パフォーマンス
2G や 3G から 4G への移行に伴い、モバイル デバイスの CPU、RAM、GPU、ネットワーク アクセスは高速化しています。進歩のペースは速いものの、モバイル デバイスはパソコンに比べて性能が劣ります。具体的には、ネットワーク リソースの読み込み、画像の展開、ページの描画、スクリプトの実行に時間がかかります。モバイル デバイスでは、ページの読み込み速度が 5 ～ 10 倍遅くなると想定するのが妥当です。
バッテリー
モバイル デバイスはバッテリーのみで動作します。モバイル デバイスのユーザーは、バッテリーをできるだけ長持ちさせたいと考えています。最適でないサイトでは、必要以上にバッテリーが消耗します。ネットワーク トラフィックを最小限に抑え、ペイントを減らして、バッテリーの消耗を軽減します。リソースを取得するときは、Wi-Fi またはセル無線通信をオンにする必要があり、バッテリーを消耗します。ブラウザが要素をペイントすると、CPU と GPU の使用量が急増し、バッテリーも消耗します。
エンゲージメント
パフォーマンスは、お客様にとって最も重要な指標を向上させるためのものです。Facebook では、スクロールを重視しています。A/B テストでは、スクロールを 60 fps から 30 fps に減速しました。エンゲージメントを閉じました。そこで、スクロールが重要であると考えました。
Facebook at Edge Conference
モバイル ユーザーは、サイトをすばやく利用できることを期待しています。最も高速なサイトが最も多くのエンゲージメントを獲得します。
パフォーマンスの管理
Chrome には、優れたデベロッパー ツールセットが付属しています。この記事では、これらのツールを使用してモバイルサイトをプロファイリングする方法について説明します。Chrome DevTools にすでに慣れている場合は、まだの場合は、次のチュートリアルをご覧ください。
ここまでの内容を理解したところで、DevTools を使用してモバイルサイトを高速化する方法を見ていきましょう。Android 向け Chrome DevTools を初めて使用する場合は、この記事の下部にあるスタートガイドをご覧ください。
Chrome DevTools をリモートで使用する
Android デバイスをパソコンにテザリングします。パソコンの Chrome で http://localhost:9222 に移動し、Android デバイスでサイトを開きます。Android デバイスで開いているタブのリストが表示されます。 [検査可能なページ] のリストからページを選択します。
そのページの Chrome DevTools が表示されます。
おなじみの Chrome DevTools ツールバーがそこにあります。リモート Chrome DevTools について理解しておくべき最も重要なことは、現在デスクトップで使用している DevTools と同じものであるということです。 唯一の違いは、Android デバイスはページのみを担当し、パソコンは DevTools を担当することです。内部的には、同じデータが収集され、同じ機能が利用可能です。
たとえば、スマートフォンで www.sfgate.com/movies にアクセスしたとします。パソコンで Chrome DevTools を使用して、要素ツールの div にカーソルを合わせると、パソコンの場合と同様に、Android デバイスでも div が視覚的にハイライト表示されます。
Elements ツールを使用して、スタイルのオンとオフを切り替えることもできます。これは、ペイント時間を調査する場合に便利です。
ネットワーク アクセスを明らかにする
ネットワーク パフォーマンスは重要ですが、モバイルウェブではさらに重要です。モバイル デバイスは、デスクトップ パソコンやノートパソコンよりも接続速度が遅いことがよくあります。正しい操作を行っていることを確認するには、ネットワーク ツールに移動して録画ボタンを押し、ネットワーク スナップショットを取得します。
このスクリーンショットは、Google 検索の結果として発生したネットワーク トラフィックを示しています。サイトが行うネットワーク リクエストを観察し、それらを最小限に抑える方法を見つけます。サイトがサーバーにポーリング リクエストを送信する場合は、ユーザー アクティビティに注意を払い、ユーザーがアイドル状態のときはポーリングを避けることをおすすめします。ネットワーク ツールを使用すると、未加工の HTTP ヘッダーを表示できます。これは、モバイル ネットワークがヘッダーを変更している場合に役立ちます。
ペイント時間の最適化
モバイル ウェブブラウザにおける最大のボトルネックの 1 つは、ページの描画です。ペイントは、指定されたスタイルでページに要素を描画するプロセスです。1 つの要素のペイントに時間がかかると、ページ全体のペイントが遅くなります。Chrome は、以前に描画された要素をオフスクリーン バッファにキャッシュしようとします。しかし、モバイルでは使用可能な GPU RAM の量が限られているため、画面外でキャッシュに保存できる要素の数が制限されます。副作用として、ペイントの回数が増え、各ペイントはパソコンよりも遅くなります。レスポンシブなスクロールを実現するには、ペイント時間を最小限に抑える必要があります。
Chrome 25 には、継続的なページ再描画モードが含まれています。継続的なページ再描画モードでは、描画された要素はキャッシュに保存されず、代わりにすべての要素がフレームごとに描画されます。すべての要素をフレームごとに強制的にペイントすることで、要素のオン / オフやスタイルのオン / オフを切り替えて、ペイント時間の A/B テストを行うことができます。このプロセスは手動ですが、ページ上の各要素のペイントにかかる負荷を追跡するうえで非常に有用なツールです。最適化の第一のルールは、最適化しようとしているものを測定してベースラインを取得することです。簡単な例を見てみましょう。
まず、継続的なページ再描画モードを有効にします。
有効にすると、Android デバイスの右上にグラフが表示されます。グラフの X 軸は時間で、フレームに分割されています。グラフの Y 軸は、描画時間（ミリ秒単位）を示しています。このデバイスでは、ページの描画に 14 ミリ秒かかっていることがわかります。最小および最大の描画時間も、使用された GPU メモリとともに表示されます。
テストとして、選択した要素のスタイルを display: none に設定します。ページの描画にどれだけのコストがかかるか見てみましょう。
ペイント時間は、1 フレームあたり約 14 ミリ秒から 4 ミリ秒に短縮されました。つまり、その 1 つの要素の描画に約 10 ミリ秒かかったということです。要素のオンとオフ、スタイルのオンとオフを切り替えるプロセスを繰り返すことで、ページの負荷の高い部分をすばやく絞り込むことができます。描画時間が短くなると、ジャンクが減り、バッテリーが長持ちし、ユーザーのエンゲージメントが高まります。さらに詳しく知りたい場合は、継続的なページ再描画モードに関するこちらの記事をご覧ください。
高度な機能
about:tracing
デスクトップ版 Chrome で利用できる高度なデベロッパー機能の多くは、Android 版 Chrome でも利用できます。たとえば、about:gpu-internals、about:appcache-internals、about:net-internals を使用できます。特に複雑な問題を調査する場合、問題の原因を絞り込むために、より多くのデータが必要になることがあります。パソコンでは、about:tracing を使用している可能性があります。about:tracing に詳しくない場合は、about:tracing プロファイリング ツールの使用方法と探索方法に関する動画をご覧ください。Android Chrome から同じデータをキャプチャすることもできます。手順は次のとおりです。
- adb_trace.py をダウンロードします。
- コマンドラインから adb_trace.py を実行する
- Android で Chrome を使用する
- コマンドラインで Enter キーを押して、adb_trace.py スクリプトをシャットダウンします。
adb_trace.py が完了すると、デスクトップ版 Chrome の about:tracing に読み込むことができる JSON ファイルが作成されます。
ガイドを開始
リモート Chrome DevTools でできることを確認したところで、リモート デバッグ セッションを開始する方法について説明します。これまでに使用したことがない場合は、開始方法の詳細な手順をご覧ください。すでに使用したことがあるものの、正確な使用方法を忘れてしまった場合のために、簡単な手順も記載しています。
1. Android SDK をインストールする
ウェブ向けの開発を行っているのに、なぜ Android SDK をインストールする必要があるのか疑問に思われるかもしれません。SDK には adb（Android Debug Bridge）が含まれています。パソコンの Chrome が Android デバイスと通信できる必要があります。 Chrome は Android デバイスと直接通信するのではなく、adb を介して通信をルーティングします。
2. デバイスで USB デバッグを有効にする
USB デバッグを有効にするオプションは、Android の設定にあります。有効にします。
3. デバイスに接続する
まだ接続していない場合は、Android デバイスを USB 経由でパソコンに接続します。USB デバッグを初めて使用する場合は、次のプロンプトが表示されます。
リモート デバッグ セッションを頻繁に行う場合は、[このパソコンからの USB デバッグを常に許可する] をオンにすることをおすすめします。
4. デバイスが正しく接続されていることを確認する
コマンド プロンプトから adb devices を実行します。 デバイスが一覧表示されます。
5. Chrome で USB デバッグを有効にする
[設定] > [詳細設定] > [DevTools] を開き、[USB ウェブ デバッグを有効にする] オプションをオンにします。
6. Android デバイスへの DevTools 接続を作成する
次のコマンドを実行します。
adb forward tcp:9222 localabstract:chrome_devtools_remote
は、adb を介してデスクトップ マシンと Android デバイスの間にブリッジを作成します。ここまでの手順で問題が発生した場合は、こちらで詳細な設定手順をご確認ください。
7. 準備が整っていることを確認する
デバイスが正しく接続されていることを確認するには、パソコンで Chrome を開き、http://localhost:9222 に移動します。404 などのエラーが発生した場合、または次のような内容が表示されない場合:
詳しい設定手順については、こちらをご覧ください。
まとめ
モバイル ユーザーは急いでいることが多く、ページから重要な情報をすばやく入手する必要があります。モバイルサイトの作成者は、ページ読み込みがすばやく行われ、モバイルで適切に動作するようにする必要があります。そうでない場合、ユーザー エンゲージメントは低下します。リモート Chrome DevTools は、機能的にはデスクトップ版と同等です。UI は十分に似ているため、新しいツールセットを習得する必要はありません。つまり、ワークフローが引き継がれます。Facebook も、あなたのサイトも、パフォーマンスの問題とは無縁ではありません。パフォーマンスの高いサイトは、ユーザー エンゲージメントが高くなります。