To site a working example, we have built a streaming layout service which composes the page from multiple endpoints(microservices).
<html>
<head>
<fragment src="http://assets.domain.com" inline>
</head>
<body>
<fragment src="http://header.domain.com">
<fragment src="http://content.domain.com" primary>
<fragment src="http://footer.domain.com" async>
</body>
</html>
All these endpoints are managed by different teams. This is converted on the fly and streamed in this way
<html>
<head>
<link rel="stylesheet" href="https://cdn.example.com/initial-polyfills.css"/>
<script src="https://cdn.example.com/bundle.js"/>
</head>
<body>
//Header
<link rel="stylesheet" href="https://cdn.example.com/header.css"/>
<script>
// For Initialising the components it depends on
require('https://cdn.example.com/someurl', () => {console.log('Header is initialised')})
</script>
<div> Content from Header </div>
// same for content fragment
// Footer
<script>
loadCSS('https://cdn.example.com/footer.css')
// Initialise the fragment
</script>
// Content from footer
</body>
</html>
Since Footer is marked as async fragment (Not visible in above the fold), We use loadCSS to load the stylesheet asychronously without blocking the render.
On comparing this with Jake's post and profiling some of the webpages, I am wondering whether its a good idea to move link headers to the head once we discover the assets or keep it in the body as it is.
For now, It works for us and I see header is painted as soon as possible followed by main content and footer in Chrome(48).
Feedbacks Welcome.