Misko Hevery - Speeding Up Your React App With Less JavaScript, React Summit 2023

Boost your React app's speed and interactivity by reducing JavaScript code and leveraging QUIC, a framework that enables island architecture and hydration strategies for faster website performance.

Key takeaways
  • Most websites are slow, and too much JavaScript is a common problem.
  • The key to fast websites is measuring functions in parameters and shipping less JavaScript.
  • Island architecture is a strategy to solve this problem, but inter-island communication is crucial.
  • QUIC is an internal framework at Google that powers Google Search and Google Photos, and it can hydrate React components.
  • The island approach with QUIC can be used to create interactive websites without much JavaScript.
  • The less JavaScript you ship, the better your startup performance, and fewer websites are achieving good startup performance.
  • Google has developed Core Web Vitals to measure the performance of websites, and most real websites are slow.
  • Web components, Angular, and React are all struggling with this issue.
  • Hydration is a process by which you find your listeners and those listeners need your state of the application.
  • Partial hydration is a technique to improve performance.
  • React can also become an island with the help of QUIC or other frameworks.
  • The goal is to create islands, but also allow communication between them.
  • Server-side rendering is not the solution, as it requires too much JavaScript.
  • Frameworks like Astro and Fresh are exploring ways to do island architecture with prioritized JavaScript.
  • Inter-island communication is key to making this approach work.
  • Party Time is a technique to move third-party scripts into web workers.
  • Web workers are a single-threaded execution environment.
  • There are different approaches to solving the inter-island communication problem, such as using annotations or registries.
  • The less JavaScript you ship, the better, and most websites are currently in the red.
  • QUIC and other frameworks can help solve this problem.
  • Building smaller, interactive applications is a key to success.
  • The amount of JavaScript shipped has been increasing over the years, which has a negative impact on performance.
  • Using micro-frontends and server-side rendering is not enough to solve the problem.
  • QUIC and other frameworks can help create a more interactive and responsive user experience.
  • The less JavaScript you ship, the better your startup performance, and the less bounce rate you have.
  • Faster websites are more interactive and responsive, and users expect more interactivity from websites.