Setting up Critical CSS in Sage 10: Best Practices and Recommendations?

sage
, ,
2

Hi @Dogit,

  1. How do I best integrate a tool/package like @roots/bud-criticalcss into the Sage 10 build process? bud-criticalcss has worked fine for me, despite being experimental. Conditionally enabling it based on isProduction as per the example is the way to go. You’ll find emitted styles in ./public/css/critical/<module>.<hash>.css. To make it more portable, I’ve set the src to process.env.WP_HOME, but that may not be appropriate for you. bud-criticalcss doesn’t appear to support multiple sources and multiple critical css outputs, so if you need multiple entries, may may need to come up with another approach.

  2. Once the critical CSS is generated, how do I inline it effectively in my Blade templates? AFAIK, this is a developer decision. I would use $asset->contents() to leverage Acorn to deal with your asset manifest and grab the contents. Then hook into <head> and output the <style> tags.

  3. How do I ensure that the rest of my styles (those not considered “critical”) are loaded asynchronously without causing any flicker or delay in rendering? This is a large question, and very dependent on your project. The link from Harry Roberts below touches on this.

  4. Are there any specific gotchas or recommendations when implementing this in a Sage 10 theme with Bedrock? Only one springs to mind: Try to utilise Bud as much as possible. Having build steps outside of Bud can generate friction with your workflow. If bud-criticalcss doesn’t hit the spot, reach for a Webpack plugin over some external CLI tool. Having everything driven from Bud makes builds fast and reliable, and you’ll thank yourself if you choose to go down the CI/CD path.

I found this article really useful and enjoyable: Critical CSS? Not So Fast! – Harry Roberts – Web Performance Consultant

Chrome’s performance insights is a useful tool too: https://developer.chrome.com/docs/devtools/performance-insights/

3 Likes