# Significant Performance Improvement by splitting of CSS to multiple files (by @media conditions)

**URL:** https://meta.discourse.org/t/significant-performance-improvement-by-splitting-of-css-to-multiple-files-by-media-conditions/248452
**Category:** Feature
**Tags:** performance, css
**Created:** [December 10, 2022, 5:38am UTC](https://meta.discourse.org/t/significant-performance-improvement-by-splitting-of-css-to-multiple-files-by-media-conditions/248452 "2022-12-10T05:38:23Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![InPeaceWeTrust](https://avatars.discourse-cdn.com/v4/letter/i/57b2e6/32.png) [@InPeaceWeTrust](https://meta.discourse.org/u/InPeaceWeTrust)
#### Post date: [December 10, 2022, 5:38am UTC](https://meta.discourse.org/t/significant-performance-improvement-by-splitting-of-css-to-multiple-files-by-media-conditions/248452/1 "2022-12-10T05:38:23Z")

</div>

When CSS is bundled into one file, even after tree-shaking, it still contains a lot of unused CSS because of different **`@media`** contexts (mobile, tablet, desktop, dark/light/other themes, etc.).

**It’s bad for Core Web Vitals**. Splitting of CSS by `@media` conditions gives huge boost in performance.

More info on this:

> **[Split your CSS to @media-related files to improve performance significantly |...](https://nednex.com/en/split-your-css-to-media-related-files-to-improve-performance-significantly/)**
>
> Save and Share: When CSS is bundled into one file, even after tree-shaking, it still contains a lot of unused CSS because of different @media contexts (mobile, tablet, desktop, dark/light/other themes, etc.). It’s bad for Core Web Vitals: First Input...

> **[Condi­tionally adaptive CSS. Browser behavior that might improve your...](https://pepelsbey.dev/articles/conditionally-adaptive/)**
>
> Your website might be ready to adapt to any viewport. But why should users wait for irrelevant desktop styles when they load it on mobile?

> **[CSS performance optimization - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/CSS)**
>
> When developing a website, you need to consider how the browser is handling the CSS on your site. To mitigate any performance issues that CSS might be causing, you should optimize it. For example, you should optimize the CSS to mitigate...

Please consider implementing of this optimization in Discourse. Currently this problem is the thing which prevents me from switching to Discourse.

Please note what **Reduce unused CSS** and **Eliminate render-blocking resources** (which are all CSS in your case) are TOP 1 and TOP 2 recommendations for Discourse fourms by [pagespeed insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fmeta.discourse.org%2Ft%2Fmultilingual-plugin%2F142740).

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/e/0/be0703cc6e4327f6db58aaac683409c2befea60c.png)

Thank you for your amazing job!