Critical rendering path - Crash course on web performance (Fluent 2013) 

00:37 what's so critical about the CRP, a very simple example 01:21 first part 02:01 done incrementally, HTML5 parser 03:03 waiting on CSS 04:12 CSS, in 2 packets, we got the first line 05:09 finally we got the last line 05:26 next, we actually take this two trees, render trees 06:28 in fact there is no one render tree 07:05 so the idea of the CPR is exactly this 07:32 what is layout and paint 08:00 the second strategy is actually much better 08:32 a fun example, google search page, we immediately send you the header response ======================================== JavaScript ======================================== 10:02 javascript, it actually makes the things more more complicated 10:32 JavaScript can query the DOM and can also query the CSS object model 10:49 here is an example 11:20 , an arbitrary piece of something 11:40 literally it block the DOM construction and everything else 11:55 we have to fetch the JavaScript and we have to execute it before we can proceed, JavaScript at the bottom, CSS at the top 12:45 synchronous block the parse, asynchronous scripts, example, google + 13:43 the async keyword is basically a promesse, its a handshake 15:04 here is an example, JavaScript can block both the DOM and CSS 16:22 put in together, so that will helps us to speed up the initial rendering of the page 16:46 let's say we want to break the one second mobile barrier 19:18 here is an example, we have to start inlining things 20:32 a lot of JavaScript enhancing experience, jQuery 21:52 DevTools

Incredible presentation. This deserves more views.

One of the best presentation on CRP!!!

08:20 sending HTTP-headers immediately after receiving a request, before analyzing a query 09:09 deliver CSS that only needed for rendering the particular page as soon as possible, deliver later CSS for the rest part of the site. 34:00 aggregate scroll events and defer them. 35:00 split a long running function, execute it partly, then yield control to the browser for updating the screen, and finish the rest part of the function

Boy am I glad I ran across Ilya Grigorik he lays out everything so beautifully pure gold.

Best explanation till today 🥂 Thanks

this is the best 😄, Thanks Ilya!

Excellent talk

at 28:12 when you said “they viewed less stories” talking about facebooks experiment on showing 30 fps instead of 60, i was surprised a lot! we’re there stories in 2014??? i thought they first appeared in 2018 in instagram!

thank you very much!!!

Best video ever ❤️

Best video on CRP

Good one

Such a gem! But could anybody clarify one thing for me: don't browsers wait for loading all the external styles to construct CSSOM? According to the presentation it seems like dividing styles into multiple stylesheets is good for performance, but I'm not sure if I understood this part correctly...

Very interesting your PDF but Chrome developer tools are changed so fast... this is a big problem for everybody and I don't understand why they have this approach.

LLya , is linode better then google compute?

where can I find the last part of this talk ?

Can you please share this ppt with us ? would we very helpful

Is this content still applicable to this date?

How do you stream the HTML to the browser?

Can you create iTunes podcast, please?

So basically the render tree phase is where browser developers stopped refactoring their code and said look web developers this part is a very large code and it works and honestly we don't how it works so let say its a magical box okay......lets move on XD.....Great Talk

Another note from this video is: framework people, what the hell are you doing?

I'm still wondering why they can't take advantage of P2P networks to solve latency issues on cell phone networks. Especially in areas where even 3g is not available like Bolivia and Cameroon.JUst cache popular websites and save on a P2P network. Then connect to the P2P network using WIFI. THis is one way for Satellites services on sailboats to solve this problem....Just cache the web. I"m liking ANdroid's new API for WIFI networks and HTML 2.0 --> UDP.