スクリプト オリジン トライアルまでの投機ルールのプリレンダリング

Barry Pollard
Lingqi Chi
Lingqi Chi
GitHub

公開日: 2026 年 1 月 23 日

Chrome 144 から、Speculation Rules API に prerender until script を追加するための新しいオリジン トライアルが開始されます。このオリジン トライアルでは、サイトで実際のユーザーを対象に新しい追加機能を試すことができます。この機能のフィールド テストを実施し、Chrome チームにフィードバックを提供して、この機能をウェブ プラットフォームに追加すべきかどうかを判断することが目的です。

この機能はどのような問題を解決することを目的としていますか？

Speculation Rules API を使用すると、ユーザーが実際にページに移動する前にページ読み込みを開始できます。これにより、一部またはすべての作業を事前に完了することで、今後のページ読み込みを改善できます。これまで、prefetch と prerender の 2 種類の投機的読み込みが許可されていました。

プリフェッチでは HTML ドキュメントのみが取得されます。これにより、重要な最初のリソースを事前に取得し、URL に移動したときにパフォーマンスを向上させることができます。サブ リソース（CSS、JavaScript、画像など）は読み込まれず、JavaScript も実行されないため、ページ読み込み時にブラウザが実行する作業が大幅に減ることはありません。

プリレンダリングは、これ以上のことを行います。サブソースを取得し、ページが非表示のバックグラウンド タブで開かれたかのように、ページのレンダリングと JavaScript の実行を開始します。ユーザーがリンクをクリックすると、ブラウザがページのレンダリングに必要なすべての作業を完了している場合は、すぐに移動できます。

プリレンダリング オプションを使用すると、パフォーマンスが大幅に向上する可能性がありますが、実装コストとリソースコストが追加で発生します。この点を考慮しないと、ユーザーが実際にページに移動する前にページを完全にプリレンダリングしたときに、予期しない副作用が発生する可能性があります。たとえば、分析プロバイダが推測を考慮しない場合、ユーザーが移動する前に分析が実行され、統計情報が歪められる可能性があります。

プリレンダリングを使用するサイトでは、ユーザーに古いページを配信しないように注意する必要があります。たとえば、e コマース サイトのページを投機し、商品を買い物かごに追加してから、以前に投機したページを読み込むと、サイトがこの更新を確実に行うための特別な処理を行っていない場合、古い買い物かごの数量が表示されることがあります。

この状態管理の一部がサーバーサイドで行われる場合、プリフェッチでも同様の複雑さが発生しますが、プリレンダリングではより大きな問題になることがよくあります。複雑なサイトでプリレンダリングを使用するのは、より複雑になる可能性があります。

しかし、デベロッパーからは、ページのプリフェッチによるパフォーマンスの向上をすでに実感しており、投機ルールをさらに活用してメリットを増やしたいという声が寄せられています。そこで、prerender until script が役立ちます。

スクリプトまでのプリレンダリングとは

スクリプトまでのプリレンダリングは、プリフェッチとプリレンダリングの中間的な新しい方法です。HTML ドキュメントをプリフェッチし（プリフェッチと同様）、すべてのサブリソースの取得を含め、ページのレンダリングを開始します（プリレンダリングと同様）。ただし、ブラウザは <script> 要素（インライン スクリプトと src スクリプトの両方）の実行を回避します。ブロックする <script> タグを検出すると、パーサーは一時停止し、ユーザーがページに移動するまで待機してから続行します。その間、プリロード スキャナは続行して、ページに必要なサブリソースを取得できます。これにより、ページの読み込みを続行できるようになったときに、サブリソースをすぐに使用できるようになります。

ブロックする <script> 要素を保留することで、実装の複雑さの多くを回避できます。同時に、レンダリング プロセスを開始してサブリソースを取得することで、プリフェッチよりも大きなメリットが得られます。場合によっては、完全なプリレンダリングとほぼ同じメリットが得られます。

最良のシナリオ（ページにスクリプトがまったく含まれていない場合）では、このオプションはページ全体をプリレンダリングします。また、フッターにスクリプト要素のみが含まれている場合、または async 属性または defer 属性を持つスクリプトのみが含まれている場合、その JavaScript なしでページが完全にプリレンダリングされます。最悪のシナリオ（<head> にブロック スクリプトがある場合）でも、ページ レンダリングの開始、特にサブリソースのプリフェッチにより、ページ読み込みが大幅に改善されるはずです。

スクリプトまでのプリレンダリングの使用方法

まず、この機能を有効にしてから、新しい prerender_until_script キーを使用して、他の Speculation Rules API オプションと同じ方法でスクリプトが使用されるまでプリレンダリングします（有効な JSON キー名にするためにアンダースコアを使用していることに注意してください）。

これは、静的 URL のリストルールで使用できます。

