If you’re a fan like me then you’re certainly familiar with the work of The Filament Group and more importantly Scott Jehl. I have to admit that I’m a bit overdue in my visit with this awesome tool, but I finally found some time in a dark corner to give it a shot and I wanted to share my experience. So, what the hell does this thing do? How about a brief explanation by Scott Jehl from his Github Repo.
How eCSSential Helps
“In one further improvement to browsers’ default loading behavior, stylesheets that are loaded in a blocking manner are given 8 seconds (by default) to load before they are refetched asynchonously, allowing the page to appear and be used.”
- Default eCSSential Usage
- eCSSential with concatenated CSS files
- eCSSential with IE-specific stylesheets
- eCSSential with a media query polyfill
It’s a mouthful for sure, but I think you’re starting to see where we’re going with this. Can you say speed? Can you say performance? Can you say Progressive Enhancement? Can you say Responsible Responsive Web Design? Damn you’re good. To dive a bit deeper and understand what this tool does we first have to understand certain aspects of the page load process. We should also throw in a dash of a few ecssential (get it?) geeky web terms for flavor.
When a page is requested by the client (i.e. you silly) from the server (i.e. where the file exists) a thing called an HTTP request is sent and the resource that has been requested is served. Pretty simple right? It’s your basic ask and thou shall receive policy, only now we can control the conversation. Let me explain in more detail. As soon as a page loads any resource found in the
<head> of the document blocks page rendering until that resource has completely loaded. This is what we digital geeks call single thread loading. Any resource that follows will not be requested until the resource before it has been received by the client. Huh? Well browsers are single threaded, so while a script is executing the browser is unable to start other downloads. This result is also true for stylesheets. Going back to the original statement from Scott you’ll notice this is where he really hits the nail on the head with the description.
[...]files are loaded in a way that ensures page rendering will be blocked until they’re ready. The other less-essential files are loaded in a non-blocking way, letting the page render while they are fetched.
What this means is we just saved our users from a large overhead of unnecessary loading of unused CSS. If we’re going with a mobile–first approach (and you should be) only the styles that are required are loaded in a blocking manner and the non-essential styles are loaded in a non–blocking manner. Viola!
Default Demo Code
Do your users a favor and take into account their poor connections and ask yourself “Why are we giving small screen users all of our styles anyways?” and even better yet “Why does a small screen user need the styles served immediately that are intended for larger screens?” This is how we’ll end up again at the discussion of Feature Detection and Conditionally Loading Resources. So the moral of the story kiddos is … think first and build cool shit.