Is it possible to inline critical CSS in the initial document load? #2068
-
|
In Lighthouse results for our Hydrogen app, one of the performance improvement opportunities is to render critical CSS in the initial document response. We have a primary style sheet that is loaded on each page, but this stylesheet requires an additional network hop after the server's document response. See a screenshot below of the network waterfall: First we load the initial document, then we load
In an ideal world, all content in |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
|
@frandiox would it be possible to at least add a |
Beta Was this translation helpful? Give feedback.
-
|
I think a Inlining the CSS in the document is possible, but that would require bundling the whole CSS in the worker/server bundle, which feels counterproductive. |
Beta Was this translation helpful? Give feedback.
-
|
I see, so any CSS inlined in the initial document would make it easier to hit worker bundle maximum file sizes. Would it also drag performance slightly on follow-up requests, since the worker startup time is influenced by the worker bundle size? I could still see a world where we'd want to include some CSS in the initial document so we could paint things like brand colors, skeleton states, basic layout sizing, etc. Maybe I'm not appreciating all of the perf issues here though! |
Beta Was this translation helpful? Give feedback.
-
|
@davidhousedev
Yeah, afaik the worker startup time can be affected by the size of the bundle, yes. A bit hard to measure, though.
It could make sense to include the CSS above the fold in the document and defer the rest 🤔 |
Beta Was this translation helpful? Give feedback.
-
|
Yes! I plan to bump our version sometime this week once I clear the deck of some analytics work. I'll report back 👍🏻 |
Beta Was this translation helpful? Give feedback.
-
|
At present you could roll your own cached fetch and then use We've done similar with cloudfront and a CSS file as well as some metafielded CSS content returned via an API call and an appropriate caching strategy in a server component. |
Beta Was this translation helpful? Give feedback.
-
|
Ooh! interesting. So by adding the content in |
Beta Was this translation helpful? Give feedback.
@frandiox would it be possible to at least add a
<link rel="prefetch"or something to that extracted CSS resource?