性能 - 某些图像下载速度很慢

Question

我的网站存在一些性能问题 浏览器需要大量时间下载图像。

问题似乎只涉及图像（不是js脚本或css）

我正在使用谷歌浏览器的开发人员工具中的网络窗格。

这些图片并不大......其中一些图片不足1KB，但可能需要超过30秒！

缓慢下载的图像并不总是相同的......它们从istance变为istance。

来自不同地理区域的很多用户报告了这个问题...所以我不认为我的连接存在问题。

开发人员工具表示，对于其他人而言，很长一段时间会进入接收，很多时间会进入等待

顺便说一句，我不确定这个标签代表什么（等待，接收，阻塞，ecc） 我找不到谷歌的官方指南，有人知道更多吗？

可能是什么问题？

Answer 1

问题是你有很多小图片。每个图像都需要通过带有所有标头和延迟的HTTP调用进行下载。因此它会导致对少量数据进行多次HTTP请求。最佳做法是使用图像精灵来降低加载图像的延迟。有了图像精灵，您只需为小图像调用服务器一次并获取所有图像。

您的解决方案是使用图片精灵。就像谷歌和Facebook一样。这是他们的精灵，以下是执行此操作的指南：CSS Sprites: Image Slicing’s Kiss of Death：