Alex Moldovan

One of the crucial elements of performance is to ship relevant content to your users as soon as possible. But in modern web applications, figuring out what to ship and what to prioritize can be hard. Framework driven applications have the big disadvantage of being pretty heavy for the initial load. 

We will start from understanding how the browser works, then we will explain what the critical rendering path is and how we can optimize it. Expect a talk full of valuable resources and ideas that one can use to improve the performance of a modern web application, with a case study on a React powered application.

2018

React Day Berlin

Optimizing the Critical Rendering Path in React

So you’re building this exciting new web application powered by 'insert your framework of choice'. But when you ship it to your users, you realize that they might have a bad experience loading the app. There are a lot of variables in the mix, from the internet connection to the performance of the device and of course to the browser of choice. The first experience with your application can be crucial in the decision to use your service or not, so better make it right! Performance is not something that you handle reactively after you ship the application, performance should be baked into your software development process and your team should embrace performance optimization techniques as part of their working culture. One of the crucial elements of performance is to ship relevant content to your users as soon as possible. But in modern web applications, figuring out what to ship and what to prioritize can be hard. We will start from understanding how the browser works, then we will explain what the critical rendering path is and how we can optimize it. Expect a talk full of valuable resources and ideas that one can use to improve the performance of a modern web application.