Put CSS at the Top

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.

lighthouse

Lighthouse

Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.

pagespeed

PageSpeed Terms

PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

yslow

YSlow

YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.