Chrome DevToolsでパフォーマンス計測 第1回 タイムラインを記録する
昨今、パフォーマンスはページロード時の読み込みの速さだけではなく、ユーザー操作時における速度も重要です。そんな計測に役立つChrome DevToolsのタイムライン機能について詳しく解説します。
はじめに
Chrome DevToolsについて、CodeGridでは過去にJavaScriptのデバッグ、メモリリークの対策、デバイスモードなどを取り上げました。
今回はフロントエンドのパフォーマンス計測に特に役立つ、タイムラインを取り上げます。
なお、以降の内容はChrome 55で確認しています。
読み込みだけではなくなった、フロントエンドのパフォーマンス
ひと昔前の「Webパフォーマンス」というと、ページの読み込みに関わる課題の解決がほとんどだったように思います。たとえば、CSSやJavaScriptを結合し、HTTPリクエストを減らす。画像などを別のドメインに配置する。これらを行うと、リソースをサーバーからすばやく届けられます。
こうしたテクニックは、静的なWebサイトであれば、今でも有効かもしれません。しかしJavaScriptを使用する動的なWebサイトやWebアプリケーションの場合、リソースの読み込み時間が短いだけでは「速い」とはいえません。というのも、動的なコンテンツではページの読み込み後にも、そのサイトやアプリケーションを操作する時間が長いからです。
ですので、読み込み後に行われるユーザーの操作についてもパフォーマンスを高めなければ、ユーザーは「速い」と感じません。今日のWebパフォーマンスは、読み込み以外の速さも見ないといけないのです。
こうした読み込み後も含めたパフォーマンス計測・改善にとても役立つのが、ブラウザの開発者ツールが備えるタイムライン機能です。
タイムラインとは
開発者ツールのタイムラインは、ある期間にブラウザが行った作業を記録し、それを視覚化したものです。「ある期間」とふんわりした表現を使ったのは、それは私たちが指定するものだからです。たとえば、「ページを表示してから読み込みが終わるまで」でもいいですし、「ハンバーガーボタンを押してから、サイドメニューがスライドした直後まで」というのもできます。ですので、ページの読み込みだけではないパフォーマンスも確かめられます。
Chrome DevToolsのタイムラインは、ほかのブラウザのものよりも詳細なブラウザの内面まで覗けるので、挙動の確認やバグの発見をしやすくなっています。
では、タイムラインの記録方法と、その見方を覚えていきましょう。
タイムラインを録る
今回はCodeGridの記事の表示を例に、タイムラインパネルを使うことにします。というのも、CodeGridはページが読み込まれる際にヘッダが一瞬黒くなることがあるのです。次の画像では、記事タイトルまわりの画像が読み込まれる前に、一瞬黒い背景色が表示されたあと、紫色の画像が読み込まれるのがわかります。
ちょっと気になります。これがどのようにして起こっているのかを、タイムラインを使って確かめてみましょう。今回は次の記事ページを使いました*。
*注：CodeGridの記事
記事は2016年11月下旬現在の状態で検証しています。今後、CodeGrid自体のアップデートで必ずしも記事内容と一致しない場合があります。
まず、Chrome DevToolsを開き「Timeline」と書かれたタブに移動します。これがタイムラインパネルです。
タイムラインパネル外観。この時点ではだいぶすっきり。
DevToolsのタブ直下にあるのが、タイムラインのコントロールです。タイムラインを記録する際の設定はここで行います。
コントロールに並んでいるチェックボックスの中から「Network」「Screenshots」にチェックを入れ、ほかは外します。
「Network」と「Screenshot」のみにチェックを入れる。
これで準備ができました。ではページをリロード（command＋R）しましょう。リロードを始めると、タイムライン記録中のダイアログが出ます。読み込み完了後しばらくするとタイムラインの記録が終わるので、ちょっと待ちましょう。
タイムラインの記録中。なるべく記録したいこと以外の操作はしないように。
タイムラインが表示されると、無味乾燥だったタイムラインパネルがカラフルになりました。
タイムライン取得後。いろいろ見えてウッとなりがちだけどこらえよう。
さて、これをどう見ていけばよいのでしょうか。
タイムラインを見る
タイムラインに記録されたデータは、オーバービュー、ネットワーク、フレームチャート、詳細などといった複数のペーンに分かれて表示されます。
ペーンの数や種類はタイムラインのコントロールでチェックした内容によって多少変化する。
では、最上部にあるオーバービューから見ていきましょう。
オーバービューでおおよその動きをつかむ
オーバービューはその名のとおり、記録したタイムラインの概要を知るためのペーンです。ここで気になるところをざっと探し、その下にあるペーンで詳細を探ります。
ペーンの中は、FPS、CPU、NET、スクリーンショットとさらに4つに分かれています。
オーバービュー。右端に「FPS」「CPU」「NET」というラベルが見える。
それぞれのラベルで表されるのは、次のような事項です。
| ラベル | 意味 |
|---|---|
| FPS | フレームレートをグラフ化したもの。アニメーションやスクロールがスムーズかといったことを確かめる際に便利 |
| CPU | CPUがどんな作業に費やされているかを表した面グラフ。色がはっきりわかるところに、パフォーマンスの課題がある |
| NET | リソースのネットワーク状況を種類ごとにまとめたもの |
| スクリーンショット | ページの表示域のスクリーンショットを並べたもの |
カーソルをオーバービュー上に置くと、置いた時点のスクリーンショットがポップアップで表示されます。カーソルを動かして、レンダリングの推移を確認できます。
オーバービュー上でドラッグするとその範囲がハイライトされ、オーバービューの下にあるペーンの情報がその範囲で起こった情報に更新されます。
タイムラインの使い方は、まずオーバービューで気になるところをハイライトし、その下のペーンで詳細をチェックするという流れで進むことが多いでしょう。
さて、サムネイルでも黒い背景が一瞬見えているのがわかります。カーソルを動かして、黒背景から背景画像が現れるところを探し、その箇所をハイライトしましょう。下のネットワークペーンが更新され、ハイライトされた期間に読み込みが行われていたリソースだけが表示されます。
この状態で、オーバービューの下にある、ネットワークペーンに移ります。
ネットワークペーンで読み込まれたリソースを確認
黒背景ではなくなった箇所で何が起こったのか、ネットワークペーンを確認します。
どうやら、ここでmain-blur.jpgという画像が読み込まれたようです。
つまり、ヘッダの背景として使われている画像（main-blur.jpg）の読み込みに時間がかかり、その間にCSSが適用され、ヘッダの背景色として指定されていた黒色が少しの間、現れてしまったものと推測できます。
CSSはどのタイミングで読み込まれたのでしょうか。オーバービューで、ページが読み込まれ始めてから背景画像が読み込まれるまでをハイライトします。
紫色の帯が、CodeGridのCSSファイルの読み込み状況です。CSSファイルの読み込みが終わったあとに、main-blur.jpgの読み込みが始まっています。
やはり、画像が読み込まれる前にCSSが読み込まれていました。どうやら推測のどおりのようです。
【ワンポイント】色分けされたリソースの意味は？
ネットワークペーンでリソースが色分けされていますが、これはファイルの種別によって色が決まっています。
- 青色 — HTMLファイル
- 黄色 — JavaScriptファイル
- 紫色 — CSSファイル
- 緑色 — 画像、フォントなど
同様の色分けはオーバービューやフレームチャートでも使われます。色分けされている理由はブラウザのレンダリングのステップに関係するからなのですが、そちらは次回以降に取り上げます。
予想どおり…だけど…？
今回はネットワークペーンまでを見て、背景がチラッと変わってしまう原因をつかめましたが、もう少ししっかりと原因を知るためには、その下のフレームチャートも見ないといけません。次回はフレームチャートとその詳細を見ながら、ブラウザのレンダリングの流れを説明したいと思います。