Preact-cli: Inline critical path CSS during prerender

Created on 20 Jun 2017 · 12Comments · Source: preactjs/preact-cli

Zero-config prerendering is great, but it would be awesome if critical path CSS could be inlined as well (or even just split out of the main style.css) during this process. The Critical library is built to do just this, and there is even an associated webpack plugin (although I've had some issues getting it to work well).

I realize this could add bloat to index.html, but for a simple scenario like showing an app shell and a loading spinner while the main bundle gets downloaded, it would be a huge perceived performance benefit. (As an example, this is the strategy that https://www.flipkart.com/ implements. You can see it in action in Chrome by emulating a mobile device and disabling JS.)

PS: Loving this tool otherwise!

has-fix help wanted stale

Source

ethanroday

👍2

Most helpful comment

Another interesting project: https://github.com/gajus/usus "Renders page using Chrome Debugging Protocol (CDP)"

kurtextrem on 8 Jul 2017

👍3

All 12 comments

Love the idea, and I think we could keep everyone happy by adding a flag like we do with --prerender itself, maybe even defaulting to having critical CSS inlining enabled (so it can be disabled via --no-critical-css).

developit on 22 Jun 2017

Ok just dropping a note here as I read up on deferring non-critical CSS today (here's a good article on it).

There isn't an officially spec'd way to do it, but I think this would work quite well in our case:

<html>
  <head>
    <style>/*critical CSS goes here*/</style>
  </head>
  <body>
    <link rel="stylesheet" href="/bundle.css">  <!-- in most browsers this is won't block -->
  </body>
</html>

developit on 22 Jun 2017

Also interesting: https://gist.github.com/scottjehl/87176715419617ae6994
https://www.sitepoint.com/critical-rendering-path-css-fast-loading-website/

This task probably also opens up optimizations such as uncss/ucss

kurtextrem on 3 Jul 2017

https://github.com/kriasoft/isomorphic-style-loader/

kurtextrem on 3 Jul 2017

Another interesting project: https://github.com/gajus/usus "Renders page using Chrome Debugging Protocol (CDP)"

kurtextrem on 8 Jul 2017

👍3

@reznord I know this day would come. Check out https://github.com/gajus/usus

Thanks @kurtextrem for the link

thangngoc89 on 8 Jul 2017

👍1

I'll take up this !! Self assigning !!

reznord on 10 Jul 2017

@thangngoc89 @developit How about this - https://github.com/kriasoft/isomorphic-style-loader ?

reznord on 10 Jul 2017

It looks unnesserary complicated to me. Webpack gonna have first class css support soon so we can have css splitting out of the box. What's wrong with parsing generated HTML output for classes? We only need to inline those classes. Nothing else

thangngoc89 on 10 Jul 2017

👍1

@developit / @reznord / @lukeed Could this be closed as there is a plugin now?

matthewlynch on 22 Dec 2017

👍1

Perhaps - I think we still might aim to include some rudimentary CSS inlining in the CLI out-of-the-box though.

developit on 25 Dec 2017

👍1

@thangngoc89 @developit How about this - https://github.com/kriasoft/isomorphic-style-loader ?

Isomorphic style loader uses react context. Would like to avoid adding preact context to my app unless strictly necessary.

The issue with the doing critical css prerender is that not all routes can be prerendered, so SSR routes will suffer.

The compromise for SSR would be to do prerender on as many URLs as possible and when doing SSR pick a prerendered html file with as much of the critical CSS as possible.