Responsible JavaScript

on YouTube ↗58m

" summary

Half of sites send about 375KB median of compressed JavaScript, 25% send ~650KB and 10% send >=1MB which decompresses to ~3MB and slows median phones; refactor UI to semantic HTML (real form, label, button) and remove client-side validation to reduce JS. Switching Babel from useBuiltIns: "entry" to useBuiltIns: "usage" drops an example bundle 117KB → 68.5KB (~40%); enabling loose transforms saves ~18% more. Use native lazy loading, client hints (RTT/downlink/ECT), differential bundles and self‑host third‑party assets to make sites noticeably faster.

AI-written summary · about

" chapters (18)

1. 0:00Start
2. 0:40Jeremy Wagner
3. 10:28Main Thread Activity Indicator
4. 12:37Paint the Picture Not the Frame
5. 14:32Email Signup Form
6. 21:42Client-Side Hydration
7. 24:53Native Lazy Loading
8. 28:01Hybridized Lazy Loading
9. 35:50Differential Serving
10. 36:40This Pattern Shown Here Is How We Can Differentially Load Javascript though the First Script Tag Loads a Bundle Meant for Modern Browsers and Adding Type Equals Module Means the Script Will Get Picked Up by Modern Browsers and because Legacy Browsers Don't Understand that Type Attribute Value in Theory I'Ll Come Back to this in Theory They'Ll Ignore It the Second Script Tag Shows How We Would Load the Legacy Bundle and What You See Here Is the no Module Attribute It Isn't Understood by Legacy Browsers so They Just Go for Whatever and They Just Gloss over It and They Just Download the Stuff Anyway
11. 39:11You Can Then Point to the Client Modern Babel Config To Generate a Smaller Version of that Code for Modern Browsers and the Size Differences between Legacy and Modern Bundles Depends on the Project some Projects May Only Seem Marginal Gains the Tune of like 5 to 10 % some Projects May Seem Much Bigger Gains You Know for Example We Applied It to some Components at a Client for Mine some of Them Were Reduced by Almost 90 % That's a Typical I Would Say More Often than Not It's like between 30 and 50 % with no Change in Functionality this Is a Web Pack Bundle Analysis of an Example Apps Legacy Bundle and It's Already Pretty Small at Around 68 K It's the Same One I'Ve Been Showing
12. 45:22But by Cutting Google Fonts out of the Picture and Self Hosting those Resources We Can Get Fonts Downloaded on the Client inside of Three-and-A-Half Seconds and that's a Big Improvement and the Cypher Auditing Your Third-Party Code and Eliminating What You Truly Don't Need and You Should Be Doing that You Can Extend the Idea of Self Hosting Third Party Assets to Most Things and the Benefits of Doing this Are Huge Especially Where Javascript Is Concerned Optimizely Is a Very Popular Client-Side Av Testing Framework I'M Not Crazy about It but My Clients Use It and It's Clearly Useful to Them I Think It Would Be Ideal To Do Server-Side a Be Testing Instead but that's Not Always Possible
13. 46:10It Was an Involved Process To Accomplish this but the Results Were Clearly Worth It to Them because It's Money for Them Right the Sooner We Get this Loading Its Money Money Money and So Self Host As Much of that Third-Party Code as You Reasonably Can but if You Can't You Can Do Resource since You Could Like Do Dns Prefetch To Do a Look Ahead on a Third-Party Host or a Pre Connect To Actually Initiate an Early Connection to a Host and You Would Put this in Your Html Head Well before the Browser Would Ever Discover those Resources It Doesn't Take It's Not As Good as Self Hosting those Assets but It Does Take some of the Sting out of that and It's a Relatively Easy Thing To Do and of Course this Leads Us into a Discussion about What It To Be Accommodating
14. 51:50And if a User Is on a Slow Connection We Lighten the Experience for Them and the Focus Is Increased on Content That's Critical to Them this Is by the Way this Is Easy To Sell the Product Stakeholders because Everybody Gets What They Want Right because Most People Are Reasonable They Want To Help People Out You'D Be like Well the Default Can Be the Ideal but Maybe We Could Like Check for Slower Connections and Maybe Adapt It a Little Bit and this Works I Like To Call this Adaptive Performance I Think It's a Fantastic Way of Compromising between the Ideal that You Wanted To Build and What the User Needs in Order To Make To Use the Thing That You Put Out There
15. 53:11We Can Remove those Things That May Not Be As Crucial To Like What Users Need the Information That They Need and for Our Trouble those People Will Have Something They Can Access Quickly Even if Bandwidth Is Lacking and Latency Is Very High We'Re Talking like What Five Requests 12 12 Kilobytes It's like Five Seconds over 2g if You'Re Used to a Slow Experience Five Seconds Is Reasonably Snappy Right I Get Throttled every Time I Traffic and I'M Just Sitting Here in Norway Don't Come on Come on I Wish Everyone Was Using Client Hints so if You'Re Interested in Knowing More I Did a Talk at Full-Stack Fest in Barcelona Last Year That Goes into this like in Depth It's All the Client Hints and All the Stuff about
16. 53:39So if You'Re Interested in Knowing More I Did a Talk at Full-Stack Fest in Barcelona Last Year That Goes into this like in Depth It's All the Client Hints and All the Stuff about It You Can Check that Out but if You'Re Not into Videos I'M More of like a Person That Likes To Like Kind Of Digest Stuff at My Own Pace and Read Articles I Did Write an Article for Google Web Fundamentals about It It Goes into a Similar Depth Okay So in Closing I Want To Hit on What I Think Is an Important Point and that Is We Need To First Understand What It Is that People Want from What We'Re Putting on the Web Meaning What Do We Want Them To Do
17. 55:39Your Experience as a Developer Is Important I Agree with that I Don't Want You To Think I'M I'M like Crapping on all of the Stuff That We Use that Stuff Is Important but It Is Never More Important than the User Experience That's that's the Purpose You Need To Serve Is the User Experience and if Your Excitement for a Certain Set of Tools Causes You To Build Things That No Longer Annika Bleah and Effectively Serve those Purposes It's High Time To Reevaluate Them Look at Your Analytics Find Out Where Your Users Are Coming from Get a Get a Real User Metrics Library and Find Out How People Are Accessing Your Site like Real People What Are Their Impacts and Start Making Changes
18. 56:07Look at Your Analytics Find Out Where Your Users Are Coming from Get a Get a Real User Metrics Library and Find Out How People Are Accessing Your Site like Real People What Are Their Impacts and Start Making Changes but Thankfully the Ecosystem Gives Us a Lot of Options without Sacrificing Developer Experience Entirely You Can Always Find Smaller Options That Will Be Felt Less by the People Who Use What You Create as a I'M a Big Fan of Pre-Act by the Way It Is 100 Almost 100 Percent Api Compatible with React New Version Is Going To Be Using Hooks and All that Stuff That We Like and It's like It's a Tenth of the Size

" related talks

• 32mResponsible JavascriptJeremy Wagner · NEJS Conf 2019
• 51mWhen JavaScript BytesTim Kadlec · performance.now() 2019
• 37mThe Cost of JavaScriptAddy Osmani · #PerfMatters Conference 2019
• 31m10KB or Bust" The Delicate Power of Webpack and Babel"Brian Holt · JSConfCO 2018
• 52m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · jsDay 2018
• 23mDecoding Javascript: Loading PerformanceArvin Abedinlou · DevWorld 2026
• 21mMonsters of Web PerformanceJamund Ferguson · CityJS Berlin 2024
• 58m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · Voxxed Days Bucharest 2018