性能 - 某些图像下载速度很慢
我的网站存在一些性能问题。
浏览器下载某些图像需要大量时间。
问题似乎只涉及图像（不是 js 脚本或 css），
我正在使用 Google Chrome 的开发人员工具中的网络窗格。
这些图像并不大...其中一些不到 1KB，但可能需要 30 秒以上！
下载缓慢的图像并不总是相同的......它们随着距离的不同而变化。
这个问题是来自不同地理区域的许多用户报告的...所以我不认为我的连接有问题。
开发人员工具说，有时很多时间用于接收，而另一些则很多时间用于等待
顺便说一句，我不确定这个标签是什么代表（等待、接收、阻塞、ecc） 我在谷歌上找不到官方指南，有人知道更多吗？
可能是什么问题？
I have a website that has some performance issues.
Some images need a lot of time to be downloaded by the browsers.
The problem seems to involve only images (not js scripts or css)
I'm using the Network Pane in Developer Tools of Google Chrome.
This images are not big... some of them are under 1KB but could need more than 30 seconds!
The images that are slow downloaded are not always the same... they change from istance to istance.
The problem is reported from a lot of users in different geographic areas... so I don't think about a problem with my connection.
the Developer Tools says that sometime a lot of time goes in Receiving for some others a lot of time goes in Waiting
By the way, i'm not sure about what this labels stand for (waiting, receing, blocking, ecc)
I can't find an official guide from Google, does someone knows more?
What could be the problem?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题是你有很多小图像。每张图像都需要通过 HTTP 调用下载，并包含所有标头和延迟。所以它会导致对少量数据有很多 HTTP 请求。最佳实践是使用图像精灵来降低加载图像的延迟。有了图像精灵，您只需调用一次小图像服务器即可获取所有图像。
您的解决方案是使用图像精灵。就像谷歌和 Facebook 所做的那样。这是他们的精灵，这是执行此操作的指南： CSS Sprites：图像切片之吻死亡：
The problem is you have many small images. Every single image needs to download with an HTTP call with all headers and delays. so it cause having many HTTP requests for small amount of data. The best practice is having an image sprite to lower your delay of loading images. With having image sprite you just call server for small images once and get all images.
Your solution is using image sprite. Just like what Google and Facebook does. Here is their sprites, And here is a guide for doing this: CSS Sprites: Image Slicing’s Kiss of Death: