 Hello and welcome to this first ever totally tooling mini tips with me Matt Gaunt and Addy Osmani. Hello And in this show we're going to be looking at critical rendering path specifically CSS. Yes So critical path CSS and optimizing it is all about making sure that the stuff that you're shipping down to your users make sense For the current view and that you're minimizing the number of blocking resources that might slow that stuff down So so the way that you'd normally do this for your website to find out how you're doing is if you go into DevTools Open up your network panel Select maybe like a network like a 3g or something make sure you've got this camcorder clicked Click on record and then refresh the page what this does it starts taking a set of screenshots of your website over time So once it's all done you get a whole slew of all these things And when you double click on one of the images you get to see what the first version or the first render of your page Looks like so here after 283 milliseconds. I actually have something to the screen and it's got the important content there Click through some of the frames So we've got a bar here That's basically saying that my asynchronous CSS has been loaded the additional stuff got fonts loaded in now And then we get the images and it slowly comes in and one of the things I wanted to do with this Was basically find a way of well what happens if I removed all of the additional blocking CSS One of the asynchronous CSS the stuff that I didn't actually care about and Paulers turned in some code that I originally wrote into a really nice bookmark link them when you run it You'll find any remote style sheets and just disable them. So they no longer apply to the page So here this is what my web page looks like without that CSS So if they only got the HTML with the inline styles, this is what it looks like just the important bits Baller if you happen to have a build process using npm scripts or go up or ground to whatever have you I wrote a module called critical that uses some other stuff like penthouse I mean the idea is that basically you just throw the pages that you need to generate critical path CSS at this thing It'll generate it for you in line the CSS and it takes care of a lot of the different Repetitive steps usually have to do to get this stuff set up. So check out critical Yeah, and it's also worth mentioning that you wanted to learn more about this kind of stuff Ilya Gregorik has written a super awesome set of documentation all about the critical rendering path Yeah, Ilya also has a Udacity course that he's done about critical rendering. That's pretty awesome. It's worth checking out Yeah, which you can find under these shows on web fundamentals But we'll link to that in the video sweet. Thank you