0

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

我用 HTML 文件和 CSS 文件做一些简单的测试，试图阻止页面渲染阻塞 CSS，通过页面洞察（谷歌）运行网站

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

<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' />

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

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

我在 https 我正在使用 cloudflare 并且我的样式表被压缩并且只有大约24 字节并且我仍然遇到渲染阻塞。

  1. 为什么？
  2. 如何避免？
4

2 回答 2

1

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

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

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

与往常一样，在 css-tricks 中，您有一篇关于这些技术的精彩介绍文章：https ://css-tricks.com/authoring-critical-fold-css/

于 2018-06-05T08:36:03.213 回答
0

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

于 2018-06-05T20:20:38.497 回答