【テクニカル・上級編】 Paint Timing API (FCP/LCP) – Webブラウザの仕組み実践ガイド

ブラウザという名の巨大なエンジンが、ネットワーク越しに届いた無機質なバイト列を、いかにして「体験」という名のピクセルに変換するか。その過程を追うことは、現代のフロントエンド・エンジニアにとって、ある種の儀式のようなものです。

今日は、ただ「速くする」という抽象論ではなく、ブラウザの内部構造、具体的には `Paint Timing API` を介して、我々がどのように「レンダリングの深淵」を観測し、制御すべきかという話をしよう。

—

FCP/LCPは「単なる数字」ではない

多くのエンジニアが、Lighthouseのスコアを上げるためにFCP（First Contentful Paint）やLCP（Largest Contentful Paint）を追いかける。しかし、重要なのはその「タイミング」そのものではない。ブラウザがいつ、どの要素を「ユーザーにとって価値のあるもの」と判断したか、その判断基準の裏側にあるレンダリング・パイプラインの競合を理解することだ。

ブラウザのレンダリングエンジン（BlinkやWebKit）は、HTMLのパース中に `