I'm just looking at optimising my site's page speed. When I view the source for the homepage of the Sun newspaper, I notice they're doing things like loading images asynchronously. But the HTML for their homepage is extremely large, about 16,000 lines. They do JS manipulation of content details after the DOM is ready, but the overall page layout grid is created entirely server-side and delivered in one go.
Is this a bad practice from a page speed point of view? Is there no benefit to showing the user a basic layout at the top of the page as quickly as possible, and injecting additional DOM nodes afterwards? The Google documentation advises you to "structure your HTML to load the critical, above-the-fold content first" and defer the rest. Isn't that what these guys should be doing?
Modern browser engines use a pipeline of streaming parsers / layout renderers. Not only that but they also do some of the steps in parallel or speculatively.
This means that they can start displaying the content while things are still arriving from the network. The total size of the HTML will not matter as much as the latency of let's say, the first KB + the essential CSS as long as there are no blocking such as the browser having to wait for synchronous javascript execution.