From the course: Developing for Web Performance

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Deferring noncritical CSS

Deferring noncritical CSS

From the course: Developing for Web Performance

Start my 1-month free trial Buy for my team

Deferring noncritical CSS

“

- [Instructor] To see how much of your JavaScript and CSS and other code is loaded unnecessarily into the browser, you can use the coverage view in the browser dev tools. You get to it by opening the dev tools, opening the settings here and going to more tools and coverage. When you open coverage, you need to reload the page and you get a visualization, immediately, of how much of the code is not being used. So anything in red here is not being used. And you can see right away that this JavaScript file has a lot of unused code and my main styles sheet also has a lot of unused code. If you then click on any of these code files, you can see a full breakdown of exactly which rules are in play and which rules are not in play. If you see anything marked in red, here, it's a rule that is not currently being used on the page. This is what Critical does, it runs this type of process and then identifies which rules are being used…

Contents