Web performance matters. From SEO to bottom-line revenue impacts, performance can make or break your app. However, fixing performance feels like a quagmire of expert-level topics. What if I told you JavaScript bundle sizes could be cut up to 50% by doing one thing only? Nearly 90% of web traffic runs on modern browsers, but we're transpiling all of our JavaScript to ES5. That’s expensive. In this talk, we'll learn about differential serving, or serving both modern bundles and legacy bundles using webpack. This talk is framework agnostic, and best if you have at least a basic understanding of JavaScript.
The slides are deployed here. To advance the slides, use n for next and p for previous. The right arrow jumps to the next section (and left for previous section). Up and down to advance through slides within a section.
- Deploying ES2015+ Code in Production Today by Philip Walton
- Doing Differential Serving in 2019 by Jeremy Wagner and repo
- Serve modern code to modern browsers for faster page loads by Houssein Djirdeh (and click through for codelab)
- Modern Script Loading by Jason Miller
- Will it double-fetch? Browser behavior with
module/nomodulescripts by jakub-g - Smart Bundling: How To Serve Legacy Code Only To Legacy Browsers by Shubham Kanodia
- Get Down to Business: Why the Web Matters (Chrome Dev Summit 2018)
- Speed is now a landing page factor for Google Search and Ads
- Should We All Start Implementing Differential Serving? by Alex MacArthur
- Building the DOM faster: speculative parsing, async, defer and preload by Milica Mihajlija
- Making a Difference with Differential Serving video of Jeremy Wagner's talk
<script>: The Script element on MDN- caniuse for
type=module - statcounter GlobalStats Browser Version Market Share Worldwide
- wpostats.com
Sia Karamalegos is a web developer passionate about performance as well as an international conference speaker and writer. She is a Google Developer Expert in Web Technologies and a Women Techmakers ambassador. She co-organizes #FrontEndParty, GDG New Orleans, and NOLA Hack Night in the New Orleans area. She is the founder and lead developer for Clio + Calliope Web Development and was recognized in the Silicon Bayou 100, the 100 most influential and active people in tech and entrepreneurship in Louisiana. When she's not coding, speaking, or consulting, Sia likes to write stories and dabble in charcoal figure drawing. She's also an avid endurance athlete.
Twitter | Website | Github | Blog | StackOverflow | LinkedIn
Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)