faint harbor
I'm trying to implement the approach documented here: https://web.dev/defer-non-critical-css/#optimize
But I'm having trouble because it seems React doesn't support adding a string onload attribute. Plus, dangerouslySetInnerHTML would require a wrapper element, which I think is disallowed in head.
Wondering if anyone knows how to accomplish this with Remix? I assume using a non-string onload would be bad because the event handler would only be added after JS loads
Oh man, some serious hacks out there for this 😅
https://github.com/facebook/react/issues/12014#issuecomment-434534770
Welp, looks like that hack only works for the initial rendering on the server. Then hydration fails on the client because the number of elements is unexpected
worthy bridge
Here's how I make the css not block the html https://nalu.wiki/nalu/p/improving-web-vitals-in-remix-207
faint harbor
Huh, didn't realize adding both with and without preload would make the latter non-blocking!
Curious if you know why https://web.dev/defer-non-critical-css/#optimize would recommend their approach if there's a seemingly simpler option?
worthy bridge
Not too sure. I learned the trick from @turbid mural. The blog is from 2019, so maybe web standards changed for the better?