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

[@domaincontroller]

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

[@alexandrkalabin7645]

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

[@nope-zdvcz99]

one of the best video about CRP

[@waterislife9]

Incredible presentation. This deserves more views.

[@mgusa9372]

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

[@behruzisaev2102]

One of the best presentation on CRP!!!

[@ArtemMindsurfer]

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!

[@grbak]

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...

[@Ghummakad_bhaya]

Best explanation till today 🥂 Thanks

[@kannada_ve_USIRU]

Best video on CRP

[@justindglee]

agree

[@shellbot972]

this is the best 😄, Thanks Ilya!

[@valikonen]

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.

[@Ghummakad_bhaya]

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

[@softwareengineering101]

Excellent talk

[@saisagarsharma]

Is this content still applicable to this date?

[@pranayboreddy]

Best video ever ❤️

[@yonjah]

where can I find the last part of this talk ?

[@mrsasquatch7337]

For any future viewers, it's the video directly after on the uploaders page. kzbin.info/www/bejne/qKGxiYqugt6tfrM

[@RickBeacham]

LLya , is linode better then google compute?

[@MarquesWoodson]

How do you stream the HTML to the browser?

[@louddude]

e.g. node js streams

[@satya4866]

Good one

[@NikitaBayev]

Can you create iTunes podcast, please?

[@wangzhang723]

thank you very much!!!

[@arseniy_viktorovich]

Why in the end of 2024 we still need to worry about this bs and our devices can't just render everything in a blink now? Isn't it weird? I mean, the increase in raw chip and network performance is enormous, yet we still need to optimize layout and js. Is it the future we all waited for?

[@RickBeacham]

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.

[@theblackboxprogramming2969]

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

[@theblackboxprogramming2969]

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