Skip to content

Instantly share code, notes, and snippets.

@vigneshshanmugam
Last active June 18, 2017 01:53
Show Gist options
  • Save vigneshshanmugam/04a41554e6b037a35284 to your computer and use it in GitHub Desktop.
Save vigneshshanmugam/04a41554e6b037a35284 to your computer and use it in GitHub Desktop.
Loading CSS from Multiple endpoints

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment