Looking to load only critical css in the head

[josephtyler]

I'm looking to build a plugin to extract css from the head and insert only the critical css. In order to do this, it seems that I would need access to all three: getHeadComponents, replacedHeadComponents, and bodyComponent in the same server rendering API functions. Reason being, I need to 1. access the inline styles in the head, 2. use those styles and the body to generate critical css, and 3. replace the head component with only critical css and a link to the external stylesheet.

First, it does not appear this is possible given the current server rendering APIs. Can anyone confirm?

Second, am I missing a more obvious path to do this?

I'm relatively new to the Gatsby world. Any help you can offer would be greatly appreciated.

[ZLevine]

Looking to do this as well.

[pieh]

There are few approaches here:

1. If we are missing APIs that do make sense to add and are not somehow incompatible - we can add them. The .html files are rendered through https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/static-entry.js where you can see how rendering happens, what we pass to gatsby-ssr APIs etc - it might be the case that we could just add APIs you need to be able to do the task you want.
2. gatsby-ssr file currently executes in the same context, which means you could hoist some things up above the gatsby-ssr extension funcitons - like for example https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-styled-components/src/gatsby-ssr.js needs reference from 1 function in the other one - hence it stores it in global map identiefied by pathname - I'm not sure if something like that would work here? Depending on execution order inside static-entry.js file it might - but I also need to add disclaimer that this is very dodgy and subject to change (likely not in v2, but in the future possibly)
3. Consider checking out https://www.gatsbyjs.com/plugins/gatsby-plugin-purgecss/ which might do what you want - I didn't use this plugin personally so can't vouch for it - but it might be worth a try?

[josephtyler]

Thanks for the response.

1. I'll take a look here, this direction looks promising.

2. I considering the hoisting pattern, and that would get us closer, but we'd still need the ability to replace head components in the final ssr API, which is not currently supported.

3. I'll check this out, thanks for the recommendation. At first glance, it seems to do part of what we need, but I can also dig into their source code and see if I can find any tips.

Thanks again!

[amalitsky]

On the same note, why is CSS in-lining done via Gatsby means? Over webpack style-loader for instance?

It took me a while to debug why all css files used by the page are being inlined into the html regardless of my webpack config.

Curious about the reasoning behind inlining-by-default approach as well. I think number of simultaneous requests is not much of an issue with recent browsers and HTTP2.

Kinda related to #28046.

[doublejosh]

In case someone else out there needs a copy-paste quick solution for an older version...

/gatsby-ssr.js

export const onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  replaceHeadComponents(
    getHeadComponents().sort((a) => (a.type && a.type === `meta` ? -1 : 0))
  );
};