Skip to Main Content
Responsive & Fast
book

Responsive & Fast

by Guy Podjarny
August 2014
Intermediate to advanced content levelIntermediate to advanced
58 pages
1h 13m
English
O'Reilly Media, Inc.
Content preview from 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%!

CSS and JavaScript Requests on an average RWD and mdot sites
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 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Reinventing the Organization for GenAI and LLMs

Reinventing the Organization for GenAI and LLMs

Ethan Mollick
High Performance Images

High Performance Images

Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle, Mike McCall

Publisher Resources

ISBN: 9781491912935Errata