Breaking up CSS for progressive rendering

Posted on by Elliot Jackson

CSS blocks rendering, so the user is left looking a white screen until all-of-my-sites.css fully downloads.

It's common to bundle all of a site's CSS into one or two resources, meaning the user downloads a large number of rules that don't apply to the current page. This is because sites can contain many types of pages with a variety of "components", and delivering CSS at a component level hurts performance in HTTP/1.

This isn't the case with SPDY and HTTP/2, where many smaller resources can be delivered with little overhead, and independently cached.

Jake Archibald explains how to get a progressive render in Firefox, Edge/IE, and—once it has adopted the same method as Edge—Chrome.

Posted in CSS and HTTP/2