はじめに
今やるべき最も重要なことは、スマートフォンやタブレットからアクセスしたときのパフォーマンスが優れていることを確認することです。ここでは、Chrome DevTools と Android デバイスを使って、モバイル ブラウザ向けにサイトを最適化する方法を学びましょう。
モバイルウェブの最適化が重要な理由
パフォーマンス
2G と 3G から 4G に移行すると、モバイル デバイスの CPU の高速化、RAM の増強、GPU の高速化、ネットワーク アクセスの高速化が進んでいます。大きな進歩を遂げているにもかかわらず、モバイル デバイスの性能は Google のパソコンに比べて不足しています。具体的には、ネットワーク リソースの読み込み、画像の展開、ページのペイント、スクリプトの実行に時間がかかります。モバイル デバイスではページの動作が 5 ～ 10 倍遅くなると想定すると安全です。
バッテリー
モバイル デバイスはバッテリーのみで動作します。モバイル デバイスのユーザーは、バッテリーができるだけ長持ちすることを望んでいます。サイトが最適でないと、必要以上に電池の消耗が早くなります。バッテリーの消耗を抑えるため、ネットワーク トラフィックを最小限に抑え、ペイントを減らす。リソースを取得するときは、Wi-Fi またはセル無線通信をオンにする必要があります。これによりバッテリーが消耗します。ブラウザが要素をペイントすると、CPU と GPU の使用量が急増し、バッテリーも消耗します。
エンゲージメント
パフォーマンスは、お客様にとって最も重要な指標を増やすためのものです。Facebook ではスクロールが重要である。A/B テストで、スクロールの速度を 60 fps から 30 fps に下げました。エンゲージメントを閉じました。スクロールは重要です
Edge Conference での Facebook
モバイル ユーザーは、出入りの時間が短いことを期待しています。サイトの表示速度が速いほど、エンゲージメントが最大化されます。
パフォーマンスの管理
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 が視覚的にハイライト表示されます。
要素ツールを使用して、スタイルのオンとオフを切り替えることもできます。これは、ペイント時間を調べる際に便利です。
ネットワーク・アクセスに光を当てる
ネットワーク パフォーマンスは重要な意味を持つものであり、モバイルウェブではさらに重要です。モバイル デバイスの接続速度は、パソコンやノートパソコンよりも遅いことがよくあります。正しいことを行っていることを確認するには、ネットワーク ツールに移動して記録を押して、ネットワーク スナップショットを取得します。
スクリーンショットは、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.デバイスに接続する
まだ接続していない場合は、USB 経由で Android デバイスをパソコンに接続します。 USB デバッグを初めて使用する場合は、次のプロンプトが表示されます。
リモート デバッグ セッションを頻繁に行う場合は、[このパソコンからの USB デバッグを常に許可する] をオンにすることをおすすめします。
4. デバイスが正しく接続されていることを確認する
コマンド プロンプトから adb devices を実行します。 お使いのデバイスがリストに表示されます。
5. Chrome で USB デバッグを有効にする
[設定] > [詳細設定] > [DevTools] を開き、以下に示すように [USB Web デバッグを有効にする] オプションをオンにします。
6. Android デバイスへの DevTools 接続の作成
次のコマンドを実行します。
adb forward tcp:9222 localabstract:chrome_devtools_remote
は、adb を介して、デスクトップ マシンと Android デバイス間のブリッジを作成します。 この時点で問題が発生した場合は、こちらの詳細な設定手順をご覧ください。
7. 使用できることを確認する
パソコンで Chrome を開き、http://localhost:9222 に移動して、デバイスが正しく接続されていることを確認します。404 や別のエラーが表示される場合、または次のようなメッセージが表示されない場合:
詳細な設定手順については、こちらをご覧ください。
おわりに
モバイル ユーザーは急いでいることが多いため、重要な情報をページからすばやく取得する必要があります。モバイルサイトの作成担当者の責務は、ページの読み込みが速く、モバイルでも高いパフォーマンスを発揮できるようにすることです。そうしないと、ユーザー エンゲージメントが低下します。リモートの Chrome DevTools は、機能的にはデスクトップ ツールと同等です。UI はよく似ているため、新しいツールセットを覚える必要はありません。つまり、ワークフローは引き継がれます。Facebook はパフォーマンスの問題に無防備なものではありません。サイトもそうではありません。パフォーマンスの高いサイトはユーザー エンゲージメントも多くなります。