こんにちは！Webブラウザという「魔法の箱」の奥底を覗きに来てくれてありがとうございます。
普段私たちが何気なくWebサイトを見ているとき、ブラウザの中では目にも止まらぬ速さで複雑な計算が行われています。今日は、その中でも特に「Webサイトが重い！」「カクカクする！」というイライラを解決するための、プロが現場で愛用している「見張り番」の技術、Long Tasks APIについてお話ししますね。
—
Webブラウザは「一人で頑張る職人さん」
まず、ブラウザの「メインスレッド」をイメージしてみてください。ここは、HTMLを読み込んでページを作り、CSSを当ててデザインし、JavaScriptを実行するという、全部一人でこなす超絶技巧の職人さんが住んでいる場所です。
この職人さんはとても優秀なのですが、一つだけ弱点があります。それは、「一度に一つのことしかできない」ということ。
例えば、ユーザーがボタンを押そうとした瞬間に、職人さんが「重たい計算（JavaScriptの実行）」で手一杯だったらどうなるでしょう？
ボタンを押しても反応しない、スクロールが止まる。これが「入力遅延」の正体です。
—
50msの壁：職人さんの「集中タイム」
Webの世界には、「50ミリ秒（0.05秒）」という重要な境界線があります。
職人さんが一つの作業に50ミリ秒以上かかってしまうと、ユーザーは「あれ？反応しないな」と違和感を持ち始めます。これを私たちは「Long Task（長いタスク）」と呼んでいます。
Long Tasks APIは、この職人さんが「今、50ミリ秒以上も一つの作業に没頭して、周りが見えていないぞ！」という瞬間を、ピンポイントで見つけ出してくれる探偵のような仕組みなんです。
—
さあ、探偵を雇ってみよう（実装編）
難しそうに聞こえるかもしれませんが、実はたった数行のコードで「何が職人さんを邪魔しているのか」を監視できます。以下のコードをブラウザのコンソールに貼り付けて、少し遊んでみてください。
// 監視役の「Observer（観測者）」を作成します
const observer = new PerformanceObserver((list) => {
// 検出された「長いタスク」を一つずつ見ていきます
list.getEntries().forEach((entry) => {
console.log(“【発見！】職人さんが50ms以上占有されたタスクです”);
console.log(“開始時間:”, entry.startTime);
console.log(“かかった時間:”, entry.duration);
// どのあたりで詰まったのかが分かれば、改善のヒントになりますよね
});
});
// どんな種類のパフォーマンスを監視するか指定します
// “longtask” を指定するのがポイントです！
observer.observe({ entryTypes: [“longtask”] });
// — テスト用の重たい処理 —
// ボタンを押したときにわざと職人さんを300msほど拘束してみます
function 意地悪な関数() {
const start = Date.now();
while (Date.now() – start < 300) {
// ここでわざと時間を稼いでいます
}
console.log("重たい処理が終わりました");
}
このコードを動かした後に、`意地悪な関数()` を実行してみてください。ブラウザのコンソールに、職人さんがどこで詰まったのかが鮮明に表示されるはずです。
---
「大丈夫、焦らなくていい」
これを知ると、自分の書いたコードや、読み込んでいる広告ライブラリ、解析ツールが「実は裏で職人さんをいじめていたんだ！」と気づくことがあります。
でも、安心してください。全部を完璧にゼロにする必要はありません。
1. 優先順位をつける: ユーザーが操作するボタンの処理を最優先にする。
2. 分割する: 重たい処理は `setTimeout` を使って、職人さんに「一度休憩していいよ」と声をかけてあげる（タスクを細切れにする）。
3. 不要なものを減らす: 使っていないライブラリを削るだけで、職人さんの荷物がぐっと軽くなります。
Webのパフォーマンス改善は、まるで「職人さんの作業環境を整えてあげる」ような、とても人間味のあるお仕事です。最初は難しいかもしれませんが、こうして一つずつ「何が原因か」を見えるようにしていけば、必ず最高のユーザー体験を作れるようになります。
今日からあなたも、ブラウザという職人さんの「頼もしい助手」です。焦らず、少しずつ改善を楽しんでいきましょうね！
コメント