こんにちは。Webブラウザという「巨大でミステリアスな魔法の箱」の深淵へようこそ。
普段何気なく眺めているWebサイトですが、実はその裏側では、ブラウザという名の職人が、真っ白なキャンバスを前に、ものすごいスピードで「描画」という名の芸術（あるいは大工事）を繰り広げています。
今日は、その職人さんの仕事ぶりを覗き見するための魔法のツール、「Paint Timing API」についてお話しします。
—
1. ブラウザの描画は「お買い物の準備」に似ている
ブラウザが画面を表示するまでの流れを、ちょっとだけ想像してみてください。お買い物に例えるならこんな感じです。
1. リクエスト： 「あれが欲しい！」と注文する（サーバーからHTMLなどのデータが届く）。
2. 計算と整理（リフロー）： 届いた荷物を広げて、「これはどこに置こう？ この棚のサイズなら入るかな？」と配置を考える。
3. 仕上げと塗装（リペイント）： 商品に色を塗ったり、値札を貼ったりする。
4. 陳列（コンポジット）： 最後に、綺麗に並べてお客様（ユーザー）に見せる。
この中で、私たちが特に気にするのが「どれだけ早く、最初の一品が店先に並んだか？」という瞬間です。これがFirst Paint（FP）やFirst Contentful Paint（FCP）と呼ばれる指標です。
- First Paint (FP): ブラウザが「よし、何か描くぞ！」と最初にペンを走らせた瞬間。
- First Contentful Paint (FCP): テキストや画像など、ユーザーにとって「意味のある中身」が初めて表示された瞬間。
真っ白な画面が続く時間は、ユーザーにとって一番不安な時間です。ここを短縮することが、Web制作の腕の見せ所なんですよ。
—
2. Paint Timing APIで「職人の仕事時間」を計測する
「ブラウザがいつ描画を終えたか？」なんて、通常は神のみぞ知る世界ですが、このAPIを使えば、ブラウザ職人が「今、終わったよ！」と報告してくれる記録を覗くことができます。
使い方は驚くほどシンプル。以下のコードをブラウザのコンソールに貼り付けてみてください。
// パフォーマンスの情報を監視する仕掛けを作ります
const observer = new PerformanceObserver((list) => {
// 記録されたイベントを一つずつ取り出します
list.getEntries().forEach((entry) => {
// entry.name には ‘first-paint’ や ‘first-contentful-paint’ が入ります
// entry.startTime には、ページが開かれてから何ミリ秒かかったかが入ります
console.log(`【計測完了】 ${entry.name}: ${entry.startTime.toFixed(2)}ms`);
});
});
// 「ペイント（描画）」に関する情報だけを狙い撃ちで監視開始！
observer.observe({ type: ‘paint’, buffered: true });
このコードのポイント
- PerformanceObserver： ブラウザの動きをじっと見守る「監視員」です。
- buffered: true： これが重要です。「監視を始めた瞬間に、すでに終わっていた過去の記録」も拾ってくれます。これがないと、ページ読み込み直後の大事な一瞬を見逃してしまいますからね。
—
3. なぜこの指標が大切なのか？
「0.1秒の差なんて誤差じゃない？」と思うかもしれません。でも、Webの世界ではこのわずかな差が、ユーザーの「離脱率」に直結します。
例えば、レストランに入って、注文してから何も出てこない時間が1秒続くのと、3秒続くのでは、私たちのイライラ具合は全く違いますよね？ 画面が真っ白な時間が長いと、ユーザーは「このサイト、壊れてるのかな？」と不安になり、すぐにブラウザの「戻る」ボタンを押してしまうのです。
大丈夫ですよ。
まずは自分のサイトがどれくらいの時間で表示されているか、このAPIで計ってみてください。数字を知ることは、改善への第一歩です。もし数字が遅くても、焦る必要はありません。そこから「画像のサイズを小さくしようかな」「余計なスクリプトを減らそうかな」と、一つずつ職人の仕事を軽くしてあげればいいのです。
—
最後に：完璧を目指さなくていい
Webの技術は奥が深く、ブラウザの仕組みも進化し続けています。最初は専門用語だらけで難しく感じるかもしれませんが、こうやってブラウザと対話する楽しさを知れば、きっと「Web開発」という仕事が、ただの作業ではなく「ユーザー体験をデザインするクリエイティブな挑戦」に変わるはずです。
もしコードが動かなくても、真っ白な画面のままでも、それは「ブラウザとの対話の練習中」です。いつでも立ち止まって、またゆっくり進んでいきましょう。
あなたのサイトが、世界中の誰かにとって心地よい表示体験を届けられることを、心から応援していますよ！
コメント