网站上的图片数量导致加载时间过长答案

【问题标题】：amount of Images on site is causing long load time网站上的图片数量导致加载时间过长
【发布时间】：2010-02-19 23:49:59
【问题描述】：

由于加载图片的数量，我的网站有时加载速度有点慢。由于所有 png 覆盖和图标，我的主页上实际上有 61 张图片。我考虑过使用精灵或图像映射，但我真的不想这样做。我知道我的服务器只能有 2 个请求，所以如果我将图像托管在其他地方，它会加快时间，但是，这可靠吗？ Pingdom 工具说我的网站“超时”。我正在寻找一种解决方案：

A) 将我的图像分布在不同的服务器上（但缺点是我希望它在可靠的服务器上（我的！）

B) 仅使用少量图像精灵或其他 css 技术

C) ???有什么想法吗？

提前致谢。

更新 1： 我创建了 6 个子域并将我的所有图像拆分到这些子域中。您可以看到所有图片都托管在一个文件夹here 中的普通站点，并且您可以看到包含跨 6 个子域的图片的同一站点here。** 如您所见，具有跨子域图像的站点加载 WAYY 较慢。这是为什么？我不明白！

更新 2： 我打电话给我的托管公司，他们似乎认为子域解决方案无法解决问题，只会减慢速度，因为每个子域都没有唯一的 IP。我的服务器负载很高，这解释了一些滞后，但仍然存在这个图像问题。他说我最好的办法是使用亚马逊服务，所以这就是我现在要调查的。

我仍然无法理解的是某些图像文件的滞后。如果您在 firebug 中查看页面加载结果（请参阅下面的 BalusC 答案），加载某些图像需要很长的等待时间。我想知道为什么。

【问题讨论】：

您的意思是您的托管计划只允许 2 个并发 http 请求？
他可能意味着浏览器允许 2，但我认为默认值为 4 或 8。
是的，我认为这是浏览器请求限制
您有多少传出带宽以及您在哪种操作系统上托管？ Windows XP、Vista 和 Windows 7 都有 10 个客户端限制，这限制了您可以同时拥有的客户端数量。

标签： http time httpwebrequest load httprequest

【解决方案1】：

我读过的关于这个主题的最好的文章之一是：

Optimizing Page Load Time

您可能不想制作精灵（我可以理解），但最终这可能是您能做的最好的事情。跨（子）域传播请求很好，但每个请求都很昂贵（上传速度通常是电缆调制解调器连接的限制因素），并且鉴于大多数站点的用户都有空缓存体验，你真的想最小化发出的请求数。

我还没有看到您的网站，但是如果您可以通过使用 sprite 将请求数量减少一半，我的猜测是，与任何 CDN 或子域技巧相比，这将在更多平台上为您带来更大的性能提升。（有关一些数字和图表，请参阅文章。）

【讨论】：

【解决方案2】：

您应该使用多个子域，因为每个子域都被视为单独的域，因此可以同时进行更多请求。

子域可以具有指向同一目录 images/ 的（物理）符号链接

【讨论】：

哇。真的。所以如果我在我的服务器上设置了 10 个子域，并在这些子域中分割图像，它会加载得更快，对吗？
是的，但请记住，浏览器对所有请求也有一些最高总限制。因此，它可能只对最多 6 个子域有意义（或谷歌并行请求的默认上限）。
虽然我认为“正确”的做法是使用图像精灵，但这对我来说是最好的解决方案。我要试一试

【解决方案3】：

亚马逊提供 CDN 服务： http://aws.amazon.com/cloudfront/ 您可以在那里托管图像并且只需为使用的带宽付费。亚马逊 AWS 传统上相当可靠。正如@dusoft 提到的那样，您可以命名其他子域来绕过 HTTP 1.1 2 连接限制。

【讨论】：

是的，云（不仅是 Amazon AWS，还有其他）也是不错的选择。但他可能不想付钱……
如果按带宽计算，3mb 左右的图片会不会很便宜？
好吧，我开始和自己争论了......那个亚马逊网站说它是每 GB 带宽 0.15 美元。根据我的计算，每 2000 名访客只需 1 美元。那是相当便宜！我认为，假设它不是一个高流量的网站，任何人都可以管理这些成本。
对我来说，CDN 的货币成本可以忽略不计。部署增加的复杂性更为显着。我不想将文件推送到第二台服务器，除非站点足够大以证明它的合理性（以及性能提升）。当然，部署是通过脚本完成的，但是 CDN 是要配置的另一件事，另一件事可能会破坏......
我已经使用 S3 和 CloudFront 几个月了。我的账单每月在 1 美元到 2 美元之间运行，除了静态内容外，我还用它来备份几 GB 的数据。您的帐户活动会在几个小时内显示出来，如果帐单超出您的支付范围，您可以从 CDN 中提取您的内容。

【解决方案4】：

根据您的更新：

我创建了 6 个子域并将我的所有图像拆分到这些子域中。您可以在此处查看所有图片托管在一个文件夹中的普通站点，您可以在此处查看包含跨 6 个子域的图片的同一站点。

如您所见，具有跨子域图像的站点加载速度较慢。这是为什么？我不明白！

我检查了Firebug的network panel：

这是“正常”网站：

(full image here)

这是“改进”的网站：

(full image here)

明显好很多（同时请求更多），但是有很多绿色大条表示“正在连接”（大约 9 秒），浏览器正在等待与服务器连接。因此，问题更多出在服务器上。看起来Keep-Alive 有问题，Apache HTTPD 服务器配置了KeepAliveTimeout 10 左右。尝试通过KeepAlive off为这些虚拟主机禁用Keep-Alive，看看会发生什么。

【讨论】：

我对此不太有经验。当我测试它时，我会遇到超时，尽管最终会加载所有图像。它似乎是我的服务器，它是主机 gator。我想我会给他们打电话的。奇怪的是，每次都是相同的文件导致阻塞。有任何想法吗？谢谢巴鲁斯
协议开销可能会导致这种情况。但根据您更新的问题，我确信服务器还有其他问题（例如它允许的并行请求数量等）
见上面的更新。托管公司似乎认为服务器很好。 Firebug 告诉我“改进的站点”更好，但我的托管公司和我的时钟说“正常站点”加载速度更快。我不知道是什么导致了这种滞后，托管公司也没有真正提供帮助。我认为 Amazon S3 将解决我所有的问题。
因此，服务器配置不在您的控制范围内？那我们也做不了什么。或者.. 它有 PHP 功能吗？然后，您可以尝试通过 PHP 脚本提供静态文件，该脚本修改响应标头以包含 Connection: close。看看有没有帮助。
不，服务器配置在我的控制范围内，我只是没有修改设置所需的知识。我对这类东西不熟悉，所以我需要更一步一步的说明。如果你能详细说明一下，那将有很大帮助。谢谢巴鲁斯，你的帮助。当我提到您的建议时，hostgator（我的托管公司）似乎不知道我在说什么。

【解决方案5】：

Google 有一个名为Page Speed 的工具。根据他们的描述：

Page Speed 在一个网站的网络服务器配置和前端代码。这些测试基于一组已知的最佳实践提高网页性能。

Page Speed 对每个页面进行评分，并就如何提高其性能提出建议。不确定此工具是否能帮助您解决等待时间过长的具体问题，但可能值得一试。

他们还有一些关于性能最佳实践的docs，例如最小化往返时间。

【讨论】：