网站优化-CSS和图像
我正在优化一个高流量网站。我正在开发的网站有很多小部件 - 比如说 20 个左右，默认情况下只加载 7 个。我正在考虑将我的 CSS 和图像精灵分开，以加快默认小部件的加载时间。
对于其余的非默认小部件，我正在考虑为每个小部件创建一个单独的 css 文件和图像精灵。这样，当用户选择非默认小部件时，我可以动态注入该特定小部件的 CSS 文件。
我的问题是 - 您认为这样做可以吗？或者可能对优化更不利，因为我现在会有更多的 HTTP 请求，因为非默认小部件将有自己的 css 和图像精灵文件？但显然，现在文件大小也会减小。
想法？或者还有其他人解决过同样的问题吗？
I'm in the process of optimizing a high traffic site. The site I am working on has many widgets - say 20 or so and only 7 are loaded by default. I was thinking of separating my css and image sprites for faster load times for the default widgets.
For the rest of the non-default widgets, I was thinking of having a separate css file and image sprite for each and every one. This way, when a user selects a non-default widget, I could dynamically inject the CSS file for that particular widget.
My question is - do you think this is OK to do or potentially worse for optimization since I would have more HTTP requests now since the non-default widgets would have their own css and image sprite files? Obviously though, the file sizes now would be cut down too.
Thoughts? Or anyone else who tackled the same issue?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
好吧，最终这取决于数学，只有你才能回答:)这将取决于实际数字的样子。
从您所描述的内容来看，将默认小部件的精灵保存在一个文件中听起来很明显。
至于非默认小部件，如果您有技术手段，可以尝试分析您的使用统计信息。哪些非默认小部件使用得最多？是否有一些在要求方面明显与众不同？然后构建一张包含所有必要精灵的图像，并为其余图像保留单独的图像。
还要考虑成本效益比是否真的好。从长远来看，制定和使用 CSS 精灵会增加维护成本，因为更新图形变得比以前更加困难。现在减少请求数量是一项非常重要的优化技术，但还有其他因素。也许不使用精灵节省的时间和金钱可以更好地用在其他地方，例如提高网站的可用性或为服务器购买新的 RAM。
Well, in the end that's down to mathematics and something only you can answer :) It will depend on what the actual numbers look like.
Keeping the default widgets' sprites in one file sounds obvious from what you describe.
As for the non-default widgets, If you have the technical means to do so, you could try analyzing your usage statistics. Which of the non-default widgets are being used the most? Are there some that stand out strongly from the others in terms of requests? Then build one image with all the necessary sprites for those, and keep separate images for the rest.
Also take into consideration whether the cost-benefit ratio is really good. Working out and using CSS sprites can increase maintenance costs in the long term, as updating graphics becomes a more difficult task that it was before. Now reducing the number of requests is a very important optimization technique, but there are other factors as well. Maybe the time and money saved by not using sprites could be better used somewhere else, like in improving the site's usability or buying new RAM for the server.