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 5. HTML Over-Downloading

By now we’ve covered the three primary resource types, leaving us with one primary gap—the HTML itself. As we’re used to seeing by now, the HTML of responsive websites is substantially bigger than that of mdot sites, averaging 41.2 KB for RWD versus 26.5 KB for mdot. While the ratio between these numbers is big, the numbers themselves are quite small compared to the overall page size. However, as the primary container for the entire page, the size and complexity of the HTML do impact the overall page performance.

DOM Bloat

As we mentioned before, browsers parse the HTML and construct the Document Object Model (DOM) from it. This DOM is essentially the page itself, and is therefore held completely in memory, supporting fast access and manipulation. Since the DOM itself does not care about styles (which are applied in the render tree), hidden parts of the DOM are still a part of it. These sections take time to parse and create, and consume memory as long as the page is loaded.

As an example, we’ll look at the Smashing Magazine website’s home page. This is a popular web development knowledge hub, and a well known responsive website. When we open http://www.smashingmagazine.com on a small screen, we’ll see that 368 out of 652 elements are hidden—roughly 56% (Figure 5-1). If we look at the byte count, we’ll again see that half the page’s HTML is hidden: 43 KB of 85 KB. If this was a dedicated mobile website, it would likely remove those HTML fragments, saving ...

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