How to optimize critical rendering path - Learn Online

Critical Rendering Path

Lesson Details:
April 24, 2020

Video Transcription: In this video let's begin identifying and going over the most common things to be aware of that slow down your site and by the way if you're a programmer and if you've been dealing with these sorts of things some of this may be a little basic for you but if you've never tried to optimize your site before if you're never really written CSS or JavaScript or dealt with web design this should be all-new for you so the pay attention really closely because some of it is a little technical and it might be confusing I hope it won't be this video is brought to you by Appy Pie’s Academy. so the first thing to understand is that every browser follows a certain critical rendering path to render your page and what it does it builds this thing called the Dom the object a document object model it's a fancy word it's a fancy acronym don't get too intimidated by it all all that this means I'm gonna put it in very simple terms for you all that the critical rendering path and the Dom all of this stuff means is that your browser parses the HTML that your page has and it looks for certain things like scripts and images and all all the things that are in your page and somehow parses it into things that your browser can then use to display the page okay that's all it is and there's a certain path the critical rendering path is there's a certain path to doing it and it usually if you read this if you read the HTML from top to bottom that's really the path with some examples because sometimes the HTML needs to call styling files that have your styling designs you know or has to call javascript files or something like that and those are they block the rendering so CSS is basically cascading style sheets this is what gives your page the look and feel the important thing about them is that CSS files are usually externally referenced and they are they block construction which so what that means is your page literally in count went when your page encounters a CSS file that it has to externally reference it literally waits waits waits waits waits until that CSS file is fetched and only then it can resume displaying you know creating the Dom for your page and only your page only gets displayed when the Dom is created the same thing with JavaScript if your brow if your browser encounters a call to a javascript file then it makes that call and waits waits waits waits waits until your you know that the javascript is fetched and then processed and then your Dom construction can remove so you see that if you have a lot of external CSS calls javascript calls all these things can slow down your browser if you just have a few such calls they're pretty quick but they can add up they can add up because they block one another they have to wait for one to come back to you know they it's not something that is usually done simultaneously there are possibilities for this and we're going to talk about later in the course but as a default they have to wait for one another and that's the important point to take away for you is that they slow each other down they depend on each other so they can cause a lot of bottlenecks additionally things that slow down your site are large images so if you have like beautiful images.

It might take a lot of time for your browser to download so a small image that's compressed might take milliseconds to download which is which is not something that you would feel when you're as a user but if it's a beautiful large image then it might take a few seconds to download because it just takes up a lot of space and that might slow down your site so if you have a lot of these or any kind of rich content like many you know high-resolution images or videos or frames within your page or other rich content that really slows down on your site so that's also something that's pretty easy to examine and identify and you can fix that right away as well so some of these are very low hanging fruit and we'll get to all the low-hanging fruit so like within a day let's say within the first 24 hours or within your 8 hours of full work on this which is to say on your first day you can really create a lot of fixes and speed up your site quite a bit and that's exactly what we're gonna end up doing in this course the last thing I want to bring your attention to is just if you have large pages all pages these days online they have images they have videos or at least some you know they have CSS they have JavaScript or at least some combination of them so you can't get rid of all these things but what you can do is get rid of many of the unnecessary ones and make sure that a lot of these are totally needed by your page because sometimes they are causing more slowdown then they the benefit that they bring to your users so a page with a lot of text is not a problem because text is very fast to download and it doesn't block rendering but if you have a lot of other elements that take longer to download block Dom construction which is to say block rendering then you have a lot of slowdowns that are not necessarily hard to fix that's the beautiful thing about it so that's what we're gonna get into in this course now after this video it should be clear what are the typical worst offending issues are and also what the low-hanging fruit is to fix because a lot of these issues are not that hard to fix some for example JavaScript optimization issues they're they're complex and they really need advanced programming but we're not gonna get there in this course we're just gonna go for the low-hanging fruit that's like eight the 8020 rule which is we're gonna tackle the 20% of the worst offending things that are easiest to fix but they're gonna get you 80% of the way there very quickly and of course on an ongoing basis you do want to optimize further but you want to get a lot of results quickly and that's what we're gonna start doing in this course so let's let's get right to it with the next videos.

Course content