fetchpriority — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 The fetchpriority race</h1>
    <p class="pg-sub">
      Three requests, two connections. The browser always picks a web font and a
      chat-widget script first. Flip the hero image's <code>fetchpriority</code> and
      watch who finishes first — and who gets bumped to make room.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="wrap-controls">
        <div class="field">
          <label class="label" for="heroPriority">Hero image <code>fetchpriority</code></label>
          <select id="heroPriority" class="pg-select">
            <option value="auto">auto (browser decides — today's default)</option>
            <option value="high">high (you override it)</option>
          </select>
        </div>
      </div>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn primary" id="run">▶️ Load the page</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="auto">Preset: today's default</button>
        <button class="btn sm" data-preset="high">Preset: add fetchpriority="high"</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>

<div class="track-wrap">
        <div class="track">
          <div class="track-head">
            <div class="track-name">Web font <code>@font-face</code></div>
            <span class="badge high" id="badge-font">high</span>
          </div>
          <div class="lane"><div class="bar" id="bar-font"></div></div>
          <div class="finish" id="finish-font">Waiting to run…</div>
        </div>

<div class="track">
          <div class="track-head">
            <div class="track-name">Chat widget <code>&lt;script&gt;</code></div>
            <span class="badge high" id="badge-script">high</span>
          </div>
          <div class="lane"><div class="bar" id="bar-script"></div></div>
          <div class="finish" id="finish-script">Waiting to run…</div>
        </div>

<div class="track">
          <div class="track-head">
            <div class="track-name">Hero image <code>&lt;img&gt;</code> (the LCP element)</div>
            <span class="badge low" id="badge-hero">auto → low</span>
          </div>
          <div class="lane"><div class="bar" id="bar-hero"></div></div>
          <div class="finish" id="finish-hero">Waiting to run…</div>
        </div>
      </div>

<div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Pick a priority, then click "Load the page."</span>
      </div>
      <p class="hint" id="summary">
        Two connections, three requests. The scheduler fills the free connection with
        whichever queued request has the highest priority — this models the real
        behavior at a simplified scale, not the literal Chromium algorithm, which also
        weighs connection type and resource size.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.