问题标签 [render-blocking]

我有九个不同的 CSS 文件。在浏览器下载所有 CSS 文件之前，我的网站不会加载。主页甚至不需要大多数 CSS。在 JavaScript 中，你可以这样做<script async>，

但是对于样式表，最好的解决方案是什么？

我搜索了以下文章 代码笔

keithclark.co.uk

他们建议使用

或者

我有一个（（非常））具有上述主题的简单 WP 站点。

该主题在折叠上方加载了大量导致渲染阻塞的外部 .css 和 .js 文件，我确信我不会使用其中的一半。

header.php 只直接包含一些，大多数是通过 php wp_head() -tag 包含的。我正在努力找出哪些 .js 和 .css正在使用，哪些没有。还有如何完全摆脱它们，因为我觉得使用“延迟”或“异步”只是部分解决了问题。

我的网站是http://toptand.dk。请注意，我目前使用 WP Super 缓存进行压缩和自动优化，以进一步减少渲染阻塞等，这可能会使标题看起来非常不同。我宁愿真正摆脱它。

我已经阅读了很多关于如何防止渲染阻塞的文章，但没有真正解释如何处理来自 WP 模板的所有废话。

好的...所以我正在运行一个小测试来尝试从 Google PageSpeed 获得 100/100。我们有以下网站 - https://redwing.media

我还有一件事要做，那就是把 CSS 去掉（作为它的渲染阻塞内容），允许内容加载，然后使用 JavaScript 来拉入 CSS。如果我根本不加载 CSS，我会得到100/100 PageSpeed。我已经把我所有的关键 CSS 放在了头脑中。

所以，我使用谷歌推荐的在内容加载后加载 CSS 的方法（见这里） -

现在，当我运行 PageSpeed 洞察力时，我直接回到了 85/100 的移动页面速度，因为我的 screen.css 显然是渲染阻塞...

这是怎么回事？我正在使用谷歌推荐的解决方案！

这是我正在建设的网站 - https://redwing.media/

在我的项目（Preloaders.net）中，我有很多脚本，因为它是一个 Web 应用程序。没有办法拥有“一些”css和js。我将所有内容合并到一个文件中，但 Google Pagespeed 仍然习惯说删除“渲染阻止 CSS 和 JS”。所以我只是让 CSS 和 JS 与 HTML 内联显示。Google pagespeed 现在对内联 CSS 很满意，但它看起来真的很愚蠢——因为现在 JS 和 CSS 不会缓存在所有其他页面上。将 CSS 和 JS 分开几乎是没有用的，而且是不可能的，因为这对于 web 应用程序的工作是必需的。

所以现在我被撕裂了——这对用户性能来说是最好的：谷歌“愚蠢”还是渲染阻塞 css 和 js？

提前非常感谢。

“ www.couponraja.in ”具有相同域名的移动版和桌面版的不同页面。因此，我无法设置关键路径 CSS。如何解决我的动态服务网站中的渲染阻塞 CSS 问题。

问候瓢虫

任何人就如何从 Google 页面速度洞察结果中删除阻止渲染的 JavaScript 提供适当的建议。

我的网站是用 WordPress 开发的

谢谢

我想让我的用户在“浅色”主题（默认）和“深色”主题之间进行选择，这是通过添加另一个 CSS 文件提供的。

这是 JavaScript 代码。正如你所看到的，我试图在未来提供额外的主题。

这样做的问题是页面在深色主题 CSS 加载之前呈现，导致明亮的白色闪烁，我想知道如何防止。

我尝试的另一件事是在 HTML 中放置一个虚拟 LINK 元素：

然后只需修改 JavaScript 中的 href：

不幸的是，这具有相同的效果。

在加载主题 CSS 文件之前，如何说服浏览器阻止渲染？

我已经完成了谷歌页面速度测试。在报告中，它建议我删除折叠内容上方的渲染阻塞 css 资源。我知道我有 14 个外部 CSS 文件，这会导致我的页面加载延迟。那么我可以将我的 CSS 文件放在 HTML 标记的末尾还是有其他方法可以做到这一点？

