{"id":362267,"date":"2022-01-27T13:47:37","date_gmt":"2022-01-27T21:47:37","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&p=362267"},"modified":"2022-01-27T13:47:39","modified_gmt":"2022-01-27T21:47:39","slug":"special-edition-css-in-web-performance","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/special-edition-css-in-web-performance\/","title":{"rendered":"Special Edition: CSS in Web Performance"},"content":{"rendered":"\n
Surprise surprise, we write about CSS quite a bit around here. It’s always interesting to think about where it sits in the pantheon of web performance. Generally, the biggest thing that is talked about with web performance is stuff like how much JavaScript is on the page (too much!) and how large media has gotten (too big!). But consider that very first paint of an uncached page. If you’ve followed industry advice and are deferring all\/most of your JavaScript, you’ll probably get that paint before it’s even all downloaded. And media (like images) don’t hold up the first paint, to begin with. But you know what does hold it up? CSS. <\/p>\n\n\n
I like that CSS is what you’d call “render blocking”. If it wasn’t, the web would either be very jerky-looking all the time, with extreme “Flashes of Unstyled Content” (FOUC). But knowing that it is, doesn’t it make sense that we try to load as little of it as we can, especially upfront? <\/p>\n\n\n\n
Lots of tools attempt to help with this. This is the whole mission of what we call “Critical CSS”<\/a>, where the only CSS that loads is that which is needed for that very first paint, and the rest is deferred. Even to the point where ideally that little chunk of CSS is in the first network packet that comes across the wire! This very site is a WordPress site, and uses the free plugin Jetpack Boost<\/a> to do it, which is impressive. <\/p>\n\n\n\n