fetch-contending-with-script.html

<h1>Hello</h1>
<script>
  fetch("extra.metadata")
  fetch("non-important.metadata")
  fetch("superfluous.metadata")
  // imagine like 20 of these, all "high" in priority
</script>

<!-- This represents some content, making the script
appearing below it "late" which gets "medium" priority
in Chromium by preload scanner until main parser hits it -->
<img src=hero.png alt=hero>

<!-- As a developer, I was told to put scripts late in the page -->
<script src=criticalScript.js></script>

<!-- The issue with this webpage is we have a ton of non-critical
fetch() loading at a higher priority than the late-body <script>.
This, I believe, will cause the script to load after all of the
non-critical fetch() which should have a lower priority. We can make
sure we process the late-body <script> before the fetch()'s by including
fetch("...", {importance: "low"}) so that the number of high-priority
requests waiting in the queue by the time we get to the late-body <script>
is none, and the <script> can start loading immediately (and render the page
faster).