The Cost Of JavaScript – 2023
JavaScript is a powerful and versatile programming language that is used to create interactive and dynamic websites. However, the use of JavaScript comes with a cost, both in terms of performance and user experience. As we move into 2023, it is important to consider the impact of JavaScript on website performance and the ways in which we can mitigate its negative effects.
Performance Impact
One of the major downsides of using JavaScript is its impact on website performance. JavaScript can increase page load times and slow down the rendering of web pages, particularly on mobile devices and slower internet connections. This can lead to a poor user experience and negatively impact a website’s search engine rankings.
User Experience
In addition to its impact on performance, JavaScript can also have a negative effect on user experience. Heavy use of JavaScript can result in websites that are difficult to navigate, have confusing layouts, and are prone to errors. This can frustrate users and lead to higher bounce rates and lower conversion rates.
What Can Be Done?
Despite the drawbacks of JavaScript, it is still an essential tool for creating interactive and engaging websites. However, there are several steps that can be taken to mitigate its negative effects. This includes optimizing JavaScript code, reducing the number of scripts and dependencies, and using modern techniques such as lazy loading and code splitting to improve performance.
Additionally, it is important to consider alternative approaches to creating interactive elements on a website, such as using CSS and HTML instead of relying solely on JavaScript. By taking a more strategic approach to the use of JavaScript, it is possible to create websites that are both engaging and performant.
Conclusion
As we look ahead to 2023, it is clear that the cost of JavaScript is something that web developers and designers need to consider. While JavaScript is a powerful tool, its impact on performance and user experience cannot be ignored. By taking a more strategic approach to its use and considering alternative methods for creating interactive elements, it is possible to mitigate the negative effects of JavaScript and create websites that are both engaging and high-performing.
4:57 for personal reference
Code splitting 20:43
Great work done, thnx
I don’t quite agree with this. There are tons of optimisations.
Just get back to the old way and stop doing stupid architectures.
wonderful content. I appreciate your works so much.
Thank you. Was always confused about what is what Hydration. Got a good idea from this.
Great talk per usual, Addy!
9:05 I work for a web browser called Chrome.
hmmmm interesting is that a new browser?
This is an excellent video. Thanks.
A summary for future reference:
+ Building interactive web experiences often involves sending large amounts of JavaScript to users that impact performance.
+ It's crucial to balance the use of JavaScript to ensure quick loading experiences and maintain a high-quality user experience.
+ The "Zero JavaScript" trend has emerged, emphasizing reliance on default browser capabilities.
+ Various rendering patterns have evolved, such as server-side rendering (SSR), Islands architecture, and partial hydration.
+ SSR generates the full HTML on the server, avoiding the need to send JavaScript to the client, but it may delay interactivity for single-page apps.
+ Progressive hydration selectively loads and renders components to improve performance.
+ Optimizing JavaScript bundles can enhance download speeds, reduce memory usage, and decrease CPU costs.
+ JavaScript execution time is vital, but parse and compile costs are less important.
+ It's essential to consider hardware optimization, CPU performance, thermal throttling, cache size, and power constraints on various devices.
+ Network latency and bandwidth also affect web performance.
+ Understanding the actual cost of JavaScript and optimizing for hardware and network conditions can significantly improve web performance.
+ The cumulative effect of frameworks, libraries, UI components, third-party code, trackers, and analytics, known as the "JavaScript helpful tax," can significantly impact performance.
+ The goal is to provide users with a fast, interactive experience as soon as possible.
+ Strategies to improve web application performance include dynamically importing components, bundle splitting, code splitting based on routes and components, and importing on visibility.
+ Different approaches to rendering and hydration include islands architecture, progressive hydration, resumable hydration, react server components, streaming server-side rendering, and selective hydration.
+ I've highlighted the importance of performance budgets and testing on real devices.
+ I recommend a free performance pattern book you can access on patterns.dev.
Thanks you a lot!
Can anyone explain, why did he said JS is CPU bound ?
Is it genuinely a concern that programmers don't understand that some computers are limited? Are we not always at all times trying to reduce the demands our code places on hardware? If your guys can't understand the limitations, force them to work on an old machine or fire them.
Great video as always Addy!
Wanted to share something about "Resumable Hydration" mentioned on 28:42:
(For context to the other viewers, I'm part of the Qwik team, but I'll write my own POV and happy to get feedback)
I view Resumability as a different concept from hydration.
To me – Hydration is about executing JS on browser load time to attach event listeners and build the Framework + App state.
In Resumabilty – all of this happens on the server, then on client it prefetches the bits of JS the page could need to the cache.
And then on user interaction it "lazy executes" that code.
So that's why we started promoting the "JavaScript Streaming" metaphor (just like video streaming, but with more sophisticated "buffering", where it buffers based on user interaction vs compared linear buffering of a video)
So I personally prefer calling it "Resumability" instead of "Resumable hydration".
but as I said – would love to hear any feedback and other opinions.
Thanks again for this video and your incredible educational work in general!
Very useful content, insights and ideas. Thanks for sharing!
How are those magnificent slides created? The animations, colors, everything is perfect!
"Sweeping water back into the ocean" was hilarious footage, as well as a very funny analogy.
Should we really care that much about users having devices of ~30$ ?
Please don't get me wrong, I've a 150$ worth Xiaomi mobile. I am not obscenely rich and I'm not looking at anybody from a mountain's peak.
I'm just asking a question.
PS: Great video btw. You're one of guys every JS developers should follow. I'm one of your oldest followers. I discovered your blog once upon a time in 2011 while I was trying to learn how to write a jQuery plugin 🙂 That was before you joined Google Chrome team.
Great talk sir,
What are you using to animate your presentations?
Awesome! Thx