Streaming the page out of order

The menu bar sits at the top of the layout and paints immediately — the visitor sees it right away, so there's no reason to defer it. What's expensive is the mega-panel that opens on hover: in a real site that's hundreds of lines of markup nobody looks at until they interact. So the server sends the bar (and the main content) first, and streams the hover panel last, into a marker that sits up in the header.

As before, the server streams the response in parts with an artificial delay. Hover Deals ▾ while it loads to watch the panel fill in.

Live demo

The menu bar renders straight away. Inside the Deals item, the hover panel holds a <?start>/<?end> range marker showing a "Loading…" placeholder. The bar and main content stream first; the <template for="submenu"> arrives ~1.5s later and fills the panel.

the HTML the server streams (hover panel last)

<header>
  <nav class="menu"> <!-- visible bar, painted now -->
    <a href="#">Home</a>
    <div class="menu-item">
      <a href="#">Deals ▾</a>
      <div class="submenu">
        <?start name="submenu">Loading…<?end>
      </div>
    </div>
  </nav>
</header>

<main><h1>Today's deals</h1></main>

<!-- streamed last; the hover panel nobody has seen yet -->
<template for="submenu">
  <div class="submenu-grid"> … </div>
</template>

live result (streamed)

Registering service worker…

How this works

The shell streams first: a <header> with the full menu bar (visible immediately) and the <main> content. The bar's Deals item holds the hover panel, which carries a <?start name="submenu"> range marker showing a loading state. After a ~1.5s delay the service worker streams <template for="submenu">, which fills that panel. So the part nobody sees until they hover is the only thing that arrives late.