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

**URL:** https://discourse.roots.io/t/setting-up-critical-css-in-sage-10-best-practices-and-recommendations/26039
**Category:** sage
**Tags:** bud, critical-css, sage10
**Created:** 2023-09-28T21:25:53Z
**Posts:** 2
**Showing post:** 2 of 2

## Post 2 by @talss89 — 2023-09-29T10:18:23Z

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](https://bud.js.org/extensions/bud-criticalcss#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()`](https://roots.io/sage/docs/compiling-assets/) 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](https://csswizardry.com/2022/09/critical-css-not-so-fast/)

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

---

_[View the full topic](https://discourse.roots.io/t/setting-up-critical-css-in-sage-10-best-practices-and-recommendations/26039)._
