こんにちは！フロントエンド・アーキテクトの私です。
Webサイトを作っていて、「リンクをクリックして次のページに移動するほんのコンマ数秒の間、画面が真っ白になって目がチカチカする……」そんなストレスを感じたことはありませんか？
ユーザー側としては「あれ、ちゃんとクリックできたかな？」と不安になりますし、開発者としても「なんかこのサイト、動作がもっさりしててカッコ悪いな……」と頭を抱えるポイントですよね。
大丈夫ですよ、安心してください。
実は現代のWebブラウザは、私たちが何も特別なコードを書かなくても、裏側でめちゃくちゃスマートな気遣いをしてくれています。その立役者こそが、今回お話しする「ペイントホールディング（Paint Holding）」というブラウザの隠し技です。
今日は、このペイントホールディングが一体どんな魔法を使って私たちの目を守ってくれているのか、身近なたとえ話を交えながら、一緒に紐解いていきましょう！
—
1. ページ移動の瞬間に何が起きているのか？（お買い物のたとえ話）
まずは、ブラウザの中で何が起きているのかをイメージしてみましょう。
あなたが、お気に入りの雑貨屋さんでカタログを見ているとします。
「あ、このマグカップ可愛いな！」と思って、店員さんに「これの在庫ありますか？」と尋ねました。店員さんは「少々お待ちくださいね！」と、奥のバックヤード（倉庫）に走っていきます。
この時、もし店員さんが目の前からパッと姿を消して、あなたが「何もないがらんとした壁」を数秒間見つめさせられたらどうでしょう？ ちょっと不安になりますよね。「あれ、忘れられた？」って。
普通の優しいお店なら、カウンターの前に「今お探し中です。こちらのポスターでも見てお待ちくださいね」と、可愛いイラストや前のページの続きをボードに貼っておいてくれるはずです。
ブラウザの世界でも全く同じことが起きています
Webブラウザでリンクをクリックして次のページに移動（ナビゲーション）する時、ブラウザの頭の中ではこんなことが起きています。
1. 今まで見ていたページ（古いページ）を捨てる
2. 新しいページのHTMLをダウンロードして、必死に構造（DOM）を組み立てる
3. 「よし、描画の準備ができた！」となってから、新しい画面をドカンと表示する
この「2番」の作業、つまり新しいページを組み立てているほんの一瞬の間、ブラウザの画面は本来なら「真っ白」になってしまうんです。ページが切り替わるたびに「白→表示→白→表示」と点滅していたら、ユーザーの目はすぐに疲れてしまいますよね。
ここで登場するのがペイントホールディングです。
—
2. ペイントホールディングの正体と、その優しい仕組み
ペイントホールディングを一言で言うと、「新しいページの準備ができるまで、直前まで見ていた古いページの『最後のスクショ』を、一時的に画面にペタッと貼り付けておく技術」です。
先ほどのお店のたとえで言えば、店員さんがバックヤードに走っている間、あなたが直前まで見ていたカタログの写真を目の前にそっと立てかけておいてくれるようなものです。
これによって、ユーザーは「今、まさに次のページを読み込んでいる最中だ」ということが視覚的にキープされ、あの嫌な「画面のチラつき（白いフラッシュ）」から守られるというわけです。
ブラウザは裏方でこんな頑張りをしています
私たちが普段何気なく使っているGoogle Chromeなどのモダンブラウザは、次のようなステップでこの魔法を成立させています。
1. ユーザーがリンクを押す。
2. ブラウザは即座に、「今まさに表示されている画面のスクリーンショット」を内緒でパシャリと撮影して保持（Hold）する。
3. 古いページのデータを破棄し、新しいページの読み込みと組み立て（レンダリング）を始める。
4. 新しいページの準備が完了した瞬間！ ブラウザは保持していたスクリーンショットをスッと外し、ピカピカの新しいページを表示する。
ユーザーからすると、「スムーズに次のページに切り替わった！」ように感じますが、その裏ではブラウザが必死に「前の画面の残像」を見せてつないでくれていたんですね。
—
3. Webエンジニアが知っておくべき「ペイントホールディングの注意点」
さて、このペイントホールディング、ブラウザが勝手にやってくれる便利な機能なのですが、Web制作をする上では「過信しすぎちゃいけないポイント」もあります。
実は、この機能がうまく働かないケースがあるんです。例えば：
- 全く違うドメイン（別サイト）へ移動する場合
セキュリティやメモリの都合上、前のサイトの画面をいつまでも保持し続けるわけにはいきません。外部サイトへのリンクを踏んだ時は、容赦なく真っ白な画面や前のサイトの残像なしの遷移になりがちです。
- ページの構造がガラリと変わるシングルページアプリケーション（SPA）など
JavaScriptでダイナミックに画面を書き換えるようなアプリの場合、ブラウザの標準的なペイントホールディングのタイミングと噛み合わず、意図せぬチラつきが起きることがあります。
だからこそ私たちフロントエンドエンジニアは、ブラウザに頼りっきりになるのではなく、日頃から「無駄な重たい処理を初期ロードに入れない」「CSSの工夫でレイアウトのガタつき（CLS）を防ぐ」といった丁寧なコーディングを心がける必要があるんです。
—
4. チラつきを防ぐための簡単な実践（コード例）
ペイントホールディングのようなブラウザの仕組みを助けるために、私たちが実務でできるちょっとした工夫をご紹介します。
例えば、CSSを書くときに「ページの読み込み時に要素がガタッとずれないように、あらかじめ高さを確保しておく（スケルトンスクリーンなど）」というテクニックがあります。
以下は、読み込み中のチラつきを優しく抑えるための、実用的なHTML/CSSのサンプルコードです。そのままエディタに貼り付けてブラウザで開いてみてくださいね。
このように、ブラウザがやってくれる「前の画面の保持（ペイントホールディング）」と、私たちが書く「レイアウトを安定させるCSS」がタッグを組むことで、ユーザーにとって最高に心地よいWebサイトが生まれるんです。
—
5. まとめ
今回は、Webブラウザの裏側の優しさである「ペイントホールディング」について解説しました。
- ペイントホールディングとは：
ページ移動の瞬間に古いページのスクリーンショットを一時的に保持し、新しいページの準備ができるまでの「白画面（チラつき）」を防ぐブラウザの仕組み。
- 開発者としての心構え：
ブラウザのこの素晴らしい働きを邪魔しないよう、レイアウトがガタつかない丁寧なCSS設計や、軽やかなコーディングを心がけよう。
「ブラウザって、裏でこんなに気遣いをしてくれていたんだな」と、少しでも身近に感じてもらえたら嬉しいです。
日々の開発でつまずくことがあっても、大丈夫、一歩ずつ仕組みを理解していけば必ず楽しくなりますよ。
それでは、また次のWebの裏側探検でお会いしましょう！ チーフアーキテクトの私でした。
コメント