Total combined CSS content size is too big (over 500KB)
This means that the URL in question has CSS resources with a total byte size greater than 500KB.
Why is this important?
It is fairly obvious that if the total downloaded CSS is too big, the browser needs to do more work parsing CSS ready against the HTML, which makes rendering slower. In some respects, 500KB is an arbitrary threshold that helps to define 'too big', but you could come up with your own threshold if you think this is too small or too large.
To give some context, if you want a URL to load within 5 seconds on a fast 3G connection (~ 1.6 Mbps), you have about 1000KB budget for ALL of your content.
What does the Hint check?
This Hint will trigger for any internal URL where the sum of the CSS resources is greater than 500KB.
How do you resolve this issue?
You can use 'lots of CSS' as a starting point for understanding why a particular set of pages do not load quickly. Dig in further by checking the individual resource files, so you can quickly see which one(s) are most contributing to the bloat, and then see if these CSS files can be optimised or replaced.
Moving beyond spot fixes, you should seek to build pages with a performance budget in mind, for each of the page templates you will require. Check the resource URLs below for inspiration.
