logo标签列表

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

htmlcsscachingpage-load-time
3
我正在尝试将我购买的主题中的某些功能集成到我的网站中，以提高网站速度，并在该主题网站上发现了这个有趣的功能。
现在我面临的问题是我的CSS样式表非常庞大（220kb），加载时间很长（3-4秒）。我正在努力减少它的大小，但那是另一个故事...
当我尝试在主题开发者的网站上加载完全相同的页面时，它加载得更快。经过检查，在我的网站上，我发现开发工具中样式表的“大小”和“内容”数量几乎相同。
在开发者的页面上，大小要比内容小得多。这是否意味着只从样式表中下载在HTML中调用的元素？如果是这样，如何实现这一点，因为听起来非常有效率。
我还以为是开发者的页面在我的浏览器上缓存了内容，但我已禁用缓存，它仍然只加载部分内容。
顺便说一下，我的网站缓存可以正常工作，我只是想加快初始加载时间。
有什么想法吗？
相关图像：
禁用缓存：

一个小尺寸/内容比例的开发者网站 - http://i.imgur.com/B3uhOWF.png

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

3个回答
2
圣母F###，多亏那篇文章，我刚刚启用了GZip。 这就是我的感受： http://stream1.gifsoup.com/webroot/animatedgifs2/1365838_o.gif感谢您的优秀文章。 - user3100907
很高兴为您服务。压缩文件格式 GZip 是最好的选择！ - worldofjr
关于GZip有一个快速的问题 - 这是完全在我的服务器上，对吗？因此，客户端不需要支持文件的GZipped版本，对吗？无论他使用过时的浏览器/计算机/配置访问网站，他都将收到压缩版本，对吗？（假设我的网站可以在过时的浏览器/操作系统上运行而没有问题。） - user3100907
1
是的（大多数情况下），浏览器会识别是否支持gzip，如果服务器启用了gzip，则会发送一个经过gzip压缩的页面，否则将发送一个正常服务的页面。请参见此链接> https://developers.google.com/speed/articles/gzip - worldofjr
1
感谢用户worldofjr，我找到了答案，需要在服务器上启用GZIP。
速度惊人地提高了。
每当有人注册web托管服务时，应该要求他们阅读这个。我简直不敢相信我的网站在没有这个功能的情况下已经运行了1年，而这只需要2秒钟来启用!!!
1
在开发者页面上，大小比内容要小得多。这是否意味着仅从HTML中调用的元素会从样式表中下载？如果是，如何实现这一点，因为听起来效率非常高。
通常 CSS 不是这样工作的，即使您确实实现了这种方法，也可能不会很高效。服务器必须知道要发送哪些样式，这需要浏览器加载页面并将其列表发送给服务器，然后服务器必须生成自定义的 CSS 并将其发送回来...
当然，您可以限制CSS在不同位置的加载--这也应该这样做。但根据我的经验，这必须手动完成。
在继续之前，请考虑以下几点：
我认为200k对于样式表来说真的非常大。我所使用的大多数网站的总CSS重量可能为20k或更少。我建议您研究一下为什么您的文件如此巨大。可能出了些问题。缩小可能有所帮助，但它不会使文件大小降低一个数量级。
然而，即使它是世界上最大的CSS文件，200k也不算太大。不会达到4-5秒的大小。我现在正在处理一个整个页面重量约为350kb的网站，并使其在一秒内加载。再次强调，我怀疑其他问题已经出现了。该CSS文件的大小可能表明了某些东西，但我认为这不纯粹是下载文件所需的时间。
全局.css文件如此庞大的原因是因为这是我正在制作的一个主题。所以它们针对每个元素有可能的排列组合都有，并且命名方案很糟糕（例如，xx-section-borders-has-borders-green-outline，然后列表中有20种不同颜色的变体）。我一直在有选择地从中提取我需要的项目，并将它们集成到我的特定站点的较小的全局文件中。我的当前文件在任何压缩之前大约有63KB。而这还没有包括我的排版文件和特定插件样式表。 - user3100907
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接