I am currently working on improving our corp site optimisation with a large main.css.
My current SCSS setup is the-7-1-pattern with Webpack handling the compiling, the final main.css is 286.2KB after Minification.
This is slowing the mobile site and giving us a poor PageSpeed Insights score on Mobile at 56 (Desktop 97)
The biggest thing effecting our score on mobile is Eliminate render-blocking resources on the main.css.
I have some SCSS partials that are only used on certain pages but all are @imported in main.scss in turn all are then in main.css
Question
What is the best practice here, split the @imports into more than 1 .scss files in turn have multiple .css files and only call the .css files needed on the page being requested or is there a better way of handling this?
Breaking up your CSS into multiple CSS files and only loading the CSS files you need for a particular page will likely give you better performance than having one universal CSS file. The browser can't render the page until it has finished downloading and parsing sylesheet(s) - so loading less kilobytes of CSS is generally good for performance.
If you find that removing the partials only used on certain pages doesn't significantly change the size of main.css, check to see whether you're inlining any large resources in your CSS. Moving these resources out of the stylesheet to <img> tags (or similar) will also help with performance.
And if that still doesn't help, removing unused CSS and deferring non-critical CSS would be further optimizations to look into.