TBTを改善
| 項目 | 状態 |
|------|------|
| 同期XHR(第3引数false) | 適用済み(jQuery _evalUrl 経由の同期XHR3件を静的script化) |
| ロングタスク(50ms以上) | 適用済み(1件→0件) |
| 未使用JavaScript | 適用済み(OverlayScrollbars削除、監査1件→0件) |
| 遅延読み込みライブラリ自体の負荷 | 適用済み(no-opのlazyload削除。TBT効果は0ms) |
| DOMContentLoadedハンドラ内の重い処理 | 効果なし(setTimeout分割は成功したがTBT寄与0。mainに取り込まず) |
| スライダーの複数初期化 | 効果なし(同上、P-TBT-2に包含) |
| jQueryの.each()による大量DOM操作 | 効果なし(同上。個別に10ms超のものは存在せず) |
| .load()による同期通信 | 該当なし(grepヒットはコメントアウト1件のみ) |
29ms(CLSフェーズ完了時)→ 0ms(P-TBT-1)→ 0ms(P-TBT-3/4でも変化なし)
トレース上で50ms超のタスクは1件(142.1ms)のみで、その89%(126.1ms)が
URLLoader::loadSynchronously だった。
原因は以下3箇所の $("head").append(scriptTag):
- initialize.js L85 → jquery.cookie.js(40.1ms)
- initialize.js L91 → system_initialize.js(42.3ms)
- process.js L658 → system_process.js(43.7ms)
jQuery 3.6.0 は script 要素の挿入を _evalUrl 経由で処理し、その実装が
ajax({async: !1}) すなわち同期XHRである。
調査上の重要な教訓: ミニファイされたjQueryでは false が !1 に圧縮されるため、
"async: false" の文字列検索ではこの欠陥を発見できない。
報告価値: これら3スクリプトは initialize.js / process.js というサイト全体の
ブートストラップから読み込まれるため、全ページで同じ停止が発生している。
playback環境のRTTは0.26msだが、実環境のモバイル(RTT 100-300ms)では
3つの直列同期XHRが300-900msのメインスレッド停止に相当しうる。
リクエスト: 162件 → 160件
転送量: 約25KB削減
unused-javascript 監査: 1件 → 0件
LCP: 488ms
CLS: 0.000
TBT: 0ms
FCP: 90ms
SI: 965ms
Overall Score: 100