Oh, the Scripts We’ll Load!

Oh, the Scripts We’’ll Load! Tim Kadlec @tkadlec

How to load a script

<script> // inline script here </script> <script src=”/script.js” />

The Network 2. The Parser

<script src=“https://slowfil.es/ filetype=js&delay=2500” ></script>

Script: High Script: Normal Script: High

document.write(“Sir Hawk Philsworth”);

JavaScript is Parser Blocking

<script src=”/script.js” /> Blocks parser Blocks render Competes with critical resources

k a T ! o w t e

</head> <script src=”https://slowfil.es/filetype=js&delay=2500”></ script> </body>

Script: High Script: Normal Script: Medium

2.2kb 198kb

</head> <script src=“script.js”> </script> </body> Discovered Late Competes with critical resources

k a T ! e e r h t e

<script> var script = document.createElement(‘script’); script.src = “https://slowfil.es/file?type=js&delay=2500”; document.getElementsByTagName(‘head’)[0].appendChild(script); </script>

Dynamically Inserted Scripts are Async By Default

Script: High Script: Normal Script: Low

document.getElementById(“#main”).style.height = “100px”;

CSS Blocks JS Execution JS Execution Blocks Parser

<script> var script = document.createElement(‘script’); script.src = “https://slowfil.es/file?type=js&delay=2500”; document.getElementsByTagName(‘head’)[0].appendChild(script); </script>

Blocks parser Discovered Late

T ! r u o f e ak

<script async src=”https://slowfil.es/file? type=js&delay=2500”></script>

Script: Low Script: Normal Script: Low

<script async src=”https://slowfil.es/file?type=js&delay=2500”></script> <script async src=”https://slowfil.es/file?type=js&delay=200”></script>

Async Does not Guarantee Order

<script async>

<script async>

<script async>

Async Blocks Parser When Script Arrives

<script async src=”https://slowfil.es/file?type=js&delay=2500”></ script> No Guarantee of Order Blocks Parser (and potentially render) when script arrives

k a T <script defer src=”https://slowfil.es/file? type=js&delay=2500”></script> ! e v i f e

<script defer>

<script defer>

Script: High Script: Normal Script: Low

<script defer src=”https://slowfil.es/file?type=js&delay=2500”></script> <script defer src=”https://slowfil.es/file?type=js&delay=200”></script>

<script defer src=”https://slowfil.es/file?type=js&delay=2500”></ script> Guarantee Order Doesn’t Block Parser or Render Discovered Early Doesn’t Compete with Other Critical Resources

But what if we want both network priority and parser benefits?

k a T ! n e v e s e

<link rel=”preload” href=”https://slowfil.es/file? type=js&delay=2500” as=”script”> <script defer src=”https://slowfil.es/file? type=js&delay=2500”></script>

Script: High Script: Normal Script: High

Understanding the Trade-offs

Experiment Measure Iterate

Thank You! Tim Kadlec @tkadlec