渲染阻塞和 CSS答案

【问题标题】：Render blocking and CSS渲染阻塞和 CSS
【发布时间】：2018-06-06 04:20:38
【问题描述】：

我想这已经被问过一次又一次，但我没有看到我正在寻找的答案。

我正在使用 HTML 文件和 CSS 文件进行一些简单的测试，试图阻止页面呈现阻塞 CSS，通过页面洞察 (google) 运行网站

现在我看到了这样的答案：

<link rel="stylesheet" href="style.20180530.css?ver=1.0" media="none" onload="if(media!='all')media='all'">

我看到过这样的答案：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="preload" onload="this.rel='stylesheet';this.removeAttribute('onload');" as="style">

这两个我都很好，对于谷歌字体！但是对于页面的主要样式来说，我认为看到一个没有样式的页面然后突然加载它们并不是一个好的用户体验。

显然，您可以通过将全部内容作为内联样式来消除 CSS 的任何阻塞，但我再次认为这不是一个好习惯，您将所有样式输出到 HTML 页面，而不是通过样式表加载它们.

我已经看到网站实际上会像这样加载样式：

<link rel='stylesheet' id='main-css'  href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />

Heres一个链接到页面洞察速度测试上。我知道该网站正在运行 wordpress。如果您查看页面源代码，它使用的和我上面使用的完全相同。

而且它们根本没有渲染阻塞...... 如何？

我在 https 我正在使用 cloudflare，我的样式表被压缩并且只有 24bytes 左右，而且我仍然遇到渲染阻塞。

为什么？
如何避免？

【问题讨论】：

您总是会遇到渲染阻塞，但这根本不是问题……这些只是简单的建议，您永远无法遵循所有这些建议。而且你永远不会获得 100% 的分数.. 你需要关注页面速度/加载

标签： css styles rendering google-pagespeed render-blocking

【解决方案1】：

作为外部请求加载的 CSS 总是渲染阻塞，你无法避免它。关于 pagespeed 洞察力的建议是，在加载内容之前不要执行任何 css 请求，以避免出现无样式效果，他们建议您在折叠前内联显示内容所需的 CSS。

您示例中的页面正是这样做的，它们内联了一些 css 内容（检查源代码并搜索 style 标记），然后，当加载内容时，它们使用 javascript 添加外部样式表。

总而言之，这是一个建议，如果您对页面的性能感到满意，您可以忽略它，如果您想遵循建议，您可以应用一些技术以自动化的方式实现这一点。

与往常一样，在 css-tricks 中，您有一篇很棒的介绍这些技术的帖子：https://css-tricks.com/authoring-critical-fold-css/

【讨论】：

不，我不认为你是正确的。源代码中没有任何 CSS 可以为折叠内容做任何样式。我能看到的唯一 style 标记正在更改 img.emoji - 你是在告诉我这会停止渲染阻塞？
好的，我看到并不总是加载相同的内容，我在谈论另一个样式标签，显示我引用的 CSS 的开发人员工具截图 imgur.com/OEjBmj5
我的猜测是他们在做某种 A/B 测试，加载的内容是随机不同的。
是的，如果它的谷歌页面速度他们正在提供内联样式？
我不知道，也许，也许只是运气和几种缓存的所有荣耀的结合

【解决方案2】：

Google PageSpeed 洞察的关键在于首屏渲染阻止。如果您检查作为页面速度测试参考链接的站点，则没有严格的内联样式 - 您是正确的。但是，他们在 <head> 内有一个 <style>...</style> 块，用于设置首屏内容的所有最重要样式。这意味着这些样式会立即呈现，并且所有其他支持的样式将很快加载 - 但您的访问者（和 Google PageSpeed）不会注意到差异。

【讨论】：