WEB优化Favicon请求

关于Favicon

  • 总是被命名为favicon.ico
  • 默认存放在网站web根目录。我们常常看到这样的一个请求/favicon.ico
  • 它总是显示在浏览器地址栏,网址的左边
  • 当访问一个页面的时候,不管怎么样,浏览器都会请求这个文件,即/favicon.ico
  • 可以通过在页面的<head>部分加入<link>元素来重新指定它的位置
    <link rel=”shortcut icon” href=http://www.cctv.com/favicon.ico />
  • ico格式可以是不同分辨率的图像,比如16×16, 32×32等。


WEB优化Favicon请求_第1张图片
 
上图从客户端和服务端监测,可以知道每次访问页面的时候,都会访问/favicon.ico,不管该文件存不存在(一些工具像httpwatch、firebug不会将/favicon.ico请求罗列出来)。如果/favicon.ico文件不存在,则响应404错误。图-1和图-2比较而言,图-1(404响应)反倒花费的时间更少,这是图-2需要传输favicon.ico文件,http 200响应比http 404响应更大。通常在这种情况,我们应该减少对/favicon.ico请求来达到整体优化效果。

优化Favicon

  • 确定文件/favicon.ico存在,不应该返回404错误。404错误意味着,每次访问浏览器都会重新请求一次/favicon.ico。我们应该减少这样的请求,将/favicon.ico缓存在客户端。减少不必要的http请求是web前端优化的一条重要准则
  • 设置Expires头,将/favicon.ico缓存在客户端。比如,Apache可以通过mod_expires增加这样的设置。缓存时间可以是一个月,甚至可以是一年。
        <IfModule mod_expires.c>
          ExpiresActive On
          ExpiresByType image/ico "access plus 1 year"
          ExpiresByType image/icon "access plus 1 year"
        </IfModule>
        
  • 通过<link>更新缓存。/favicon.ico名字和位置总是固定死的,如果你需要更新缓存的话,可以通过<link>元素重新指定它的位置
  • 保持较小的图片大小。虽然ico格式文件支持不同的分辨率,但是我们推荐16×16大小,并且文件大小在1kb左右。


已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐
  • —软件人才免语言低担保 赴美带薪读研!—



你可能感兴趣的:(Web,优化,favicon)