Eliminating Render-Blocking JavaScript & CSS
Eliminating the render-blocking JavaScript and CSS in above-the-fold (<head> </head>) content is good practice to increase page speed. Before a browser can display all page content, it must load all the styles (CSS), layout (JavaScript), and Html markup for that page first.Therefore, the content on the page is blocked, until all external style-sheets are downloaded.
If a script is small and can execute quickly, you can consider removing the external JavaScript, decreasing requests, and instead use inline JavaScript within the head tag to render faster page load. Nevertheless, this should be done with caution so that the increased size in html won’t bloat your code and therefore risk negative impact on page speed as well. Any JavaScript’s that are not critical should be made asynchronous and should be delayed until after the first rendering of the page.
To improve your loading time by avoiding and minimizing use of render-blocking JavaScript, it is crucial to optimize the CSS delivery as well. Eliminating the render-blocking CSS in above-the-fold content works practically the same way as with JavaScript. If the CSS is to large in the <head> tag area of your html the risk is the page will load slower, and should be considered to be placed in an external file. Inlining some of the small CSS can be done, but then again just as with JavaScript, needs to be done with caution. Good practice is to avoid inlining CSS attributes on HTML elements (<p style=...></p style), since they can lead to code duplication.
The data within above the fold content should not exceed the congestion window which usually is 14.6kB compressed, because it will have to make additional network round trips to process the data, which will slow down page load and therefore also decrease page speed.
Keep in mind, when removing render blocking JavaScript and CSS, make sure to keep above the fold concise, and make sure that any data (HTML markup, images, CSS, JavaScript) in above the fold is limited in size.
