Login/Register
What do percents regarding above-the-fold content mean?
Asked Answered
Solved htmlcssoptimizationpagespeed
L

1

1

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?

Luminance answered 20/8, 2017 at 8:9 Comment(4)
The linked question and answers explain what "above-the-fold content" means. Now apply it to what PageSpeed tells you: "Approximately 55% of the above-the-fold content on your page could be rendered..." meaning that of the content that is considered above-the-fold, most of it could be rendered without external CSS but still has to wait for the external CSS to load. This should point you at opportunities to defer loading of the CSS and/or make the above-the-fold content independent of external CSS. – Arcuate
They sure answer what "above-the-fold content" is. That's not the question. PageSpeed says, that 55% of above-the-fold content could be rendered without waiting for the only external stylesheet on the page to be loaded. That means that 45% of above-the-fold content needs that stylesheet to render. Which is not at all tree. The stylesheet contains one selector that is never used. So my guess is that the number means something else. Or I don't understand the message. – Luminance
@mplungjan I've explained how my question is different. Please reopen it. – Luminance
maybe you must load images in your abf content. Try to make an inline svg or preload with a lower quality data url. – Homocentric
L
0

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.

Luminance answered 16/9, 2017 at 11:12 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.