Wordpress在首屏内容中消除渲染阻止JavaScript和CSS

Question

请提供一些有关修复优化CSS投放

的提示

Answer 1

以前曾询问过相关问题：What is “above-the-fold content” in Google Pagespeed?

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

恰恰相反 - 谷歌在他们的指导方针中建议的一些事情会使“正常”网站的情况变得更糟。 并非所有来自谷歌的东西都是“圣杯”，因为它来自谷歌。如果你看一下他们的HTML标记，他们自己就不是一个好的榜样。

我能给你的最好建议是：

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

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

应该经常照顾的事情是：

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

不要让你的大脑知道如何获得100％Google的PageSpeed Insights工具......！ ; - ）

增加1：以下是Google向我们展示的页面，以及Optimize CSS Delivery推荐的内容。

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

Imho Google正在开始新的“炒作”（当我在Stackoverflow上查看有关它的所有问题时）......！

Answer 2

试试这个插件https://wordpress.org/plugins/above-the-fold-optimization/ 这将固定在首屏内容上。