Wordpress 消除首屏内容中的渲染阻塞 JavaScript 和 CSS

Question

请提供一些修复优化 CSS 交付的提示

Answer 1

之前有人问过一个相关问题：What is “above-the-fold content” in Google Pagespeed?

首先，您必须注意，这都是关于“移动网页”的。
因此，当我正确解释了您的问题和屏幕截图时，这不适用于您的网站！

相反 - 执行 Google 在其指南中建议的一些事情对于“正常”网站来说会变得更糟。
并不是所有来自谷歌的东西都是“圣杯”，因为它来自谷歌。如果您查看他们的 HTML 标记，他们本身也不是一个好的榜样。

我能给你的最好建议是：

• 在 CSS 中设置替换元素的宽度和高度，以便浏览器可以布局元素而不必等待替换的内容！

另外，您为什么使用不同的 CSS 文件，而不是只使用一个？
额外的请求比少量的数据量更糟糕。在第一次请求之后，CSS 文件无论如何都会被缓存。

应该始终注意的事情是：

• 尽可能减少请求次数
• 尽可能降低整体页面重量

不要让您的大脑困惑于如何获得 100% 的 Google PageSpeed Insights 工具......！ ;-)

附加 1：这是 Google 向我们展示的页面，他们为 Optimize CSS Delivery 推荐的内容。

如前所述，我认为这既不现实也不对“正常”网站有意义！因为主要是当您有一个响应式网页设计时，最确定的是您使用媒体查询和其他布局样式。因此，如果您不打算先以阻塞方式加载 CSS，您将获得 FOUT（Flash Of Unstyled Text）。我真的不相信这比渲染页面至少多几毫秒“更好”！

恕我直言，Google 正在开始一个新的“炒作”（当我在 Stackoverflow 上查看所有关于它的问题时）......！

Answer 2

试试这个插件https://wordpress.org/plugins/above-the-fold-optimization/ 这将修复首屏内容。