如果显示动态图像，有哪些方法可以使网页加载更快？答案

【问题标题】：What are some ways to make a webpage load faster if it displays dynamic images?如果显示动态图像，有哪些方法可以使网页加载更快？
【发布时间】：2011-08-25 09:51:54
【问题描述】：

我非常了解如何优化图像的一些方法（例如使用 sprites 或 smushit.com）。但是，如果正在加载的图像来自用户（动态）怎么办？这意味着我们无法将其制成精灵或事先对其进行优化。

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

【问题讨论】：

您可以使用 PHP（或您使用的任何语言）在保存时无损压缩用户上传的图像吗？它会在一定程度上解决您的尺寸问题，并且体验不会受到影响，您只需要能够进行程序化更改

标签： response-time optimization loading

【解决方案1】：

一种可能的方法是延迟加载图片，即只加载用户viewport中的图片（并在用户滚动页面时不断加载图片）。当然，这只有在图像的很大一部分是below the fold 时才会带来好处。

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

【讨论】：

【解决方案2】：

您可以使用!YSlow - 一种可以帮助您最大限度地减少页面加载时间的工具。以下是它使用的规则：

最小化 HTTP 请求
使用内容交付网络
避免空 src 或 href
添加过期或缓存控制标头
Gzip 组件
将样式表放在顶部
将脚本放在底部
避免使用 CSS 表达式
使 JavaScript 和 CSS 外部化
减少 DNS 查找
缩小 JavaScript 和 CSS
避免重定向
删除重复的脚本
配置 ETag
使 AJAX 可缓存
将 GET 用于 AJAX 请求
减少 DOM 元素的数量
没有 404s
减小 Cookie 大小
为组件使用无 Cookie 域
避免使用过滤器
不要在 HTML 中缩放图像
使 favicon.ico 小且可缓存

【讨论】：