防止加载整个 CSS 样式表 - 只加载需要的内容？

Question

我正在尝试提高我的网站速度，因为我将购买的主题的某些功能集成到我的网站中，并在所述主题的网站上发现了这个有趣的功能。

我现在遇到的问题是我的 CSS 样式表非常庞大（220kb）并且需要很长时间（3-4 秒）才能加载。我正在努力减少这种情况，但那是另一回事......

当我尝试在主题开发者的网站上加载完全相同的页面时，它的加载速度要快得多。经过检查，在我的网站上，我发现开发工具中样式表的“大小”和“内容”数量大致相同。

在开发者页面上，大小比内容小很多。这是否意味着只有在 HTML 中调用的元素才从样式表中下载？如果是的话，如何做到这一点，因为它听起来非常有效。

我还认为这是因为开发者的页面正在缓存我浏览器上的内容，但我禁用了缓存，它仍然只加载部分内容。

顺便说一句，我的网站缓存有效，我只是想加快初始加载时间。

有什么想法吗？

相关图片：

缓存禁用：

Dev 的网站尺寸/内容比例较小 - http://i.imgur.com/B3uhOWF.png

我的网站大小/内容比例约为 1:1 - http://i.imgur.com/Ymu2YRz.png

Answer 1

在我的脑海中，你可以缩小你的 CSS。周围有一些免费工具，包括适用于 Chrome 的 Page Speed Insights。

见https://developers.google.com/speed/docs/insights/MinifyResources

您的 CSS 似乎已经在一个缩小的文件中，但内容可能不是！

---

只是为了让人们不会感到困惑。解决方案是在服务器上启用 gzip，您可以在 https://developers.google.com/speed/articles/gzip 阅读更多信息（但仍要缩小您的 css）。

Answer 2

感谢用户 worldofjr，我在服务器上找到了启用 GZIP 的答案。

令人难以置信的速度提升。

每当有人注册虚拟主机时，都应该阅读该内容。我不敢相信我的网站已经 1 年没有这个了，因为它需要 2 秒才能启用！！！

Answer 3

“在开发者的页面上，大小比内容小得多。这是否意味着只有 HTML 中调用的元素从样式表中下载？如果是，如何实现这一点，因为这听起来非常高效。”

这通常不是 css 的工作方式。即使您确实以某种方式实现了它，您所描述的内容也可能不是很有效。服务器必须知道要发送哪些样式，这需要浏览器加载页面并发送到它的列表中，服务器必须生成自定义 css 并将其发送回......

你当然可以限制哪些 css 加载到哪里——而且你应该这样做。但这必须手动完成，至少根据我的经验。

无论如何，在您继续之前需要考虑一些事项：

我认为 200k 对于样式表来说真的非常非常大。我工作的大多数网站的 CSS 总重量可能是 20k。或更少。我会调查为什么你的这么大。也许出了什么问题。缩小可能会有所帮助，但它不会让你失望一个数量级。

但是，即使它是世界上最大的 CSS 文件，200k 也不是那么大。不是4-5秒大。我现在正在一个网站上工作，其中整个页面重约 350kb，我可以在一秒钟内加载它。同样，我怀疑还有其他问题。该 CSS 的大小可能表示某些东西，但我怀疑这不仅仅是文件下载所花费的时间。