eCSSentially eCSSential

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

“eCSSential is a JavaScript utility that is designed to make browsers download files in a faster, more responsible manner than they do by default. Technically speaking, it is a tiny bit of JavaScript that when placed in the head of a page, determines which of your stylesheets should be loaded immediately and block page rendering (any stylesheets intended for mobile-first breakpoints that currently apply), which stylesheets should be deferred to load asynchronously (any stylesheets intended for breakpoints that don’t currently apply to the current viewport size, but could apply later, given the device’s screen size), and which stylesheets should never be loaded at all (any stylesheets intended for viewport dimensions that are larger than the device’s screen). Once sorted, the essential (or eCSSential if you will) 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.”

“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.”
–Scott Jehl

Github Demos

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

<head>

<script src="js/eCSSential.min.js"></script>
<script>
//note: using a var isn't necessary here. 
//It's useful in this example so we can collect the data
var loadCSS = eCSSential({ 
			"all"                : "css/all.css",
			"(min-width: 20em)"  : "css/min-20em.css",
			"(min-width: 37.5em)": "css/min-37.5em.css",
			"(min-width: 50em)"  : "css/min-50em.css",
			"(min-width: 62.5em)": "css/min-62.5em.css"
			});
</script>

<noscript>
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/min-20em.css">
</noscript>
</head>

Most Modern browsers allow six simultaneous requests per host and over thirty requests in total at one time. When the browsers parser encounters an external style sheet it will block further downloads until that stylesheet previous to it has finished its loading process. Javascript files are even more problematic. Internet Explorer 9 and earlier block the download of subsequent image files until a Javascript file is downloaded and executed. On top of that all browsers will stop any rendering of the page until the Javascript is processed, in case the script makes a change to our DOM.

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.

Links, glorious links

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2012/06/28