こんにちは。Webという広大な世界へようこそ。
ブラウザの裏側で何が起きているのか、気になり始めたあなたは、もう立派な「エンジニアの卵」です。今日は、Webサイトが画面に表示されるまでの「魔法のような瞬間」を、数字で捉えるPaint Timing APIという技術についてお話ししましょう。
「ページを開いてから、いつ最初の文字が出るのか？」「一番大きな画像はいつ表示されるのか？」——これを知ることは、料理を待つお客さんに「あと何分で届きますよ」と優しく声をかける店員さんになることと同じくらい、ユーザーへの思いやりなんです。
—
1. ブラウザは「凄腕の料理人」だと思ってみてください
Webページが表示されるまでの工程は、レストランのキッチンに似ています。
1. HTMLのパース（下ごしらえ）: サーバーから届いた材料（HTML）をチェックし、「お皿（DOM）の上に何を並べるか」というレシピを組み立てます。
2. CSSOMツリー構築（盛り付けの設計）: 「文字は青く、画像は右に」といった装飾の指示書（CSS）を読み込みます。
3. レンダリング（調理・盛り付け）: いよいよお皿の上に具材を配置していきます。
このとき、「最初の一口（FCP）」と「メインディッシュ（LCP）」がいつ完成したかを記録するのが、Paint Timing APIの役割です。
FCP (First Contentful Paint)
ブラウザが「お、なんか出てきたぞ！」とユーザーに初めて見せる瞬間です。真っ白な画面から、ロゴやテキストがポツンと現れたときのことですね。
LCP (Largest Contentful Paint)
「お、これがメインだな！」とユーザーが感じる、一番大きな画像やテキストの塊が表示された瞬間です。ここが遅いと、「このサイト、重いな」とユーザーは離脱してしまいます。
—
2. なぜ「数字」で測る必要があるのか？
「なんとなく遅い気がする」という主観は、開発現場では通用しません。ブラウザ自身が「今だ！」と記録した正確なタイムスタンプを知ることで、私たちは「どこで時間がかかっているのか」を客観的に判断できます。
例えば、HTMLの読み込みは早いのに、大きなヒーロー画像がなかなか表示されないなら、「画像のサイズが大きすぎるのかも？」「サーバーからの転送を優先させるべきかな？」といった具体的な改善策が見えてくるはずです。
—
3. 実践！ブラウザに「いつ表示されたか」教えてもらおう
難しい設定は必要ありません。ブラウザは標準でこの情報を記録しています。以下のコードを、お使いのブラウザのコンソール（F12キーで開けます）に貼り付けてみてください。
// パフォーマンス計測のための観察者を準備します
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
entries.forEach((entry) => {
// entry.name には ‘first-contentful-paint’ などが入ります
// entry.startTime には、ページ読み込み開始からの経過時間がミリ秒で入ります
console.log(`${entry.name} が発生しました: ${entry.startTime.toFixed(2)}ミリ秒`);
});
});
// FCPとLCPの情報を監視するように設定します
observer.observe({ type: ‘paint’, buffered: true });
observer.observe({ type: ‘largest-contentful-paint’, buffered: true });
// ※これを実行した後、ページを再読み込みすると結果がログに流れます！
このコードのポイント
- PerformanceObserver: ブラウザの「出来事」をずっと見守ってくれる監視員のような存在です。
- buffered: true: これを指定することで、このコードを読み込む前にすでに発生してしまった出来事も「さかのぼって」教えてくれます。親切ですよね。
—
4. 最後に：数字は「道具」であって「目的」ではない
初学者のうちは、「指標の数値を良くしなきゃ！」と焦ってしまうかもしれません。でも、忘れないでください。一番大切なのは、画面の向こう側にいるユーザーの体験です。
LCPの数字が1ミリ秒速くなることよりも、「ユーザーが情報を求めて訪れたときに、スムーズに読み始められること」の方がずっと価値があります。このAPIは、あくまであなたがユーザーの体験をより良くするための「スコープ（望遠鏡）」です。
まずは自分の作ったページや、大好きなWebサイトでこの数値を眺めてみてください。「なぜここで時間がかかっているんだろう？」と想像するだけで、あなたのエンジニアとしての視点は格段に深まります。
大丈夫、一つずつ理解していけば、必ず見える景色が変わってきますよ。また分からないことがあれば、いつでも聞きに来てくださいね。
コメント