This is just idle thinking; but I was wondering how long it'll be before a 'web page' is just a loader shell and module layout engine for resource fragments, all available at other URLs. How long until <body> contains nothing but <x-article> with <x-comments>, <x-social> and everything else being loaded async via in-built 'AJAX'? In that future, will in-the-head CSS be best, to lay out the modules immediately, prior to their content being loaded?
Let me back up.
Load speed is the number one most important factor after the content itself. Studies have born this out; the faster you can get content onto a page the happier the end user is. It beats out 'design' as a priority. After all, users don't give a damn about a super-pretty design if they never see it. Which they wont if it takes longer than a couple of seconds to load. People are getting less and less patient.
No one wants to sacrifice beauty for speed though, it's not a mutually exclusive choice; we want speed and beauty. The only way to resolve that is to go even further with Progressive Enhancement than we have; the content itself needs to be progressively enhanced. So I can see that the main article might be the only thing embedded in the body of the page. It gets that content on the screen as soon as possible. I can imagine that the CSS to lay out the modules of the page will be embedded in the head, not loaded from an external resource. It's the fastest way to get the content in the right place.
And everything after that might be loaded async. The design itself, comments, social media actions, related articles, adverts, tracking code, images… It's all non-primary content. It's all 'enhancement'.
I can see <x-tag> being used in combination with a resource URL. I can see <x-comments data-url='/fragments/article-12/comments'></x-comments> in our future <body>, a module which uses its own encapsulated 'AJAX' to grab that resource, manipulate it, lay it out, and style. In this scenario, the web-component could even decide to load nothing at all based on the width it is going to be displayed at; are those adverts pointless at 320px? Then don't even request them. No need to hide them, just literally don't request them in the first place. The asset knows how wide it'll be because the layout was already done as a core part of the web-page. If that's not a native thing it supports then we can just add another data-attribute to the <x-comments> to provide that information. Web Components as Element Queries.
It's all a bit different than what we're used to today, and I doubt that all of these idle thoughts are technically plausible. But it's a strategy that seems to me to be realistic. It's interesting to ponder if that's the direction the web might go. What do you think?