Responsive & Fast

Chapter 4. JavaScript and CSS Over-Downloading

HTML references three primary types of resources: images, JavaScript, and CSS. While images account for the bulk of page bytes, CSS and JavaScript do carry their own weight, adding up to roughly 20% of page bytes. If we compare RWD sites to mdot sites, we can see that the number of requests and bytes required by an average RWD website is more than double those that an mdot site uses (Figure 4-1). Therefore, if we cut the JavaScript and CSS payload on a responsive site to mdot levels, we would reduce page weight by roughly 10%!

Figure 4-1. An average RWD website requires far more JavaScript and CSS requests and bytes than its mdot counterpart

While shaving 10% of the page bytes is a worthy goal by itself, the value of such an optimization does not end there.

CSS and JavaScript Rendering Impact

Downloading an image, while not always simple, is a fairly well contained task for a browser. Since images are static, the browser can download and process many of them in parallel, without worrying about how they’ll interact with each other or with the rest of the page. Browsers do need to prioritize when and how many images are downloaded, as they handle content for network and compute cycles, but otherwise image resources are fairly autonomous. Processing CSS and JavaScript, in contrast, is far more involved.

When downloading CSS, browsers go to great ...