如何加快网站中图像的加载时间？

Question

我目前正在使用PHP + MySQL和jQuery开发一个网站。 到目前为止，我一直在本地计算机上执行此操作。 我注意到，当我看到该页面时，其上的图像需要花费一些时间来加载（虽然时间很少，但可见）。 所有图像都很小（PNG小于3 KB）。 现在，当我加载页面时，为了获得一些将要显示的数据，正在发生一些数据库连接。

我不确定此加载时间问题是否与映像数量或PHP脚本+ DB连接执行时间有关。 （我的数据库中的数据很少，所以我不会假设这种情况。）

我的问题是：在每个页面的开头预加载所有图像是否是一种好方法？ 我尝试用jQuery，它工作正常。 我只是不确定我可以克服哪些缺点。 例如，要这样做，我需要在页面开头包含jQuery库吗？ 我认为这是一个坏习惯。

Answer 1

如果这些PNG作为BLOB存储在数据库中（您的问题尚不清楚），请不要这样做。 通过PHP从DB提供图像的效率不如让Web服务器直接从文件系统提供图像的效率高。 如果图像绑定到特定记录，只需在行ID后面命名PNG，即可在专用于存储这些图像的目录中找到它。 然后，PHP代码仅生成指向磁盘上PNG文件的URL，因此Web服务器可以静态发送它们。

我认为在同一页面中预加载图像不会给您带来任何好处。 如果有的话，这可能会减慢表观总体页面加载时间，因为浏览器只能并发地检索固定数量的资源，通常为2-4。 在<body>的顶部加载图像意味着页面顶部“折叠上方”还有其他事情需要等待一些HTTP连接插槽释放。 最好让图像以自然顺序加载。

在两种情况下，预加载是有意义的：

• 该图像默认情况下未显示，但是随着用户与页面的交互，预计将需要该图像。 鼠标悬停和单击状态图像就可以很好地说明这一点。

• 该图像未在此页面上使用，但下一页将需要。 很好的例子是在任何页面上都有清晰的从一页到另一页的清晰显示的网站，例如购物车。

无论哪种方式，都在<body> 最底部进行预加载，以便其他所有内容都首先加载。

解决了这两个问题后，请在您的网站上运行YSlow 。 它最初是Firebug的插件，而Firebug是Firefox的插件，但此后已移植到IE以外的所有主要浏览器。

YSlow的优点在于，它仅在扩展程序处于活动状态时加载页面，即可自动检测常见的速度下降。 然后，它为页面提供了清晰的评分，因此您可以判断何时“完成”优化。 如果您低于A ，那么您还没有完成。 :)看到网站的评级为D或更差的情况并不少见，因为Web服务器的默认配置是保守的，以避免引起问题。 修复YSlow警告通常很容易，但是您必须小心避免产生缓存和其他问题，这就是默认服务器配置不执行这些操作的原因。

另一个答案是推荐使用Google PageSpeed产品。 它可以作为Chrome和Firefox的插件，服务器端的Apache模块以及Google托管的服务使用。 我不知道它与YSlow相比如何，但看起来很有趣。

还可以考虑使用浏览器的调试器来获取资源加载时间的瀑布图：

• 在Firebug中，您可以在“网络”标签中获得此信息。

• 在Safari中，您可以通过“开发”菜单进入该菜单，该菜单通常在“偏好设置”中被禁用。 如果需要，将其打开，然后说“开发”>“开始时间线录制”。 这使您进入了“网络请求”工具。 您也可以通过“开发”>“显示Web检查器”进行操作。

• 在Chrome中，说“查看”>“开发人员”>“开发人员工具”，然后转到“网络”标签。

• IE的“工具”>“开发人员工具”>“ Profiler”具有非常弱的形式。 它只是给出一个数字表，而不是一个瀑布图，因此这里有信息，但是您不能仅凭视觉扫描长条以找到最慢的资源。

Answer 2

您应该使用Google提供的页面速度插件来检查大部分时间需要加载哪些数据。 它还将显示图像的单独加载时间。

如果您使用的是许多小png，我建议您将它们组合成一个图像并通过css background属性操纵显示，因为它们是样式的一部分，而不是信息的一部分。 在这种情况下-不会加载几个图像，而是通过所有元素加载和重用一个图像。 在这种情况下，即使预加载一个图像也非常容易。

Answer 3

您是否考虑过使用CSS Sprites将所有图像合并到一个下载中？ 在线上有许多工具可以帮助您完成此任务，它将大大减少页面所需的HTTP请求数量。

确保在图像上设置了正确的Expires标头以允许对其进行缓存。

最后，看看YSlow ，它可以为您提供更多的优化技巧。