删除导致我的 WordPress 网站出现问题的渲染阻塞 JS 和 CSS
Removing render blocking JS and CSS causing issue in my WordPress website
我正在努力提高我网站的速度。我正在使用 PageSpeed Insights 检查我的网站性能，它告诉我删除渲染阻塞 java 脚本和 css。所以我做到了，并且知道它在我的网站设计中引起了问题。那么我应该怎么做才能消除渲染阻塞而不给我的网站设计带来问题。
在script标签中添加async并将css和js放在页面的最后
渲染阻塞CSS
渲染阻止 CSS 将始终显示在 Google Page Speed Insights 上，如果您为 CSS 使用外部资源。
您需要做的是将所有 'above the fold' 样式内联到网页头部的 <style></style> 标记中。
我会警告你，这并不容易，而且声称可以做到这一点的插件通常不起作用，这需要努力。
解释发生了什么：-
- 用户导航到您的站点，HTML 开始下载。
- 随着 HTML 下载，浏览器正在尝试找出如何正确呈现 HTML 的方法，并且它希望对这些元素进行样式设置。
- 一旦 HTML 下载后，如果它没有找到出现在首屏（可见页面的初始部分）的元素的样式，那么它还不能呈现任何内容。
- 浏览器查找您的样式表，一旦下载完成，它就可以呈现页面。
第 4 点是 render blocking，因为这些资源正在阻止页面呈现初始视图。
要实现这一点，您需要找出无需滚动页面即可显示的每个元素，然后找到与这些元素关联的所有样式并将它们内联。
渲染阻塞 JS
这个更容易修复。
如果您能够在外部 JS 上使用 async 属性，则使用它。
但是请注意，在很多情况下，如果您一开始就没有针对网站进行设计，这会破坏您的网站。
这是因为async会尽快下载并执行您的JS文件。如果一个脚本需要另一个脚本才能运行（即您正在使用 jQuery），那么如果它在另一个脚本之前加载，则会抛出错误。 （即您的 main.js 文件使用 jQuery 但先于它下载。您调用 $('#element') 并收到 $ is undefined 错误，因为 jQuery 尚未下载。）
如果您不具备正确实施 async 所需的知识，最好使用 defer 属性。
在 HTML 完成解析之前不会开始下载脚本。但是它仍然会按照 HTML.
中指定的顺序下载和执行脚本
我正在努力提高我网站的速度。我正在使用 PageSpeed Insights 检查我的网站性能，它告诉我删除渲染阻塞 java 脚本和 css。所以我做到了，并且知道它在我的网站设计中引起了问题。那么我应该怎么做才能消除渲染阻塞而不给我的网站设计带来问题。
在script标签中添加async并将css和js放在页面的最后
渲染阻塞CSS
渲染阻止 CSS 将始终显示在 Google Page Speed Insights 上，如果您为 CSS 使用外部资源。
您需要做的是将所有 'above the fold' 样式内联到网页头部的 <style></style> 标记中。
我会警告你，这并不容易，而且声称可以做到这一点的插件通常不起作用，这需要努力。
解释发生了什么：-
- 用户导航到您的站点，HTML 开始下载。
- 随着 HTML 下载，浏览器正在尝试找出如何正确呈现 HTML 的方法，并且它希望对这些元素进行样式设置。
- 一旦 HTML 下载后，如果它没有找到出现在首屏（可见页面的初始部分）的元素的样式，那么它还不能呈现任何内容。
- 浏览器查找您的样式表，一旦下载完成，它就可以呈现页面。
第 4 点是 render blocking，因为这些资源正在阻止页面呈现初始视图。
要实现这一点，您需要找出无需滚动页面即可显示的每个元素，然后找到与这些元素关联的所有样式并将它们内联。
渲染阻塞 JS
这个更容易修复。
如果您能够在外部 JS 上使用 async 属性，则使用它。
但是请注意，在很多情况下，如果您一开始就没有针对网站进行设计，这会破坏您的网站。
这是因为async会尽快下载并执行您的JS文件。如果一个脚本需要另一个脚本才能运行（即您正在使用 jQuery），那么如果它在另一个脚本之前加载，则会抛出错误。 （即您的 main.js 文件使用 jQuery 但先于它下载。您调用 $('#element') 并收到 $ is undefined 错误，因为 jQuery 尚未下载。）
如果您不具备正确实施 async 所需的知识，最好使用 defer 属性。
在 HTML 完成解析之前不会开始下载脚本。但是它仍然会按照 HTML.
中指定的顺序下载和执行脚本