<script type="speculationrules">
{
  "prerender_until_script": [{
    "urls": ["next.html", "next2.html"]
  }]
}
</script>

また、投機する URL がページ上のリンクとして利用可能なドキュメント ルールでも使用できます。

<script type="speculationrules">
{
  "prerender_until_script": [{
    "where": { "href_matches": "/*" }
  }]
}
</script>

スクリプトまでプリレンダリングは、さまざまな eagerness 値など、通常の Speculation Rules API オプションで使用できます。

JavaScript が実行されないため、document.prerendering を読み取ることができず、prerenderingchange イベントも読み取ることができません。ただし、activationStart 時間はゼロ以外になります。

次の例は、prerender_until_script をサポートしていないブラウザでプリフェッチにフォールバックして、前の例をデプロイする方法を示しています。

<script type="speculationrules">
{
  "prerender_until_script": [{
    "where": { "href_matches": "/*" }
  }],
  "prefetch": [{
    "where": { "href_matches": "/*" }
  }]
}
</script>

Chrome はこの重複を問題なく処理し、各 eagerness 設定に最も適切なルールを実行します。

あるいは、異なる熱心度レベルでこれらを使用して、積極的にプリフェッチしてから、より多くのシグナルを含むスクリプトまでプリレンダリングにアップグレードすることもできます。プリフェッチ/プリレンダリングで前述したように:

<script type="speculationrules">
{
  "prefetch": [{
    "where": { "href_matches": "/*" },
    "eagerness": "eager"
  }],
  "prerender_until_script": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

この方法では、スクリプトのプリレンダリングを完全なプリレンダリングにアップグレードすることはできません。Chrome でこのパターンをサポートすることにご興味がある場合は、このバグにスターを付けてお知らせください。

すべての JavaScript が一時停止されますか？

いいえ。パーサーが一時停止するのは <script> 要素のみです。つまり、インライン スクリプト ハンドラ（onload など）や javascript: URL は一時停止を引き起こさず、実行される可能性があります。

たとえば、ページに移動する前に Hero image is now loaded をコンソールに記録できます。

<img src="hero.jpg"
     onload="console.log('Hero image is now loaded!')"
     alt="Example Photo">

一方、イベント リスナーが <script> で追加された場合、Hero image is now loaded はページがアクティブになるまでコンソールに記録されません。

<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
  const heroImage = document.querySelector('#hero-image');
  if (heroImage.complete) {
        console.log('Hero image is now loaded');
  } else {
    heroImage.addEventListener('load',
      (event) => {
        console.log('Hero image is now loaded');
      }
    );
  }
</script>

これは直感に反するように思えるかもしれませんが、多くの場合（前の例のように）、すぐに対処する方がよいでしょう。遅らせると、予期しない複雑な問題が生じる可能性があります。

また、ほとんどのインライン イベントではユーザー操作（onclick、onhover など）が必要なため、ユーザーがページを操作できるようになるまで実行されません。

最後に、前のブロック スクリプトはパーサーを一時停止するため、インライン イベント ハンドラが検出されなくなります。そのため、インライン イベント ハンドラであっても、有効になるまでメッセージはコンソールに読み込まれません。

<script>...</script>
<img src="hero.jpg"
     onload="console.log('Hero image is now loaded!')"
     alt="Example Photo">

これは、以前に定義されたコードを使用するインライン スクリプト ハンドラに特に当てはまります。このハンドラは引き続き想定どおりに機能します。

<script>
imageLoadFunction() = {
   ...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">

async 属性と defer 属性を持つスクリプトはどうなりますか？

async 属性と defer 属性を持つスクリプトは、有効になるまで遅延されますが、パーサーがページの残りの部分の処理を続行するのをブロックすることはありません。スクリプトはダウンロードされますが、ページに移動するまで実行されません。

スクリプトまでのプリレンダリングを有効にする方法

スクリプトまでのプリレンダリングは、現在開発中の新しいオプションであり、変更される可能性があります。そのため、最初に有効にしてオプトインしないと使用できません。

デベロッパー向けに、chrome://flags/#prerender-until-script Chrome フラグまたは --enable-features=PrerenderUntilScript コマンドライン フラグを使用してローカルで有効にできます。

スクリプトまでのプリレンダリングも、Chrome 144 以降のオリジン トライアルとして利用できるようになりました。オリジン トライアルを使用すると、サイト所有者はサイトで機能を有効にして、実際のユーザーが手動で有効にしなくてもその機能を利用できるようにすることができます。これにより、実際のユーザーに対する機能の影響を測定し、想定どおりに機能していることを確認できます。

テスト運用してフィードバックを共有する

この Speculation Rules API の追加案は非常に有望です。サイトオーナーの皆様もぜひお試しください。

提案に関するフィードバックは、GitHub リポジトリでお寄せください。Chrome の実装に関するフィードバックについては、Chromium のバグを報告してください。