DEV Community

Discussion on: The weirdly obscure art of Streamed HTML

Collapse
 
johnbetong profile image
John Betong • Edited

Why bother with the additional overhead of JavaScript when CSS now does the job with:
<img src=“…” loading=“lazy” alt=“#”>

Demo to be tested with tools.pingdom.com/#5fed249586400000 shows 4.4MB page load in a fraction of a second!

this-is-a-test-to-see-if-it-works....

Collapse
 
peerreynders profile image
peerreynders

The loading attribute on the <img> image embed (HTML) element deals only with the deferred loading of images.

The article discusses the streaming of the HTML page which typically means flushing the top part of the page early while the server is still assembling the bottom part, perhaps waiting for results from one or more service APIs.

That way the browser can process the document meta data (<head>) element and to start downloading any additional resources required, perhaps even offer some "top of the page search functionality" before the rest of the HTML page has even finished loading.

Marko goes even further by supporting progressive rendering with async fragments.

An example from as far back as late 2014 demonstrates this approach.