The Unbearable Weight of Massive JavaScript – performance.now()

Follow Ryan on Mastodon @ https://webperf.social/@ryantownsend

For the past 10+ years, JavaScript frameworks and Single Page Applications have been marketed as the solution to all our performance, robustness and productivity problems, but things haven’t worked out the way we’d all hoped, have they?

* Simple marketing and ecommerce sites are still getting heavier and slower.

* Features fail in weird and wonderful ways meaning we need an ever-increasing array of tooling to monitor and debug problems.

* Teams armed with the latest Apple Silicon Macs, expensive CI tooling and complex build pipelines still can’t ship effectively.

But it’s not all doom-and-gloom: we live in a time of unprecedented opportunity to give our users a fantastic experience – the web platform has never been more capable than it is today.

Let’s look at what we can achieve by simplifying our web architecture, utilising new and upcoming Web Platform APIs and getting back to building fast, maintainable, user-friendly front-ends.

Transcript

1. The Unbearable Weight of Massive JavaScript
2. twnsnd.com/perfnow
3. twnsnd.com/perfnow How did our priorities get misaligned? What it really means to be productive How we can improve things with the Web Platform
4. twnsnd.com/perfnow Web Platform- fi rst
5. twnsnd.com/perfnow
6. twnsnd.com/perfnow Up to 2 years 3 to 5 years 5 to 10 years 10 to 20 years How long?! 😬 0% 1,600% Years of Experience
7. twnsnd.com/perfnow img.png { behavior: url(png.htc) }
8. twnsnd.com/perfnow No ever-green browsers Front-end development ‘Not SERIOUS’ Inaccessible Macromedia Adobe Flash What even is ‘Automated testing’? Rudimentary web performance tooling
9. twnsnd.com/perfnow Reach a global audience Iterate faster than any other platform Lower disparity in connectivity and compute ‘Progressive Enhancement’ and ‘Graceful Degradation’ coined Web Standards movement headway on consistency
10. Real world projects BIG TECH & VC DEMOS
11. twnsnd.com/perfnow
12. twnsnd.com/perfnow
13. twnsnd.com/perfnow Trickle-down User Experience
14. twnsnd.com/perfnow “92% [of businesses] think their website’s poor user experience is costing them sales” — Storyblok Research
15. twnsnd.com/perfnow Janky sliders Multi-megabyte JavaScript resources for static landing pages Tracking-dependent add-to-cart Unhoverable mega-menus In fi nite loops Skeletons for infrequently changed content Accept cookies! Live chat now! Sign-up for 10% o ff ! Client-side rendered forms 2.5mb marketing landing pages
16. twnsnd.com/perfnow
17. twnsnd.com/perfnow
18. twnsnd.com/perfnow We can do better
19. twnsnd.com/perfnow Developer Experience Convenience
20. twnsnd.com/perfnow Productivity is more than n p m i ns ta l l
21. twnsnd.com/perfnow
22. twnsnd.com/perfnow Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training
23. twnsnd.com/perfnow Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training
24. twnsnd.com/perfnow A necessary but costly decision
25. twnsnd.com/perfnow
26. twnsnd.com/perfnow
27. twnsnd.com/perfnow Tell me you’ve migrated to an SPA without telling me you’ve migrated to an SPA
28. twnsnd.com/perfnow “It would be better if it was more ’APP-LIKE’” — Nobody, not a single end-user
29. twnsnd.com/perfnow
30. twnsnd.com/perfnow Consistently working Reasonably fast Accessible Usable
31. twnsnd.com/perfnow Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training “It depends”
32. twnsnd.com/perfnow Few are ready
33. twnsnd.com/perfnow Embracing the Web Platform
34. twnsnd.com/perfnow “Consider users over authors over implementors over speci fi ers over theoretical purity” — W3C’s Priority of Constituencies (within the HTML Design Principles) That’s us!
35. twnsnd.com/perfnow
36. twnsnd.com/perfnow 55,000 lines of JavaScript
37. twnsnd.com/perfnow 1. Import Maps 2. Custom Elements 3. Scroll-snapping / Scroll-linked Animations 4. View Transitions 5. Navigation API
38. twnsnd.com/perfnow BUT FIRST! A few important words on approach
39. twnsnd.com/perfnow Progressive Enhancement
40. twnsnd.com/perfnow Sending useful HTML: forms, links, buttons Accepting there will be bugs in your software Ensuring every feature works without JavaScript, regardless of importance Going cold-turkey on frameworks & libraries
41. twnsnd.com/perfnow Browser support
42. twnsnd.com/perfnow
43. twnsnd.com/perfnow
44. twnsnd.com/perfnow Waiting for all browsers to support a feature Waiting for everyone to update their browser Developing against the lowest common denominator Using features which bene fi t signi fi cant portions of your customer base
45. twnsnd.com/perfnow Poly fi lls, Shims & alternative code paths
46. twnsnd.com/perfnow Making it work for everyone, regardless of performance impact Using poly fi lls that provide support back to the stone age Using massive fully-featured poly fi lls, when an if/else would do Never reviewing what poly fi lls you still have in play Giving more of your customer base a great experience
47. twnsnd.com/perfnow Import Maps Shimmable!
48. twnsnd.com/perfnow <script type="importmap"> { "imports": { "shared-library-1.js": "./shared-library-1-a1b2c3.js", "shared-library-2.js": "./shared-library-2-d4e5f6.js" } } </script>
49. twnsnd.com/perfnow import { feature } from "shared-library-1.js"; /* actually loads shared-library-1-a1b2c3.js */
50. twnsnd.com/perfnow <script type="importmap"> { "imports": { "third-party.js": "https://example.com/third-party.js" } } </script> JUST BECAUSE YOU CAN, DOESN’T MEAN YOU SHOULD
51. twnsnd.com/perfnow shared-library.js file-one.js file-two.js file-three.js import { feature } from "shared-library.js"
52. twnsnd.com/perfnow shared-library-v1.js file-one-v1.js file-two-v1.js file-three-v1.js import { feature } from "shared-library-v1.js"
53. twnsnd.com/perfnow shared-library-v2.js file-one-v1.js file-two-v1.js file-three-v1.js import { feature } from "shared-library-v1.js"
54. twnsnd.com/perfnow shared-library-v2.js file-one-v1.js file-two-v1.js file-three-v1.js import { feature } from "shared-library-v2.js"
55. twnsnd.com/perfnow shared-library-v2.js file-one-v2.js file-two-v2.js file-three-v2.js import { feature } from "shared-library-v2.js"
56. twnsnd.com/perfnow Improved cache hit ratio More simple, faster build pipelines Lower reliance on bundling * YMMV - see shared dictionarY compression Therefore, better prioritisation of individual scripts Import Maps
57. twnsnd.com/perfnow <script type="importmap"> { "imports": { "shared-import.js": "./shared-import-e5f6.js" } } </script> <script src="script-1-a1b2.js" type="module"></script> <script src="script-2-c3d4.js" type="module"></script>
58. twnsnd.com/perfnow <custom-elements>
59. twnsnd.com/perfnow Shadow DOM Light DOM
60. twnsnd.com/perfnow Shadow DOM Light DOM
61. twnsnd.com/perfnow <my-custom-element> <img src="..." width="200" height="200" alt="..." /> <img src="..." width="200" height="200" alt="..." /> <img src="..." width="200" height="200" alt="..." /> </my-custom-element>
62. twnsnd.com/perfnow class MyCustomElement extends HTMLElement { connectedCallback() { // added to DOM, attach events, initialize etc } disconnectedCallback() { // removed from DOM, detach events, cleanup etc } } customElements.define("my-custom-element", MyCustomElement)
63. twnsnd.com/perfnow class MyCustomElement extends HTMLElement { static get observedAttributes() { return ["my-attribute"] } attributeChangedCallback(name, oldValue, newValue) { // action attribute changes } }
64. twnsnd.com/perfnow class MyCustomElement extends HTMLElement { static observedAttributes = ["value"] static formAssociated = true #internals constructor() { super() this.#internals = this.attachInternals() } attributeChangedCallback(name, oldValue, newValue) { this.#internals.setFormValue(newValue) } }
65. twnsnd.com/perfnow my-custom-element:defined { /* active styling */ } my-custom-element:not(:defined) { /* inactive styling */ }
66. twnsnd.com/perfnow You may not need to use slots or the (Declarative) Shadow DOM Your custom element can just use querySelector and innerHTML You may not need isomorphic rendering Some duplication is probably fi ne (though, alternatives do exist) Don’t over-complicate it LIT, WEBC, ENHANCE
67. twnsnd.com/perfnow Scroll Snapping & Scroll-Linked Animations
68. twnsnd.com/perfnow Progressive Enhancement ~10 lines of CSS Zero JavaScript GPU-accelerated Scroll Snap
69. twnsnd.com/perfnow .parent { overflow: hidden; overflow-x: auto; scroll-snap-type: x mandatory; scroll-snap-stop: always; scroll-behavior: smooth; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .parent::-webkit-scrollbar { display: none } .parent > * { scroll-snap-align: start }
70. twnsnd.com/perfnow
71. twnsnd.com/perfnow Progressive Enhancement ~10 lines of CSS Zero JavaScript Poly fi lled with Intersection Observer Scroll-Linked Animation (Position: Support) IMPLEMENTATION EN-ROUTE!
72. twnsnd.com/perfnow @supports (scroll-timeline: --name inline) { @keyframes fade-in { 0% { opacity: 0 } 1% { opacity: 1 } } scrollable-element { scroll-timeline: --scroll-shadow inline; } scrollable-element .scroll-shadow-inline-start, scrollable-element .scroll-shadow-inline-end { animation: auto fade-in linear forwards; animation-timeline: --scroll-shadow; } scrollable-element .scroll-shadow-inline-end { animation-direction: reverse; } }
73. twnsnd.com/perfnow if (!CSS.supports("(scroll-timeline: --name inline)")) { customElements.define("scroll-indicator", ScrollIndicator) if (window.matchMedia("(min-width: 1024px)").matches) { customElements.define("scroll-shadow", ScrollShadow) } }
74. twnsnd.com/perfnow View Transitions
75. twnsnd.com/perfnow SPAs are a big trade-o ff just for page transitions
76. twnsnd.com/perfnow Nobody likes having their toys taken away
77. twnsnd.com/perfnow Progressive Enhancement As little as 1 line of HTML Zero JavaScript GPU-accelerated Cross-document Transitions (Position:UNKNOWN)
78. twnsnd.com/perfnow <meta name="view-transition" content="same-origin" />
79. twnsnd.com/perfnow view-transition-name: my-element
80. twnsnd.com/perfnow ::view-transition-old(my-element) { animation: fade 0.3s ease forwards } ::view-transition-new(my-element) { animation: fade 0.3s ease reverse } @keyframes fade { from { opacity: 1 } to { opacity: 0 } }
81. twnsnd.com/perfnow
82. twnsnd.com/perfnow Progressive Enhancement ~5 lines of JavaScript (inc. fallback) Customise with CSS GPU-accelerated Single-document Transitions (Position:POSITIVe/SUPPORT)
83. twnsnd.com/perfnow function navigateWithTransition(data) { // fallback if (!document.startViewTransition) { updateDOM(data) return } document.startViewTransition(() => updateDOM(data)) }
84. twnsnd.com/perfnow Navigation API (Position: POSITIVE/Support)
85. twnsnd.com/perfnow Manually attach submit/click event listeners Manually implement loading feedback Manually announce page changes Manually manage scroll position History API
86. twnsnd.com/perfnow navigation.addEventListener("navigate", (event) => { if (!event.canIntercept) return event.intercept({ async handler() { const content = await loadContent(event.destination.url) renderContent(content) } }) })
87. twnsnd.com/perfnow navigation.addEventListener("navigate", (event) => { if (!event.canIntercept) return event.intercept({ async handler() { const content = await loadContent(event.destination.url) document.startViewTransition(() => renderContent(content)) } }) })
88. twnsnd.com/perfnow Decoupled from the DOM Native browser loading state Native accessibility technology integration Handles restoring scroll position for you Navigation API
89. twnsnd.com/perfnow Bonus noteworthy mentions
90. twnsnd.com/perfnow <dialog> <details> CSS Toggles
91. twnsnd.com/perfnow • Push Notifications • Badging API • WebShare API • PassKeys • Anchor Positioning • Container Queries • Cascade Layers • :user-valid / :user-invalid • Popover API • Deferred Fetch • Internationalisation API • Web Workers • OffscreenCanvas • WASM
92. twnsnd.com/perfnow Use the Web Platform, don’t reimplement it
93. twnsnd.com/perfnow How’re those stats looking?
94. twnsnd.com/perfnow 55,000650 lines of JavaScript
95. twnsnd.com/perfnow
96. twnsnd.com/perfnow
97. twnsnd.com/perfnow 1. Know your audience 2. Don’t limit yourself to fully-adopted features 3. Consider the standard positions of browsers, not just support 4. Consider the maturity of standards 5. Consider how far back and how wide your poly fi lls need to go
98. twnsnd.com/perfnow Thank you!