Html 防止加载整个CSS样式表-仅加载所需内容？

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

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

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

---

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

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

顺便说一下，我的网站的缓存工作正常，我只是对加快初始加载时间感兴趣

有什么想法吗

相关图像：

缓存已禁用：

开发人员的网站大小/内容比例较小-

---

我的网站大小/内容比例为~1:1-

，你可以缩小你的CSS。有一些免费工具，包括Chrome的页面速度洞察

看

看起来你的CSS已经在一个缩小的文件中了，但是内容可能没有

---

---

这样人们就不会感到困惑了。解决方案是在服务器上启用gzip，您可以在上阅读更多关于gzip的内容（但仍然可以缩小css）。

多亏了用户worldofjr，我发现答案是在服务器上启用gzip

难以置信的速度增长

每当有人注册网络主机时，这应该是必读的。我不敢相信我的网站已经有一年没有这个，当它花了2秒启用

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

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

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

无论如何，在进行之前，要考虑的一些事情：

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

---

然而，即使它是世界上最大的CSS文件，200k也没有那么大。不是4-5秒大。我现在正在一个网站上工作，整个页面重约350kb，我在不到一秒钟的时间内就可以加载了。我再次怀疑出了什么问题。CSS的大小可能表明了一些东西，但我怀疑这不仅仅是文件下载所需的时间。

Holy F###感谢那篇文章，我刚刚启用了GZip。这就是我的感受：谢谢你给我邮递带来的巨大乐趣。GZip的胜利！一个关于GZip的快速问题-这在我的服务器上是100%的，对吗？所以客户端不需要支持gzip版本的文件？不管他是否使用过时的浏览器/计算机/配置访问网站，他都会收到压缩版本，对吗？（假设我的站点可以在过时的浏览器/操作系统上运行而没有问题。）是的（大多数情况下），浏览器会标识为具有gzip支持，如果服务器启用了gzip，则会发送gzip页面，否则会发送正常服务的页面。查看此>global.css文件如此庞大的原因是因为这是我正在处理的主题。因此，每个元素都有各种可能的排列，命名方案很糟糕（例如，xx部分边框有绿色边框，然后列出20种不同颜色的变体等）。我一直在有选择地把我需要的项目从那里拉出来，并将它们集成到我特定站点的一个较小的全局文件中。在进行任何压缩之前，我的当前文件大约为63KB。那是在我的排版文件和特定插件样式表之前。。。