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 ...
Get Responsive & Fast now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.