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

Navigation
1

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

Type: 

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

As the requests are linearly the rendering of the top would be the fastest correct? The user would see the page being assembled the faster I believe, but how do I load the second .css . When starting loading the below.css for example can it interfere with the images that will be loaded at the top of the fold? Or will it be first mounted 100% from the top and only then will the bottom loading begin?

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

Or would it be better to everything in a style sheet just style.css (above.css + below.css) and ready?

    
asked by anonymous 13.04.2018 / 17:05

1 answer

0

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

Now the question of splitting the code into two or more files, particularly I find more organized. However, you have to be very careful not to start mixing the codes that should be separated when there is some change to make.

As for making more than one request to bring multiple files, there may be loss of performance, depending on the size of the .css files the same way that can happen with .html or .js files as well. But it ends up being a bit relative to this question because it will depend a lot on the user's connection when downloading the files.

    
13.04.2018 / 17:33
ACL laravel by field How do I handle message with special characters