我一定需要删除 "Render Blocking CSS"

Do I necessarily need to remove "Render Blocking CSS"

我的主页通过了 Google 的 PageSpeed 测试,移动端得分为 69,桌面端得分为 95。唯一的问题是渲染阻塞 CSS。

现在,我网站上的所有网页都在首屏。即任何地方都没有卷轴。鉴于此,我个人认为我不应该做任何特别的事情,因为从一开始就需要 CSS 以我设计的方式查看我的页面。

如果我执行异步加载或其他操作,它最终会在预期输出之前在黑白无组织的页面上显示内容。

我会忽略 Google 吗?这意味着我永远不会获得 100/100 的分数,这不会影响我的 SEO 机会吗?

TL;DR — 不,您不必这样做。但在大多数情况下,它会间接提供帮助。


渲染阻止已到位以防止 FOUC

理想情况下,您应该只加载负责渲染页面 "above the fold" 的 CSS,并使用异步方法加载所有其他样式。

但是,大多数网站都将其所有 CSS 加载为渲染阻塞。为什么?因为大多数网站都没有聘请 CSS 专家来为他们的特定案例定制 CSS 加载。他们有时会为一个主题付费,但仅此而已。
从这个角度来看,主题通常不会优化,因为无法知道用户想要在首屏区域中使用哪些元素。

这是个大问题吗?

没有。

首先,所有这些仅与用户何时加载您网站的第一页有关。所有其他页面都将使用缓存的样式表(已在访问的第一页上加载)(除非您为不同的页面加载不同的样式表)。

其次,Google 会因为渲染阻塞 CSS 降低页面的 SEO 分数的一般想法在技术上是错误的。他们确实因为很多其他原因(比如可访问性、可读性和响应性问题)而受到惩罚,但不是因为渲染阻塞 CSS。


然而,两者之间存在间接关联。
Google Page Speed 是一种工具,可以告诉您如何提高页面的加载速度或给人留下页面加载速度更快的印象。

  • 如果您修复它指出的问题,页面将加载得更快或者至少看起来加载得更快
  • 如果您的页面速度或感觉更快,用户在等待您的页面加载时点击后退按钮的可能性就会降低。
    这种用户行为是 SEO 惩罚的来源。Google 将任何此类行为注册为一般 "user did not find what he was looking for on that website" 并降低用户搜索的任何页面的 SEO 分数

任何阻止用户在离开您的网站后的前 30 秒内点击后退按钮的方法(这将降低跳出率)都是对抗 SEO 惩罚的好方法。
并且......这是真的:最有效的方法之一是使您的页面加载速度更快。

其他包括:

  • 使加载过程看起来专业(为图像放置正确大小的占位符,这样页面在加载时不会跳来跳去);
  • 让 FOUC 尽可能接近 0
  • 渲染一些东西,而不是什么都不渲染
  • 如果可能,让用户大致了解页面加载了多少(以 % 为单位)
  • 使用较长页面上内容的一些基本架构来加载网站。用户将阅读架构,试图弄清楚他们是否在正确的页面上,他们不会注意到加载时间——因为你在等待时给他们一些事情做
  • 删除 "bla bla" 并尽量诚实地对待您的页面必须提供的任何内容

这一点怎么强调都不为过:老实说,它确实值得。在搜索引擎优化方面,结果存在巨大差异:
如果您的页面是关于 A 的,但您希望将其显示给寻找 B 的用户,请不要告诉他们您有 B,也不要向他们隐藏。告诉他们:
"Look, this is not B, it's A, but here are a few reasons why you should consider A instead of B."

大多数用户会阅读这些原因。特别是如果他们写得好,他们解决了真正的问题,而且他们看起来不像是在拖延时间。
一个很好的主意是将你最有力的论点放在列表中的第二或第三(如果第一个相当长则为第二,如果前两个不那么长则为第三)。
原因是:如果你把它放得更远,许多用户不会阅读过去的三个弱论点 - 他们将整个列表标记为没有说服力然后返回。
此外,如果您按照重要性的顺序排列论点,用户会意识到这一点,并且一旦他们遇到两个不令人信服的论点,他们就会认为列表的后面会变得更糟,而且,他们再次“我会点击后退按钮。 但是,如果您放置第二个或第三个参数比之前的参数更强,他们将通读整个列表,希望找到另一个。

现在,如果您的论点很有说服力,用户将选择 A 而不是 B => Win
如果没有,他们仍然会选择 B,但至少他们会稍后再做(在他们阅读你的理由之后),如果有的话,惩罚会小得多(时间越长用户在您的页面上花费的时间越少,如果他们按回键)=> 无损失

如果您可以让用户占用超过 30 秒,那么您通常在 SEO 方面非常明智。这是手头真正重要的 SEO 问题,而不是渲染阻塞本身。


最后,完全有可能创建一个页面速度得分非常低但 SEO 得分非常高的页面。这不太可能,但完全有可能。