Optimizing the Critical Rendering Path in React - Alex Moldovan

Talk recording from React Day Berlin Conference 2018 reactday.berlin
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.
Alex Moldovan
Coder, blogger and tech enthusiast in general, Alex is always eager to talk about web development, javascript and programming overall. He dedicates a lot of time to teaching others, through mentoring and coaching activities and organizing JSHeroes, the biggest JS conference in Romania.

[@domaincontroller]

05:29 performance mindset, it's start to get really technical 06:34 twitter, PWA 07:15 first paint 07:39 first contentful paint 07:56 first meaningful paint 08:32 page interactive, as soon javascript's been executed and parsed 08:55 page loaded 09:07 diagram, network 11:33 user experience, bloated, rely on javascript for everything, routing 12:24 server-side rendering 13:22 refer JavaScript 14:15 fonts 15:40 prioritize 19:35 resource hints, async, priorities, devtools 21:10 3rd parties, zendesk, doesn't minify their scripts 21:54 GDPR , USA today 22:35 HTTP/2 23:35 tools, lighthouse, gtmetrix, webpagetest.orp 25:00 more enterprise, speedcurve, calibre 25:35 additional resources

[@vickyssketch421]

Learned lot, Thanks

[@vivekmagarwal]

Excellent!!

[@mishrarahul]

Can you please provide us the medium link he is talking about techniques for server side rendering.

[@StuffyNose6070]

AT 09:55 He said the DOM will not be constructed until the resources come back. Is that correct? I thought the browser fires off requests to fetch those resources and then continues constructing the DOM tree.

[@prajitorul]

Hi, I just saw this comment :) So it's a bit more complex, but they way I understand it is: the browser fires up the requests, continues parsing the DOM, but until all the resources in the are fetched and parsed themselves (eg: css, js) the browser will not show any element on the screen.