A presentation at Jamstack Conf by Tim Kadlec
Oh, the Scripts We’’ll Load! Tim Kadlec @tkadlec
How to load a script
Script: High Script: Normal Script: High
document.write(“Sir Hawk Philsworth”);
JavaScript is Parser Blocking
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
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
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
Async Does not Guarantee Order
Async Blocks Parser When Script Arrives
k a T <script defer src=”https://slowfil.es/file? type=js&delay=2500”></script> ! e v i f e
Script: High Script: Normal Script: Low
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
JavaScript, more than any other resource type, is uniquely positioned to be a massive performance bottleneck on the web. And it starts before we ever get into bundle analysis, or hydration or any other of a number of hot topics. It starts with the seemingly innocent script element. Tucked away within the way that element works is a lot of complexity and numerous side effects that can make or break your sites performance.
In this talk, we’ll take a closer look at how to load JavaScript on a page and the multitude of ways that simple task can impact your performance.
The following resources were mentioned during the presentation or are useful additional information.
Wholesome entertainment for the entire family.
How Chrome prioritizes JavaScript on the network and for execution
Fantastic service for generating JS and CSS requests with artificial delays for testing.
Here’s what was said about this presentation on social media.
for free. You
can too.