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.

Component-based CSS loading

Component-based CSS loading

- [Instructor] There's another trick you can use to further improve the performance of CSS handling. This is not really a hack, it's a feature that was introduced in most browsers all the way back in 2016, but it's not a well-known feature. That convention is to load all your link elements pointing at style sheets in the head of a document, but that's not a requirement. You can, if you want to, load a link element anywhere inside the body and you get incremental CSS rendering automatically. And the great thing is this actually works in older browsers as well, all the way back to the beginning. Only difference is they just ignore this incremental loading part and load everything at the same time. This approach feels a bit weird because it's not how we usually do things, but it has benefits both for perceived performance and for development, especially when you start combining them with the things we talked about in a…

Contents