What do percents regarding above-the-fold content mean?

问题

UPD I've read related pages carefully, they doesn't answer my particular question. What do the percents mean? Well, there's an attempt at explanation:

google page insights will tell you clearly how many % of css referring the content above the fold is being loaded too late and page could have been rendered earlier.

But that is not at all clearer than what PageSpeed says. If at all correct.

I have a page with all my css inlined in the head (not much yet probably, 12K) and only one dummy external stylesheet at the end of the body tag:

<!doctype html>
<html><head>
    ...<style>...</style>...
</head><body>
    ...
    <link rel="stylesheet" href="1.css">
    <script src="..."></script>
    <script src="..."></script>
    <script src="..."></script>
</body></html>

1.css:

.not-used-selector {color: red;}

PageSpeed tells me:

Approximately 55% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Optimize CSS Delivery of the following:

https://.../1.css

What do they mean by 55%? When I remove the external stylesheet from the page, the complaint is apparently gone, but what exactly does this number mean?

回答1:

Above-the-fold content is the part of a page you can see without scrolling it down (topmost). How much is that depends on the device, browser size, you name it.

"Approximately 55% of the above-the-fold content on your page could be rendered without waiting for the following resources to load" means just that. In other words "the following resources" has css rules to be applied to 45% of that part of the page (above-the-fold content). The rest (55%) doesn't need external stylesheets. And it probably make sense to move these rules to the page itself and defer loading external stylesheets. So that above-the-fold content could be rendered without waiting for stylesheets to load. It's just that the number (45%) can be grossly inaccurate.

来源：https://stackoverflow.com/questions/45779900/what-do-percents-regarding-above-the-fold-content-mean

标签

html

css

optimization

pagespeed