Is this the right approach to include css?

Question

css

Hello, tell me please. I am optimizing a website. I extracted the critical css using the tool critical, as a result, I embed the critical css into the tag <style>...</style>on the page.
And not critical, I connect via link:

<link href="home.css" media="print" onload="this.media='all'; this.onload=null;" rel="stylesheet">

And now I have doubts about the correctness of the fact that I have a separate file of non-critical styles for each page, which I connect via a link. For the main one, this is

home.css
For the product page - product.css
For the contacts page - contacts.css

.css will have styles that will be in the tag <style>...</style>, although this may not be a strong problem, in general, to be honest, I'm already a little confused about how best and what will be more efficient.

Please tell me how to do it better, thanks in advance for the answer

Answer 1

In general, this option is more correct:

<link type="text/css" rel="preload" as="style" href="home.css" onload="this.rel='stylesheet'"/>
<script>
// Firefox не грузит стили с preload автоматически, 
// поэтому в конец HTML-кода нужно добавить такое (один раз):
if (navigator.userAgent.indexOf("Firefox")>=0){
var elms = document.querySelectorAll('link[rel=preload][as=style]');
for (i=0; i<elms.length; i++){
elms[i].rel="stylesheet";}}
</script>

Whether it is worth sharing styles is difficult to answer unequivocally. When there are many files, and some of the styles are duplicated, it is more difficult to make changes (you have to duplicate them in each file), but less traffic for the user and better download speed. Accordingly, here you need to look at how much the size of separate files is smaller than that of the common one. If 2-3 times, and the site rarely needs to be modified, then it can be divided. If something is being completed on the site every now and then, then it’s better to get by with one app.css.
And one more thing: those styles that are described in the tag