A . CSS for "Above the Fold" and another . CSS for "Below the fold" - Is it worth it?

Question

In terms of performance and maintainability it would be interesting to have 2 files css on the page, one for the content that appears before the fold and one for the content that appears after the fold?

Type:

 <link href="above.css"> (20kb)
--------------------------------
 <link href="below.css"> (200kb)

Since the requests are linear, would the upper rendering be faster? The user would see the page being mounted more quickly believe, but as it turns the loading of the second .css. When to start loading the below.css For example, can it interfere with the images that will be carried at the top of the fold? Or it will be mounted first 100% of the top and only then begins loading the bottom?

Since two requests will be made I can lose performance or it would be completely irrelevant?

Or would it be better minify all in one style sheet only style.css (above.css + Below.css) and ready?

Answer 1

Based on your doubts, I believe that the best solution taking performance into account, would be to put all the code in a single file and then minify the same. Of course, always keeping an unmminified copy as backup for future code changes.

Now the question of dividing the code into two or more files, particularly I find more organized. But we must take very good care not to start mixing up the codes that should be separated when there is a change to be made.

With respect to making more than one request to bring in multiple files there may be rather performance loss depending on the size of the files. css in the same way that can happen with . html or . js files as well. But it ends up being a little related to this issue as it will depend a lot on the user’s connection when downloading the files.