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

Barry Pollard
Lingqi Chi
Lingqi Chi
GitHub

公開日: 2026 年 1 月 23 日

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

この機能で解決しようとしている問題は何ですか？

Speculation Rules API を使用すると、ユーザーが実際にページに移動する前にページの読み込みを開始できます。これにより、一部またはすべての作業を事前に完了することで、今後のページ読み込みを改善できます。これまで、プリフェッチと事前レンダリングの 2 種類の推測が可能でした。

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

事前レンダリングでは、さらに多くの処理が行われます。サブリソースを取得し、ページをレンダリングして JavaScript を実行します。これは、ページが非表示のバックグラウンド タブで開かれた場合とほぼ同じです。ブラウザがページのレンダリングに必要なすべての作業を完了している場合、ユーザーがリンクをクリックするとすぐに移動できます。

事前レンダリング オプションを使用すると、パフォーマンスが大幅に向上する可能性がありますが、実装コストとリソースコストが追加で発生します。慎重に検討しないと、ユーザーが実際にページに移動する前にページを完全に事前レンダリングした場合に、予期しない副作用が発生する可能性があります。たとえば、アナリティクスプロバイダが推測を考慮していない場合、ユーザーが移動する前にアナリティクスが起動し、統計が歪む可能性があります。

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

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

ただし、デベロッパーからは、ページのプリフェッチによるパフォーマンスの向上がすでに確認されており、推測ルールをさらに活用して、より多くのメリットを得たいという声が寄せられています。そこで、prerender until scriptが登場します。

prerender until scriptとは何ですか？

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

ブロックする <script> 要素を保持することで、実装の複雑さを大幅に回避できます。同時に、レンダリング プロセスを開始してサブリソースを取得することで、プリフェッチよりも大幅な改善が見込めます。完全な事前レンダリングとほぼ同じです。

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

prerender until scriptを使用するにはどうすればよいですか？

まず、この機能を有効にします。次に、prerender until scriptは、他の Speculation Rules API オプションと同じ方法で、新しいprerender_until_scriptキーを使用して使用します（アンダースコアは有効な 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>

prerender until 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 設定に最適なルールを実行します。

または、これらの機能をさまざまな eagerness レベルで使用して、積極的にプリフェッチし、より多くのシグナルを使用して prerender until script にアップグレードすることもできます。プリフェッチ/事前レンダリングで前述したように:

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

この方法では、prerender until 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 属性を持つスクリプトは、アクティブになるまで遅延しますが、パーサーがページの残りの部分の処理を続行することを妨げません。スクリプトはダウンロードされますが、ページに移動するまで実行されません。

prerender until scriptを有効にするにはどうすればよいですか？

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

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

prerender until script は、Chrome 144 から オリジン トライアルとして利用できるようになりました。オリジン トライアルを使用すると、サイト所有者は、ユーザーが手動で有効にしなくても機能を利用できるように、サイトで機能を有効にできます。これにより、実際のユーザーに対する機能の影響を測定し、想定どおりに動作することを確認できます。

テストしてフィードバックをお寄せください

Speculation Rules API へのこの追加機能に非常に期待しています。サイト所有者の方はぜひテストしてみてください。

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