I suggest looking at http://www.performancebudget.io/

Define your 'budget' as needed. Fix those values in some unit tests and check each newly deployed application version. Or better check the test version which will most likely be deployed into the production environment.

CSS that large should be split up with parts which are served only when necessary, rather than all at once. Here's how I break down my stylesheets:

Site-wide styles.

• These are definitely used on every single page. This is probably just the reset and fonts.

Page specific stylesheets.

• Styles placed directly in this layer don't exist anywhere else on the site.

Imported stylesheets.

• These styles are used on more than one page but are not used on ALL pages.

The CSS pre-processor I use combines all of the CSS files used on a page, but does NOT include all of the CSS used by the website. If it isn't on that page then there is no need to include it. Where I work we have ~ 800KB of styles, but a typical page might only use about 10% of that.

Other notes: Most people use component stylesheets, but where I work we do A/B and multivariate testing. This means that the same component might be styled several different ways, depending on the page it's on or the context of where it's located on the page. Because of this, I use import stylesheets instead.

Well that's pretty big, no pun intended haha. What I would do is cutting the file in parts. What I mean is perhaps you have a very big site with a lot of stuff going on and maybe a CMS, I would recommend that you call the css that you need only in the page the user is seeing. Why make him load every part of the CSS of the whole site when maybe he is just seeing the home page. That's what I would do. Hope it helps you.