What data can be cached by the web server and browser?

Question

caching

I'm building a website.
To speed up the display of the first screen, I insert all the styles that are critical for it through style inside the head.
In order not to reduce the amount of code, I decided specific styles for specific pages, which are used only on specific pages (faq, search, etc.).
So the question is: in terms of caching this data, what would be the best thing to do?
divide into different pieces for different pages and reduce the number of code or insert all styles on all pages?

Answer 1

When everything is in one file, any change, even the smallest one, will invalidate the entire file and the browser needs to re-download even what has not changed.
From the point of view of caching, it will be better to split into separate files. But if they are too small, there will be a large overhead from network requests, so you need to select the optimal size.