Join us for a deep dive into web performance optimization where JavaScript execution meets real-world responsiveness. Explore the inner workings of the V8 engine, dissect TBT and long tasks, and understand the delicate balance between lab data and real-world user experiences. Discover the impact of Webpack bundling and learn actionable strategies to enhance your web app's speed and efficiency. This session bridges the gap between theory and practice, empowering you to create web applications that shine both in the lab and the wild.

What the audience will learn:

- Understand how the V8 engine processes JavaScript, allowing you to optimize your code for maximum efficiency.
- Dive deep into Total Blocking Time (TBT) and long tasks, and master techniques to minimize these bottlenecks for smoother user interactions.
- Grasp the intricacies of Webpack bundling and discover how to fine-tune it to significantly improve your web app's loading speed.
- Walk away with practical, real-world strategies that you can implement immediately to enhance your web app's speed, responsiveness, and overall user experience.

Outline:

- Intro and background, a little bit about me and a little bit about the audience, link with someone in the audience.
- Website performance and interactivity metrics (TBT and INP)
- Long tasks
- Reproducing the problem with a dummy app
- Breaking up the JS bundle and/or synchronous JS flow
- JS compilation and evaluation - under the hood of V8 engine
- Delaying global scope execution
- Bundlers and auto generated code
- Code splitting for bundlers code
- Trade offs
- Summary
- Questions