「白画面」という名のUXの敵を討つ：Paint Holdingが支えるWebの体感速度
やあ。今日もブラウザのレンダリングエンジンと格闘しているか？
フロントエンドの世界に足を踏み入れると、最初は「いかに早くJSを読み込ませるか」に必死になるものだ。だが、シニアの視点から言わせれば、本当に恐ろしいのはJSの実行時間よりも、「ページ遷移の瞬間に訪れる、あの無機質な白画面」なんだよ。
ユーザーがリンクをクリックしてから、次のページのCSSがパースされ、DOMが構築されるまでのほんの数ミリ秒。この「空白」をいかに埋めるか。今回は、ブラウザが裏側で密かに行っている隠れたヒーロー、「Paint Holding（ペイント・ホールディング）」について深掘りしていこう。
—
Paint Holdingとは、ブラウザの「気遣い」である
通常、ブラウザは新しいURLに遷移すると、古いページを即座に破棄して新しい描画領域を確保する。だが、ネットワークやハードウェアの制約で、新しいページのレンダリングが即座に完了しない場合がある。
その際、ブラウザは「前のページの最後のフレームをキャプチャし、新しいページが描画されるまで保持し続ける」という挙動をとる。これがPaint Holdingだ。
もしこの機能がなかったら、リンクをクリックするたびに「白画面 → ちらつき → 表示」という、ユーザーの目を疲れさせる体験が繰り返されることになる。ブラウザは、我々がCSSでどれだけ工夫してもカバーしきれない「遷移の谷間」を、この技術で必死に繋いでくれているんだ。
なぜこれが「実務」で重要なのか？
「ブラウザが勝手にやってくれるなら、意識しなくていいのでは？」と思うかもしれない。だが、それは甘い。
Paint Holdingは、ブラウザが「今はまだ新しいコンテンツは見せられないが、少なくともUIがフリーズしたようには見せたくない」と判断した時に発動する。つまり、「遷移直後の初期描画（First Contentful Paint）が遅いサイト」ほど、このPaint Holdingの恩恵に依存しているということだ。
もし君が担当しているプロダクトで、遷移のたびに不自然な「一瞬のフリーズ」を感じるなら、それはブラウザが古いフレームを保持せざるを得ないほど、メインスレッドがブロックされているか、初期レンダリングの準備に時間がかかっている証拠だ。
実践：Paint Holdingを最大限活かすための「準備」
Paint Holdingを活かすためには、ブラウザが「今のページはまだ表示する準備ができていない」と判断する隙を与えないこと、そして、もし遷移に時間がかかるなら、なるべく早く「次のページの骨格」を描画することが肝心だ。
以下のコードは、SPAのような遷移時や、複雑なページ遷移において「視覚的な安定感」を出すための基本的なアプローチだ。
/
- ページ遷移や動的コンテンツのロード時に、
- Paint Holdingと連携しやすいよう、描画の優先順位を制御するヒント
/
// 1. レンダリングをブロックしないための非同期処理
// 重い計算やデータ取得は必ずrequestIdleCallbackかsetTimeoutで遅延させ、
// ブラウザが「Paint Holding」を解除する前の「初期描画」を優先させる
window.addEventListener(‘DOMContentLoaded’, () => {
requestIdleCallback(() => {
console.log(“メインスレッドが空いたら重い処理を実行”);
// ここにサイドバーの構築や、非必須なスクリプトの実行を書く
});
});
// 2. CSSによる骨格の早期描画（Skeleton Screen）
// Paint Holdingが解除された瞬間に、白画面ではなくスケルトンを表示させることで、
// 「ページが読み込まれている」という認知をユーザーに与える
const showSkeleton = () => {
const skeleton = document.createElement(‘div’);
skeleton.className = ‘skeleton-loader’;
document.body.prepend(skeleton);
// 遷移完了後にスケルトンを消去
window.addEventListener(‘load’, () => {
skeleton.style.display = ‘none’;
});
};
// 3. コンポジットレイヤーの最適化
// CSSのwill-changeを使って、描画が複雑な要素を別レイヤーに切り出しておくことで、
// 遷移時のPaint Holdingから実際の描画への切り替えをスムーズにする
const style = document.createElement(‘style’);
style.textContent = `
.heavy-element {
/ これを指定することで、ブラウザがGPUでの描画を優先し、
Paint Holding中のちらつきを最小限に抑える /
will-change: transform;
}
`;
document.head.appendChild(style);
チーフアーキテクトからのアドバイス
Paint Holdingはあくまで「救済措置」だ。これに頼りきりになるのではなく、以下の3点を意識してくれ。
1. LCP（Largest Contentful Paint）を詰めろ: Paint Holdingが発動する時間を最短にすれば、ユーザーは「待たされている」ことすら感じない。
2. JSのバンドルサイズを絞れ: メインスレッドがJSのパースで埋まっていると、ブラウザはPaint Holdingのフレームを破棄して白画面を見せてしまう。
3. 遷移のUIを信じるな: 「リンクを押したのに反応がない」と思わせないためには、遷移した瞬間にURLを変えるだけでなく、CSSで視覚的なフィードバック（カーソルをwaitにする、遷移開始時にプログレスバーを出すなど）を即座に行うことが、結局は一番のUX改善になる。
ブラウザは君の敵ではない。レンダリングエンジンの挙動を理解し、その手助けをしてやるようなコードを書く。それこそが、伝説のフロントエンドエンジニアへの第一歩だ。
さて、次はどのブラウザの深淵を覗きに行くか？また何かあればいつでも聞きに来てくれ。
コメント