やあ。今日もレガシーなコードと最新のビルドツールに挟まれて、華麗にブラウザをハックしているかい？
今回は、フロントエンドエンジニアなら絶対に知っておくべき、そして日々のパフォーマンスチューニングで強力な武器になる「投機的パース（Speculative Parsing）」について話をしよう。
「HTMLのパース中に重い外部CSSやJavaScriptを踏んだら、メインスレッドがブロックされて画面が真っ白になる……」
こんな絶望的な状況を救うために、ブラウザのなかの人たちは裏側で血のにじむような努力をしているんだ。その最たる例が、この投機的パースだ。
仕様書の文字をただ追うのとは一味違う、ブラウザの「生々しい裏側の挙動」と、それをハックして爆速のWebサイトを作るための実践知を叩き込んでいこうか。
—
1. そもそも「投機的パース（Speculative Parsing）」とは何者か？
まずは、ブラウザのレンダリングパイプラインにおける「現実」の話から始めよう。
ブラウザがHTMLを上から順に読み込んでDOMツリーを構築していく（HTML Parsing）最中、厄介な障壁にぶつかる。それが「外部CSS」と「同期的な外部JavaScript」だ。
- CSSのブロック: スタイルが確定しないと正確なレンダリング（Layout/Paint）ができないため、ブラウザはCSSのダウンロードとパースが完了するまでDOMの構築をストップ（あるいはレンダリングをブロック）させる。
- JavaScriptのブロック: スクリプト内で `document.write` やDOMの直接操作が行われる可能性があるため、JavaScriptの実行が終わるまで、その先のHTMLパース自体が完全に停止する。
「うわ、じゃあ上流に重いCSSやJSがあったら、下流の画像や他のスクリプトのダウンロードはそこで足止めを食らうのか？」
普通に考えたらそうだ。しかし、もしブラウザがそんなおっとりした作りだったら、現代のリッチなWebアプリケーションは読み込みに何秒もかかってユーザーは即座に離脱している。
そこで登場するのが 投機的パース（別名：プレパーサー / Speculative Parser） だ。
裏側で何が起きているのか？
メインのパーサーが「うわっ、ブロッキングスクリプトに阻まれた！」と足止めを食らっているまさにその瞬間、ブラウザの裏側（別スレッド、あるいは低優先度のタスク）では、「もう一人の先読み専門のパーサー」が先回りしてHTMLの生テキストをスキャンし始めている。
こいつの仕事はDOMツリーを作る事ではない。「この先にある画像、スタイルシート、スクリプト、フォントのURLを片っ端から見つけ出し、メインスレッドが『次は何をダウンロードすればいいんだっけ？』と迷う前に、ネットワーク層へ先回りしてリクエストをブチ込むこと」だ。
いわば、メインエンジンが足止めを食らっている間に、先回りして燃料を補給し続ける「機関士」のような存在だな。
—
2. 投機的パースを「邪魔する奴」と「味方にする奴」
この強力な最適化アルゴリズムだが、書き方ひとつでその恩恵をフイにしてしまうことがある。実務でやりがちなアンチパターンを見ていこう。
❌ やってはいけない：動的に生成されるリソース
投機的パースは、あくまで「HTMLの生テキスト（静的なHTML）」をテキストベースで先読みしている。
そのため、以下のようなJavaScriptによる動的なリソース挿入は、投機的パーサーには見つけられない。
`heavy-loader.js` の中で `` や `` を動的に生成している場合、投機的パーサーは完全に盲目になってしまう。結果として、ネットワークのパイプラインに無駄なアイドル時間が生まれ、LCP（Largest Contentful Paint）が劇的に悪化する。
⭕ 正しいアプローチ：ヒントを与える（Resource Hints）
もし「どうしてもこの画像やフォントは最初に読み込ませたい！」と分かっているなら、HTMLの初期段階でブラウザに明示的に教えてやるといい。
ここで、実務で即座に使えるベストプラクティスコードを見てみよう。
ここにコンテンツが入ります。
—
3. シニアが教える、現場での実践的チューニングTips
ブラウザの投機的パースの挙動を理解していると、パフォーマンス監査ツール（Lighthouseなど）で「リソースの読み込み順序を最適化しなさい」と言われたときに、迷わず原因を特定できるようになる。
1. `async` と `defer` の使い分けを徹底する
DOMに依存しないサードパーティ製スクリプト（アナリティクスやチャットウィジェットなど）には必ず `async` をつけろ。依存関係がある自社製アプリのコードには `defer` だ。これだけで、メインパーサーと投機的パーサーの邪魔をせずに済む。
2. CSSをインライン化しすぎない
「CSSのブロックを防ぐために全部インラインスタイル（`