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 ...