Google Pagespeed Insight：“优化以下内容的 CSS 交付”。如何？答案

【问题标题】：Google Pagespeed Insight: "Optimize CSS Delivery of the following". How to?Google Pagespeed Insight：“优化以下内容的 CSS 交付”。如何？
【发布时间】：2015-02-05 01:50:01
【问题描述】：

我在 Google Page Speed Insight 上测试了我的 wordpress 网站，得分为 95/100。它建议我应该“优化 CSS 交付”1 个 css 文件：

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />

现在它与下面的所有 javascript 代码一起位于页脚中。我将它移回头部标签和相同结果之间。如何优化 css 文件的 css 传递？

【问题讨论】：

该文件中是否有一堆@import 语句？
另外，95 是一个很好的分数。您应该正确看待这一点，并努力进行改进，从而显着改善您网站的用户体验。
不，它只是一个多合一的 css 文件（style.css + print.css + mobile.css + futurecss.css = 1 个大 css 文件）。
所以您要将所有这些文件连接到一个文件中？
不，只是复制和粘贴。没有@import。

标签： wordpress pagespeed

【解决方案1】：

对于大型 CSS 文件，您需要识别并内联呈现首屏内容所需的 CSS，并将剩余样式的加载推迟到首屏内容之后。

取自：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

实际上将所有 css 放在一起并不是最好的。您应该首先调用渲染所需的样式，然后调用您的大样式表。

如果你想知道如何很好地延迟样式表，方法如下：

CSS delivery optimization: How to defer css loading?

希望我能帮到你:)

【讨论】：

【解决方案2】：

95/100 是一个很好的分数。与达到目标所付出的努力相比，达到 100 所需的更多工作将给您带来递减的回报。

但是，如果您对接近 100/100 不满意，则需要从文件中删除上述折叠 CSS 并将其包含在主题内的 <style> 块中。然后，您可以推迟加载 CSS 文件，直到页面的其余部分加载完毕，并且不再阻塞渲染。

这里是 some info I wrote，关于使用 WordPress Autoptimize 插件（包括一个 JavaScript 小书签）处理首屏 CSS 以帮助您开始查找首屏 CSS。

注意：您应该使用wp_enqueue_style() 函数来包含该脚本，而不是直接将其包含在页脚中。在我的网站上查看this article，了解如何正确地将脚本和样式排入队列。

【讨论】：

欢迎来到 Stack Overflow！请注意，当您链接到您的网站时，您必须明确说明。看看How not to be a spammer。