How to split css (above/below fold) for best performance - html

Question

My style.css is a Render Blocking CSS.
I want to load critical css (above the fold css) as early and quickly as possible, and less important css (below the fold) later on.
How can I do it? I would have played around with different tools online if only they were scientific (that is repetitive between trails) but now I guess I want a theoretical approach.
One option is to have everything as default, that is just load the style.css as it comes even though it is render blocking. This is where I am today and I want to get away from this.
Or I could use option rel="preload" on style.css, so at least it would not render block?
Or I could split style.css into style_above_fold.css and style_below_fold.css and preload style_above_fold.css. And hopefully style_below_fold.css would not be render blocking.
Preload both style_above_fold.css and style_below_fold.css, but then maybe style_above_fold.css would not be prioritized above style_below_fold.css, and maybe that would be just like preloading the whole style.css.
Preload style_above_fold.css and put styles in style_below_fold.css as inline code instead (I have to my surprise discovered that preload css loads before inline css (or at least preload is prioritized before inline code)).
Put styles from style_above_fold.css as inline css and put the request for style_below_fold.css in the footer.
Just like 6, but instead preload style_above_fold.css. You see, if the tools online were sensitive enough, I could measure whether inline css or preload gives better performance.
Can someone advise my what to do if I want to maximize the performance?
Is it the same for JavaScript code?

Answer 1

You's should be separate each css file by feature,
ex: in homepage you should be create css file is need in homepage, not a combine style of all page in website. This will make a css file is small size and faster.
Beside you can render this css is inline your css it will useful.
If you use bootstrap or other third party, you can think about use javascript to load this file like code bellow:
function loadFile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
Usage: loadFile("your_css.css", "css")
Hope it can help!

Answer 2

One thing that makes an awesome improvement in above-the-fold content is applying a min-height: 100vh to your first section of above-the-fold content and make sure the elements aren't animated or video (unless you've optimized and lightened the video as well). That made a dramatic change in my Core web vitals.