Skip to content

Instantly share code, notes, and snippets.

@domfarolino
Created April 27, 2018 19:11
Show Gist options
  • Save domfarolino/edcf1213c3bd6f91a657a166d4d2f5a7 to your computer and use it in GitHub Desktop.
Save domfarolino/edcf1213c3bd6f91a657a166d4d2f5a7 to your computer and use it in GitHub Desktop.
<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).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment