关于折叠内容的百分比是什么意思? [英] What do percents regarding above-the-fold content mean?

查看:179
本文介绍了关于折叠内容的百分比是什么意思?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

UPD 我仔细阅读了相关页面,他们没有回答我的特定问题。百分比是什么意思?那么,有一个尝试解释:


google的网页见解会清楚地告诉你有多少%的css引用上面的内容太晚了,而且页面可能已经被渲染得太早了。

但这并不比PageSpeed所说的更清楚。如果完全正确的话。



我有一个页面,其中头部内嵌了所有css(大概不多于12K),只有一个 body标签末尾的虚拟外部样式表:

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



1.css:

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

PageSpeed讲述我:


页面上折叠内容中的大约55%可以在不等待加载以下资源的情况下呈现。尝试推迟或异步加载阻止资源,或直接在HTML中嵌入这些资源的关键部分。



优化以下CSS传递:



https://.../1.css


它们的含义是55%?当我从页面中删除外部样式表时,抱怨显然已经消失,但这个数字究竟意味着什么?解析方案

折叠内容是您无需向下滚动即可查看的页面的一部分(最上方)。这个数字取决于设备,浏览器大小,以及它的名称。



您网页上的折叠内容中的大约55%可能无法呈现等待下列资源加载意味着这一点。换句话说,以下资源的css规则适用于该页面部分的45%(上面的内容)。其余(55%)不需要外部样式表。将这些规则移到页面本身并推迟加载外部样式表可能是有意义的。因此,可以在不等待样式表加载的情况下呈现折叠内容。只是这个数字(45%)可能严重不准确。

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?

解决方案

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.

这篇关于关于折叠内容的百分比是什么意思?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