如果显示动态图像,有哪些方法可以加快网页加载速度?

时间:2011-08-25 09:51:54

标签: response-time optimization loading

我非常了解如何优化图像的一些方法(比如使用sprite或smushit.com)。但是,如果正在加载的图像来自用户(动态)怎么办?意思是我们不能将它变成精灵或事先对它进行优化。

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

2 个答案:

答案 0 :(得分:1)

您可以使用!YSlow - 一种可以帮助您最小化页面加载时间的工具。这些是它使用的规则:

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

答案 1 :(得分:1)

一种可能的方法是延迟加载图像,即仅在用户的viewport 中加载图像(并在用户滚动页面时连续加载图像)。当然,如果图像的很大一部分是below the fold,那么这只会带来好处。

存在一堆自动延迟加载图像的插件 - 可能也适用于您使用的JS框架。快速搜索可以帮助您。