如果网页显示动态图像，有什么方法可以让网页加载得更快？

Question

我非常清楚如何优化图像的一些方法(比如使用sprites或smushit.com)。但是，如果正在加载的图像来自用户(动态)，该怎么办？这意味着我们不能把它变成一个精灵，也不能事先优化它。

例如，在一个页面上，加载了大约20个用户头像以及一些其他用户上传的照片缩略图。一些用户上传的头像大小可能在20KB-150KB之间，这会显著降低页面加载速度

Answer 1

一种可能的方法是延迟加载图像，即仅在用户的 中加载图像(并在用户滚动页面时连续加载图像)。当然，只有在图像的很大一部分是below the fold的情况下，这才会带来好处。

有许多插件可以自动延迟加载图像--可能也适用于您使用的JS框架。快速搜索应该会对您有所帮助。

Answer 2

你可以使用!YSlow --一个帮助你最小化页面加载时间的工具。以下是它使用的规则：

• 最小化HTTP请求
• 使用内容交付网络
• 避免空src或href
• 在顶部添加过期或缓存控制标头

<代码>H213<代码>H114将脚本放在底部<代码>H215<代码>H116避免CSS External

• Reduce
• 和CSS External
• Reduce

JavaScript和CSS<代码>H223<代码>H124避免Redirects

• Remove重复Scripts
• Configure ETags<代码>H229<代码>H130使AJAX Cacheable
• Use获取AJAX的数量Components
• Avoid Elements
• No 404s
• Reduce Cookie Size
• 为DOM过滤器使用无Cookie域
• 不缩放

中的图像

• 使favicon.ico变小且可缓存