Oh, the Scripts We’ll Load!

A presentation at Jamstack Conf in October 2020 in by Tim Kadlec

Slide 1

Slide 1

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

Slide 2

Slide 2

How to load a script

Slide 3

Slide 3

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

Slide 4

Slide 4

  1. The Network 2. The Parser

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

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

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Script: High Script: Normal Script: High

Slide 15

Slide 15

document.write(“Sir Hawk Philsworth”);

Slide 16

Slide 16

JavaScript is Parser Blocking

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

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

Slide 22

Slide 22

k a T ! o w t e

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

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Script: High Script: Normal Script: Medium

Slide 27

Slide 27

2.2kb 198kb

Slide 28

Slide 28

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

Slide 29

Slide 29

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>

Slide 30

Slide 30

Dynamically Inserted Scripts are Async By Default

Slide 31

Slide 31

Slide 32

Slide 32

Script: High Script: Normal Script: Low

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

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

Slide 39

Slide 39

CSS Blocks JS Execution JS Execution Blocks Parser

Slide 40

Slide 40

Slide 41

Slide 41

<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

Slide 42

Slide 42

T ! r u o f e ak

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

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Script: Low Script: Normal Script: Low

Slide 46

Slide 46

Slide 47

Slide 47

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

Slide 48

Slide 48

Slide 49

Slide 49

Async Does not Guarantee Order

Slide 50

Slide 50

<script async>

Slide 51

Slide 51

<script async>

Slide 52

Slide 52

<script async>

Slide 53

Slide 53

Async Blocks Parser When Script Arrives

Slide 54

Slide 54

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

Slide 55

Slide 55

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

Slide 56

Slide 56

<script defer>

Slide 57

Slide 57

<script defer>

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Slide 61

Slide 61

Slide 62

Slide 62

Script: High Script: Normal Script: Low

Slide 63

Slide 63

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

Slide 64

Slide 64

Slide 65

Slide 65

<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

Slide 66

Slide 66

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

Slide 67

Slide 67

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>

Slide 68

Slide 68

Slide 69

Slide 69

Script: High Script: Normal Script: High

Slide 70

Slide 70

Slide 71

Slide 71

Understanding the Trade-offs

Slide 72

Slide 72

Slide 73

Slide 73

Experiment Measure Iterate

Slide 74

Slide 74

Thank You! Tim Kadlec @tkadlec