目前，我正在寻找Angular 1.x版本应用程序的性能改进。当我运行 Google 页面速度时，我收到了RENDER BLOCKING STYLESHEET以优化应用程序以获得 100/100 页面分数。我发现了一些有趣的站点和节点模块来生成关键的渲染 CSS 来解决它。

收到的解决方案（适用于静态页面）：

1. 关键节点模块
2. https://jonassebastianohlsson.com/criticalpathcssgenerator/
3. 阁楼节点模块

面临问题 || 疑问（需要解决方案）：

1. 对于单页应用程序，我们如何生成内联关键 CSS。
2. 如果我们有 400 个网页（不是 SPA 的），如何为包含不同内容和模板注入的动态网站的每个页面生成关键 CSS。我们如何生成它？有可能吗？
3. 是否有任何插件或方式在页面加载时定义它会自动将页面的相应关键 CSS 注入内部样式标签。？
4. 是否可以仅在构建期间生成 400 个动态页面的站点的关键 CSS？这样它就可以很容易地注入到特定的页面
5. 我们如何为服务器端渲染页面生成关键 CSS？

提前谢谢.!! 也许问题很大:(但需要帮助.!!

看：

https://developers.google.com/speed/docs/insights/BlockingJS

谷歌在那里谈论“Render-Blocking JavaScript”，但在我看来，这个术语是不正确的、令人困惑的和误导的。这几乎看起来像“谷歌”也是不理解吗？

这一点是 Javascript 执行总是暂停/阻塞渲染并且也总是暂停/阻塞“HTML 解析器”（至少在 Chrome 和 Firefox 中）。如果是外部 js 文件，结合异步脚本标签，它甚至会阻止它！

因此，谈论通过例如使用异步来删除“阻止渲染的 Javascript”，意味着也存在非阻塞 Javascript，或者“异步 Javascript 执行”不会阻止渲染，但这不是真的！

正确的术语是：“渲染阻止下载”。使用 async 可以避免：下载 js 文件，不会暂停/阻止渲染。但是执行仍然会阻塞渲染。

另一个例子证实了谷歌似乎没有“理解”它。

我在 Firefox 和 Chrome 中对其进行了测试，它们在 5 秒后而不是在 5 秒内显示（渲染）：“一些 HTML 行，这是首屏”！！！！看起来 Google 认为在这种情况下，Javascript 不会阻塞渲染，但正如理论上所预期的那样，它会阻塞。在开始执行 js 之前，所有的 html 都已经在 DOM 中（除了 end body / html 标签），但是渲染还没有完成，将被暂停。因此，如果 Google 真的意识到了这一点，那么 Chrome 将首先完成渲染，然后再开始执行 javascript。

如果您采用上面的示例并且您正在使用：

或者

而不是内部的javascript。然后它也可以给出与上面示例相同的结果。例如：

• 如果预加载器（扫描已经下载的文件）已经下载了“delay.js”，那么在“HTML 解析器”出现在 Javascript 部分之前。
• 通常来自 Google、Facebook 等的外部文件已经存储在缓存中，因此无需下载，它们只是从缓存中获取文件。

在这种情况下（以及异步），结果将与上面的示例相同（至少在很多情况下）。因为如果没有额外的下载时间，“Javascript 执行”将/可以在前面的 html 完成渲染之前开始。

因此，在这种情况下，您甚至可以考虑将“no-cache”/“no-store”放在 delay.js（甚至额外的延迟）上，以使您的页面渲染得更快。通过强制下载（或额外延迟），您将给浏览器一些额外的时间来完成前面的 html 的渲染，然后再执行渲染阻塞 Javascript。

所以我真的不明白为什么谷歌（和其他人）使用“Render-Blocking JavaScript”这个术语，而从理论和“现实生活”的例子来看，它看起来像是错误的术语和错误的想法。我看网上没有人讨论这个，所以我不明白。我知道我很聪明（j/k），但对我来说有点奇怪，成为唯一一个有上述想法的人。