Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Cost Of JavaScript in 2023

Addy Osmani
June 28, 2023
Programming
9
1.6k

The Cost Of JavaScript in 2023

As the world builds sites that are more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. Addy Osmani will explain how and why JavaScript is the most expensive resource your site uses today—especially on mobile and lower-end desktops.

Addy will also share tips for fixing JavaScript performance issues so everything loads quicker. A little discipline can help if you want your site to load and be interactive as soon as possible on mobile.

Video: https://www.youtube.com/watch?v=ZKH3DLT4BKw

Objective
Teach developers why JavaScript is the costliest part of their sites and what they can do to optimize this well.

Five Things Audience Members Will Learn:

What the dominant costs of heavy JavaScript are
How median hardware plus heavy JavaScript can impact user-experience
Tips and tricks for reducing the cost of JavaScript, reducing long-tasks and improving the Core Web Vitals metrics
Things frameworks and browsers are doing to try reducing the cost of JavaScript by default.
How new performance metrics can help you reason about where to optimize JavaScript to improve user interactions

First presented at FITC/Web Unleashed

Addy Osmani

June 28, 2023
Tweet

More Decks by Addy Osmani

See All by Addy Osmani
Building Effective Engineering Teams - LeadDev
addyosmani
21
990
Communicating Effectively As A Tech Lead
addyosmani
3
3.7k
The Future Of Performance Tooling
addyosmani
1
410
Picture Perfect - How To Instantly Load Images
addyosmani
0
340
Polyfilling The Web Forward
addyosmani
1
230
Picture Perfect - An Image Optimization Talk
addyosmani
1
310
Learning Patterns
addyosmani
29
66k
Optimizing For Core Web Vitals
addyosmani
0
350
Adaptive Loading - Improving the UX for billions on low-end devices
addyosmani
0
210

Other Decks in Programming

See All in Programming
フレームワークが存在しない時代からのレガシープロダクトを、 Laravelに”載せる”実装戦略
hirobe1999
0
240
コンポーネント設計のすゝめ__ベストプラクティスを学ぶLunch_LT_.pdf
sakurahigashi2
0
670
djangocongressjp2023_password_hash
bungoume
1
420
システムリプレースの中でCDCを取り入れている話/chugokudb32-cdc
takahashiikki
1
110
CodeReviewerが求められること
onopon
0
200
Fast by Friday: Why Kernel Superpowers are Essential
ennael
PRO
0
160
PHP 8.3のmbstringの進化を見てください - コントリビューターとしてのかかわり -
youkidearitai
0
270
社内AI勉強会 ChatGPT入門 ~生成AIの基本とその活用法~
beenos
0
450
Prepare for Jakarta EE 11
ivargrimstad
0
470
ECSのCI/CD改善と標準化の取り組み / JAWS FESTA 2023 in Kyushu
cohalz
7
1.6k
Tradeoffs, Bad Science, and Polar Bears – The World of Java Optimisation
hollycummins
1
460
データベース/SQL超入門！完全初心者向けに世界一分かりやすく解説します
ttskch
0
330

Featured

See All Featured
For a Future-Friendly Web
brad_frost
168
8.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
56k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
177
9.9k
Atom: Resistance is Futile
akmur
257
24k
Side Projects
sachag
450
39k
The Invisible Side of Design
smashingmag
292
49k
A Philosophy of Restraint
colly
195
15k
Learning to Love Humans: Emotional Interface Design
aarron
265
38k
We Have a Design System, Now What?
morganepeng
40
6.4k
What's new in Ruby 2.0
geeforr
336
30k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
20k
Clear Off the Table
cherdarchuk
81
300k

Transcript

  1. View Slide

  2. @reactive_dude
    JAVASCRIPT
    IS GOOD...IN
    MODERATION

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. Patterns for web applications
    Portfolio Content Storefront Social Network Immersive
    Holotype Personal Blog CNN Amazon Facebook Figma
    Interactivity Minimal Linked Articles Purchase Multi-Point, Real-time Everything
    Session Depth Shallow Shallow Shallow - Medium Extended Deep
    Values Simplicity Discover-ability Load Performance Dynamicism Immersiveness
    Routing Server Server, Hybrid Hybrid, Transitional Transitional, Client Client
    Rendering Static Static, SSR Static, SSR SSR CSR
    Hydration None Progressive, Partial Partial, Resumable Any None (CSR)
    Example
    Framework
    11ty Astro, Elder Marko, Qwik, Hydrogen Next, Remix Create React
    App
    https://dev.to/this-is-learning/patterns-for-building-javascript-websites-in-2022-5a93

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. PROGRESSIVE
    HYDRATION

    View Slide

  11. FACTOR IN
    VISIBILITY

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. @addyosmani

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. INP

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. https://web.dev/optimize-long-tasks/
    A)
    B)

    View Slide

  38. https://philipwalton.com/articles/why-web-developers-need-to-care-about-interactivity/
    *

    View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. * Background compilation: 1-2% improvement to main thread V8 time time reduction. Background parsing and other improvements to
    parse reduced overall V8 load time by up to 10-20%

    View Slide

  44. ~20-40% reduction in parse and
    compilation time during load.

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. @ChrisArter
    npm install
    WHAT’S
    IN YOUR
    JAVASCRIPT
    BUNDLE?

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. Static import

    View Slide

  67. Static import

    View Slide

  68. Code-splitting bundles

    View Slide

  69. View Slide

  70. Dynamic Import

    View Slide

  71. Dynamic Import

    View Slide

  72. Code-splitting bundles

    View Slide

  73. Route and component splitting

    View Slide

  74. View Slide

  75. “Invisible” Visible

    View Slide

  76. Import On Visibility

    View Slide

  77. Import On Visibility

    View Slide

  78. View Slide

  79. How and where do I want to render content?
    Check out Lydia Hallie’s great “Rendering Patterns” talk

    View Slide

  80. View Slide

  81. Rehydration

    View Slide

  82. Partial Hydration

    View Slide

  83. Islands Architecture

    View Slide

  84. View Slide

  85. Rehydration

    View Slide

  86. Progressive Hydration

    View Slide

  87. RESUMABLE HYDRATION
    Check out “Hydration is pure overhead” by Misko Hevery

    View Slide

  88. View Slide

  89. https://twitter.com/shuding_

    View Slide

  90. View Slide

  91. Streaming Server Rendering

    View Slide

  92. Doodles courtesy Dan Abramov

    View Slide

  93. Selective Hydration: before

    View Slide

  94. Selective Hydration: after

    View Slide

  95. View Slide

  96. View Slide

  97. View Slide

  98. View Slide

  99. View Slide

  100. View Slide

  101. View Slide