HTTP 档案年度网络状态报告

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

HTTP 档案查看了超过 700 万个网站,并编制了他们的年度报告,详细说明了网站的构建方式。 而且关于 2020 年网络如何变化的信息非常丰富。 事实上,这份报告更像是一本巨著,而且非常棒。 数据来自对 HTTP 档案 的查询,并被细分为多个部分,例如性能、安全和语言本身,包括人们如何编写 HTML 或 CSS。

以下是报告对他们扫描的 CSS 的说法

虽然 JavaScript 在页面重量方面的份额远远超过 CSS,但 CSS 的大小近年来一直在增长,桌面页面中位数加载 62 KB 的 CSS 代码,并且 10 个页面中就有 1 个页面加载超过 240 KB 的 CSS 代码。 移动页面在所有百分位数中使用的 CSS 代码略少,但只有 4 到 7 KB。 虽然这肯定比前几年要高,但它远不及 JavaScript 444 KB 的中位数和 10% 顶级页面 1.2 MB 的中位数。

喘不过气来! 以下是随后出现的一个令人震惊的信息

[…] 只有大约 7% 的页面将所有 CSS 代码集中在一个远程样式表中,正如我们经常被教导的那样。 事实上,中位数页面包含 3 个 <style> 元素和 6 个 (!) 远程样式表,其中 10% 的页面包含超过 14 个 <style> 元素和超过 20 个远程 CSS 文件! 虽然这在桌面端并非最佳选择,但它确实会严重影响移动端的性能,因为往返延迟比原始下载速度更重要。

我想引用整个 关于 CSS 的部分,因为其中有很多有趣的事实表明,我们作为社区,还有很多工作要做,以提高性能并传播有关 CSS 优化的良好信息。

直接链接 →