问题标签 [render-blocking]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 消除 CSS 渲染阻塞，最好的方法
我想消除我网站上的渲染阻塞，但我做不到。我不使用外部 css 文件或字体，只使用一个大 css 文件。当我从头部 AllcontentCSS 中的 css 文件复制所有内容时，渲染阻塞从 Google Page Insights 中消失有没有办法消除渲染阻塞并在头部包含带有链接的 css 文件，而不是复制样式标签中的所有 css 或者插入 css在身体标签中？
typography - Gatsby.js：为排版主题加载 Google 字体，无需渲染阻止
我正在使用Gatsby.js及其带有Irving 主题的Typography插件。
此主题需要 Google 字体"Exo"和"Yrsa"<head> ，并在导出的静态 html 文件部分添加导入：
此导入是阻止渲染的内容，如果可能的话，对于用户和我的 Google PageSpeed Insights 分数，我都希望避免它。
我尝试使用gatsby-plugin-google-fonts并将以下内容添加到我的gatsby-config.js 中：
然而，这只是增加了第二个导入调用。我应该将它们放在静态目录中吗？即使那样，我如何配置 Typography 以仍然使用这些字体而不单独导入它们？
javascript - jquery 和 bootstrap 库的渲染阻塞
我有 index.html 文件，其中有 Jquery 库和用于在<head>标签中加载 js 的引导库，它们被报告为渲染阻塞的原因，其中jquery.min.js 需要 932 毫秒，而bootstrap.min.js 需要 765 毫秒装载。在这里，我决定在加载本文之后的页面后加载 jquery 和 boostrap 文件。但由于我还有其他依赖的 JS 文件，所以我决定创建一个 Javascript 数组并对其进行迭代以创建动态脚本标签。这是它的一部分，但页面没有加载，因为其他依赖文件没有找到 jquery 文件。
我相信这种情况正在发生，因为在 jquery.min.js 完全加载之前，其他文件被加载并因此中断。
注意：由于所有的 js 文件都来自代码库，所以使用 defer 或 async 没有意义。
下面是我在标签前页面底部使用的</body>代码。
加载页面时的错误：
请建议什么是解决渲染阻塞的正确方法，如果这是正确的方向，我如何允许 Jquery 在加载所有其他文件之前先加载
jquery - 仅在模板完全完成渲染时加载 CSS
我有一个指向 boostrap 样式表 cdn 的链接，它导致了一些渲染阻塞问题，这些问题正在根据 Google Page Speed Insights 执行我的网站性能。我通过仅采用折叠引导 css 上方所需的并将其放入“critic_bootstrap.css”文件中解决了这个问题。当页面完全呈现时，我确实想为所有其他不在首屏的样式加载该引导 CDN。我怎样才能做到这一点？我尝试在 jquery document.ready 函数中将它附加到我的文档的头部，但它似乎仍然会导致 PSI 渲染阻塞问题，就像在渲染页面之前加载它一样。
css - 渲染阻塞和 CSS
我想这已经被一次又一次地问到了，但我还没有看到我正在寻找的答案。
我用 HTML 文件和 CSS 文件做一些简单的测试，试图阻止页面渲染阻塞 CSS，通过页面洞察（谷歌）运行网站
现在我看到了这样的答案：
我见过这样的答案：
对于谷歌字体，我都很好！但是对于页面的主要样式而言，我认为看到没有样式的页面然后突然加载它们并不是一个好的用户体验。
显然，您可以通过将全部内容作为内联样式来消除 CSS 的任何阻塞，但我再次认为这不是一个好习惯，您将所有样式输出到 HTML 页面，而不是通过样式表加载它们。
我已经看到网站实际上加载了这样的样式：
这是一个指向页面洞察速度测试的链接。我知道该网站正在运行 wordpress。如果您查看页面源代码，它的使用与我上面使用的完全相同。
而且他们根本没有渲染阻塞......如何？
我在 https 我正在使用 cloudflare 并且我的样式表被压缩并且只有大约24 字节并且我仍然遇到渲染阻塞。
- 为什么？
- 如何避免？
asynchronous - 由 webfontloader 加载的谷歌字体被渲染阻塞
首先对不起我的英语。我错过了什么？我使用以下代码来防止呈现阻塞内容：
没有成功 speedtest 抱怨渲染阻塞字体（async = true）...... 我想知道是否有另一种方法可以防止这种渲染阻塞......
css - 在不使用 JavaScript 的情况下消除渲染阻塞 CSS - GoogleAMP
我在 Project 中有场景GoogleAMP，我无法CSS移出 head 标签。或者事件无法使用JavaScript. 并在页面内容加载后将其添加到 head 中。
是否有另一种方法可以满足 AMP 限制以及 GooglePageSpeed 见解。
谢谢。
css - 我是否一定需要删除“渲染阻止 CSS”
我通过 Google 的 PageSpeed 测试对我的主页进行了测试，结果我的移动设备得分为 69，桌面设备得分为 95。唯一的问题是渲染阻塞 CSS。
现在，我网站上的所有网页都在首屏。即在任何地方都没有卷轴。鉴于此，我个人觉得我不应该做任何特别的事情，因为从一开始就需要 CSS 以按照我设计的方式查看我的页面。
如果我进行异步加载或其他操作，它最终会在预期输出之前在黑白无组织页面上显示内容。
我会忽略谷歌吗？这意味着我永远不会得分 100/100，这不会影响我的 SEO 机会吗？
reactjs - 使用 Create React App 时如何隔离关键 CSS
由于无法编辑 webpack 配置文件，解决渲染阻塞 CSS 并仅使用 Create React App 加载关键 CSS 的最佳方法是什么？