1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

レンダリングを妨げる要素をなくしてもまだ長いTotal Blocking Timeを改善する

Last updated at Posted at 2021-08-25

Page Speed Insightを実行したところTotal Blocking Timeが600msになっていることを発見しました。CSSやJavaScriptは可能な限り遅延読み込みさせています。
改善できる項目をみたところ「レンダリングを妨げる JavaScript を削除する」 という項目はありません。
この場合どうしたらTotal Blocking Timeを改善することができるのか調べてみました。
https://web.dev/lighthouse-total-blocking-time/
https://web.dev/long-tasks-devtools/#what-is-causing-my-long-tasks
これらの記事を参考にしました。

Total Blocking TimeはCPU性能が関わっている

下記の画像は古いPC(MacBook Pro 2015)と新しいPC(MacBook Pro 2019)のLighthouseの結果の比較です。(念の為3回行いスコアに大きな変動がないことを確認しました)

古いPC(MacBook Pro 2015 core i7)
MacBookPro2015の結果.png

新しいPC(MacBook Pro 2019 core i9)
MacBookPro2019の結果.png

古いPCではTotal Blocking Timeが1600msなのに対し新しいPCでは350msと大きく違いが出ています。
同じ時間・Networkで計測しましたのでこれはCPU性能によって左右される値だと考えられます。

実際developer.chrome.comのブログではJavaScriptのコードがCPUのメインスレッドを占領してUIをフリーズさせると書かれています。

というわけで次は重いJavaScriptのコードを特定していきます。

重い処理を特定する

ChromeのDevToolsのPerformanceパネルを使用します。
文字で説明しづらいですが下記の画像のうちTaskと書かれた部分(青色で囲った部分)にマウスを移動するとLong task look~~~と出てきます。
ページが表示されるまでこのTaskがいくつもあって、それらが50msを超えた場合Long taskと判定され50msを超えた分Total Blocking Timeとしてカウントされるようです。
(正直ここの解釈は自信がありませんが、Total Blocking Timeの値とこの50msを超えた分のLong taskの合算値が等しいように見えます。詳しくは原文を読んで判断してください。)
このTaskをクリックすると黄色で囲った部分のような表示が現れます。
LongTask.png

上記の黄色で囲った部分でSummaryの隣のBottom-Upのタブを開くと下記のような表示になります。
重いタスク.png
この画像に表示されているタスクではjavascriptの処理が重そうです。(計測のスクリプトですね。。。)
右端で青く囲った部分にファイル名がでるので参考にしてください。
また、画像の範囲には表示されていませんがここはjavascriptだけでなく、レイアウトツリー構築の時間も表示されます。
(詳細は割愛しますがBEM記法にすると早くなるとかimgタグにwidth/heightを入れる、余計なCSSは省くといったテクニックがあります。)

私の環境だけかもしれませんが、なんども下記画像のボタンで計測をしていると数値がめちゃくちゃ早い異常値が出たりするのでその場合は新しいタブを開いて再度計測することをおすすめします。

計測ボタン.png

また、このTaskの実行時間は前述したようにCPU性能によって大きく変わりますので下記画像のようにスロットリングをすることをおすすめします。

CPUスロットリング.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?