【Chrome DevTools】Performance Insightsでフロントエンドパフォーマンス改善
はじめに
「サイト表示が 0.1 秒遅くなると、売り上げが 1%減少し、1 秒高速化すると 10%の売上が向上する。」こんな鉄板フレーズがある通り、サイトの表示速度はユーザー体験や売り上げに直結するもので、早ければ早いだけ嬉しいです。
パフォーマンスの問題は小さな問題が絡み合って大きな問題になっていたりして、特定が難しいですが、Performance Insightsを使うと、問題になりそうな部分を簡単に分析することができます。
今回はこの機能を使ってページ読み込みパフォーマンスの問題を計測、改善する方法について書いていきたいと思います。
Performance Insights とは
ページ読み込みの分析に特化しているパフォーマンスパネルです。
分析したいページのFCPタイミングやLCPのタイミング、CLSがどこで起きたかなど、Lighthouseの指標に近い目線でページの読み込みを細かく分析することができます。
Performance Insights パネルの見方
まずは Chrome Devtools を開きます。
開くと右上に Performance Insights というタブがあると思うので、それをクリックして開きます。
*日本語の場合は「パフォーマンス分析情報」となっています
もしここに表示されていない場合は Command + Shft + P でコマンドパネルを開いて、「Performance Insights」もしくは「パフォーマンス分析情報」と入力するとパネルを見つけることができると思います。
無事に開くと、こんなパネルが表示されるので、左上の赤丸ボタンか、中央の「Measure page load」と書かれたボタンを押すとページの読み込みを分析できます。
中央のボタンの横にあるドロップダウンで、ネットワークスロットリングの設定や、CPU スロットリングの設定をすることができます。
ページ読み込みを分析したいので、キャッシュの無効化とネットワークスロットリングを指標に合わせて設定するようにしてください。
測ってみてみる
Measure page load ボタンを押すと計測が始まります。
計測は自分が分析したいところまで読み込めればいいので、ページの読み込みが終わったタイミングで左上の赤色の四角ボタンを押して、計測を止めます。
計測を止めるとレポートが表示されるので、それぞれの見方を説明したいと思います。
それぞれの機能と操作
タイムラインの操作
Performance Insights は、ページが読み込まれていく流れをタイムラインで確認することができます。
画面下部の UI でこのタイムラインを操作することができます。
タイムラインのどこを表示するかは、横方向の時間が表示されているバーで表示している時間を操作できて、右側のバーでタイムラインの拡大率を操作できます。
タイムラインで選択している時間の UI の状態が左下に表示されているので、ページの状態を見ながら起こったイベントを確認すると使いやすいです。
Core Web Vitals を確認する
パネルのトップに表示されている、FCP, LCP, DCLなどのバッジが表示されているところが、それぞれの発生タイミングです。
Layout Shft と書いてあるグラフが、レイアウトの変動を示すグラフです。このグラフが赤くなっていると、CLS のスコアが悪いのでグラフが赤く変動している部分を確認して修正してあげると CLS をブンブン直せると思います！
*FCP などのバッジが表示されているところをクリックしてもタイムラインを操作できます。
正直こっちの方が下部のバーより使いやすいので活用してみてください。
ネットワークを分析する
次にネットワークを分析していきます。
リソースの読み込みタイミングで、何がボトルネックになって表示が遅くなっているかを分析できるので、これがとっておきの神機能です。
初期状態だと、ドメインごとにまとめて通信タイミングが表示されているので、「Network」の左にある「▶︎」を押して、展開表示します。
展開すると、リクエストごとのログが見れるので、FCP, LCP などのバッチの位置と見比べて、どのリソースが読み込まれているのを分析することができます。
ここで不要なリソースが先に読み込まれていたりした場合はすぐに遅延読み込みを試しましょう！
各ネットワークログはよく見ると以下の 4 つに分類されています。
- 左端の線: http 通信を始める前にかかる時間
- 左側の薄い部分: サーバにリクエストを送って、最初のデータを受信した時間
- 右側の濃い部分: すべてのコンテンツをダウンロードするまでの時間
- 右端の線: メインスレッドが処理するまでの時間
ネットワークログが無駄に長い場合はどこに時間が掛かっているのかを分析して、インフラを改善するなり、キャッシュを活用するなり改善できると良いです。
メインスレッドなど
ネットワークタブのさらに下にあるタイムラインで、レンダリングやメインスレッドなどで実行されたタスクについてみることができます。
メインスレッドを長時間ブロックしている処理がある場合などはここをみると確認できます。
何やら 100ms 近くメインスレッドをブロックしているタスクがあるのでクリックしてみると、右側に Details ペインが表示されました！
バンドル済みのコードなので分かりにくですが、長時間実行された関数などをトレースすることができるので、何が原因で長時間実行されてしまったのか調べることができます。
この Details ペインは、ネットワークや FCP, LCP などをクリックしても表示されるので、それぞれのイベントごとに詳細情報を見たい時に使うことができます。
Details という名前の通り、キャッシュから取得されたかどうかなど欲しい情報を一通り見れるようになっています！
それぞれのタイミングを繋げて見る
ネットワークとメインスレッドを跨いで見てみると、index.html の読み込み後に、Parse HTML が発生して、その後にメインスレッド内でレイアウトの計算やプリレンダリングが行われて、やっと FCP となっていることがわかります。
Parse HTML が終わってすぐにレンダリングされて欲しいですが、何かがブロックしていて FCP が遅れています。
既存の Performance パネルだと、ここから頑張ってブロックしている何かを探さないといけないのですが、Insights ではこれを簡単に調べられる Insights ペインがあります！
Insights ペイン
Details ペインを見ていて気づいたかもしれませんが、「Details」の横に「Insights」という文字が見えると思います。
このペインは、パフォーマンスの問題を引き起こしそうな潜在的な問題を可視化してくれます。
この「Render blocking request」というインサイトを例に見てみると、まずタイトルからレンダリングをブロックしている通信があることがわかります。
このインサイトにホバーをすると、タイムラインで対象のイベントがハイライト表示されます。
このインサイトをクリックすると表示されて、通信の詳細をみることができます。
問題とその解決方法が書いてあるので、あとはこの問題を解決してあげると、無事にレンダリングをブロックしている通信を消すことができます！
パフォーマンスメトリクスをみる
Insights ペインには、インサイトだけでなく、WebVitals のパフォーマンスメトリクスも表示されています。
スコアが悪い場合はオレンジや赤などで表示されます、今回は緑なのでスコア的には問題ないですが詳細を見ます。
問題として、先ほど Insights で見つけたレンダリングをブロックしているリクエストがあることが確認できました。
最後に
このように発生しているパフォーマンスの問題について、適度な情報量で確認して修正をできるのが Performance Insights です。
以前からある Performance パネルは情報量が多すぎてみづらいので、指標を決めてパフォーマンスの改善を意識される時にはぜひ活用して欲しいです。
参考記事
Discussion