At which point is putting something into a separate file worth it performance-wise?

So I'm talking \*purely\* about website loading optimization; developer convenience, maintenance costs, everything else is absolutely not the point right now.

I understand that each HTTP request is costly, but also that the browser will cache stuff and access it instantly later, so e.g. if you reuse CSS between pages then it won't need to load at all.

So at which point is separating CSS / JS / SVGs into their own file is worth it? I understand it's always better to inline things when it's only used for that page, but if it's reused across the website? Is there a certain number of KB? E.g. if I repeat a simple 1KB SVG several times throughout the page, should i paste SVG code directly into HTML or make it a separate resource?

On a similar note, is it better to merge CSS files and make the browser load 30KB more of CSS that is necessary for other pages, so that it all gets cached and you dont load any more CSS? Or make each page load faster?

Should you in general make hurt your first website load at the cost of further pages loading significantly faster due to caching?