In addition to minifying and compressing CSS as we discussed in previous sections, where you put your style sheets in your document can affect page load times. CSS should be put at the top of your document, in the headers, to take advantage of progressive rendering. Progressive rendering is a technique that allows pages to be rendered as quickly as possible, keeping the user engaged and not bouncing from the page. Progressive rendering works by loading individual style sheets for separate components before they are referenced in the HTML.
You want to put yourself in your user’s shoes, considering what the most important content is to them and how to show that as soon as possible. Having the user sitting, waiting, and looking at a blank page is obviously going to create a poor user experience. Progressive rendering, used in conjunction with lazy loading, which loads content as the user scrolls, uses less bandwidth and reduces page load time.
