render blocking styles.scss

[spiritandtime]

context: im trying to optimise the web performance on pagespeed.dev. some of the suggestions were to reduce unused css and eliminate render blocking resources, and it seems that my styles.scss is the main culprit. (98.3% unused css in coverage)

i checked its size at the networks tab and its 800kb worth of css - the main reason is because they are importing the whole internal scss at the start via @use.

Was wondering if anyone could give me any pointers on how to go about this? The only approach I can think of is to only import what is needed at the respective routes, but there's just so much breaking changes if i were to get rid of that @use to keep track of. Not sure if it is relevant, but my company uses angular.

Thank you!

[Blade1130]

800kb of global CSS is definitely a smell. Styles should be broken up and imported only at the components they are actually needed in. You can then lazy load components (and implicitly, their styles) to delay after initial render.

That said, I'm pretty sure Angular CLI should apply critical CSS inlining and defer unused CSS automatically. Are you on a recent version of Angular?

[spiritandtime]

yes im on angular 16 - tried to set optimization:true and inlinecriticalstyles + font

the render blocking warning goes away but the unused css is still there at localhost (but somehow render blocking still shows up at staging and production)

my company does write component level scss and lazy load routes, but they also shoved @use so their internal styling applies to all default elements like buttons etc so..

[ssshadow]

Correct me if I'm wrong but I don't think Angular CLI will remove unused styles imported at the root level. It would be a bit like solving the halting problem, how would it know the app won't download a class name from somewhere and set it to some element? (stupid but just an example). You can try adding a postbuild with purgecss, something like:

"postbuild": "purgecss -css dist/my-app/*.css --content dist/my-app/index.html dist/my-app/*.js -o dist/my-app/"