Should I load non-main CSS at the end of the page?

Question

css

There is one CSS file with the following content (example):

#one {
  width: 50px;
  height: 50px;
  background: red;

  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}
#two {
  width: 50px;
  height: 50px;
  background: blue;

  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}

Is it possible to split this file into two parts, for example:
The one.css (main) file, the link to which is at the top of the page

#one {
  width: 50px;
  height: 50px;
  background: red;
}
#two {
  width: 50px;
  height: 50px;
  background: blue;
}

And here is two.css which is loaded at the end of the page

#one {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}
#two {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}

Or is it still not worth splitting the file into several parts?

Answer 1

Not worth it.
During the initial loading of a site or document, the style files are cached by the browser, and in the future it is no longer loaded, but the cache is used.

Answer 2

It all depends on the size of the page itself and css.
For example, I often make up landing pages. I load the main style file immediately, and move the styles for the fancybox to the end of the page, this really speeds up loading

Answer 3

Make box-shadow a separate class and add it as needed.

.shadow-class {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}

<div id="one" class="shadow-class"></div>

Answer 4

Follow the page loading logic. By including styles at the end of the page, as a result, the output will be that the user will first see your html skeleton without styles, and only after a while will your styles appear.
If styles are applied to elements that are not initially visible (for example, modal windows that are called upon clicking), then such styles can be included at the end of the file. But still, it's better not to do this, or do it only in extreme cases when CSS really slows down loading a lot and at the same time is the style of an element that is not immediately visible.