当我们在浏览器中输入一个域名的时候
优化缓存,对于没有变化的网页元素,用户再次访问的时候没有必要重新下载,直接从浏览器缓存读取就可以有效减少HTTP请求数。技术层面,增加Expires Header可以告诉浏览器一个元素可以缓存的时间长度,设定Etags可以帮助浏览器确定缓存中元素是否与服务器端的元素相匹配。
使用内容分发网络(CDN,Content Delivery Network)
用户与你网站服务器的接近程度会影响响应时间的长短,把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。内容分发网络是由一系列分散到各个不同地理位置上的Web服务器组成的,它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求,例如,设定拥有最少网络跳数(network hops)和响应速度最快的服务器会被选定。对于小公司而言,很难负担CDN的成本。大型公司可以租用第三方的CDN,甚至自建CDN。
压缩网页元素
每个元素越小,下载所需的时间就越少。通过Gzip,一般可以将文本内容减少70%。通过JSMin和YUI Compressor等工具,可以将JS文件进一步压缩。此外,YSlow还提供了一个工具Smush.it(参见图2-5-4),它可以无损压缩网页中所有的图片元素。
图2-5-4Smush.it 工具的界面
我见过一些不会缩图的网站,它们通过直接在HTML中指定图片的宽高来控制图片尺寸,比如显示的尺寸是320×240,而图片的实际尺寸是2304×1728,大小是1 771KB,这种偷懒的做法简直是在自杀。
把样式表放在网页的HEAD部分
把样式表(CSS)移到网页的HEAD部分可以让页面尽快开始渲染,用户所感受到的载入速度将会变快。
把脚本文件放在网页底部
在脚本文件(JS)下载完毕之前,其后面元素的顺序显示将被阻塞,因此把脚本尽量放在底部意味着更多内容能被快速显示。脚本引起的第二个问题是它阻塞并行下载数量,HTTP/1.1规范建议浏览器在每个域名下的并行下载数不超过2个,因此当脚本文件下载时,只剩下一个下载配额可以下载其他网页元素。
把样式表和脚本放到外部文件中
将样式表和脚本直接写入到网页HTML中,可以减少文件数量,从而减少HTTP请求数,但是,这样做也增加了网页的大小。综合来看,将样式表和脚本放到外部文件中,在首次浏览之后通过缓存来减少HTTP请求数,是更优的做法。
减少DNS查询次数
当我们在浏览器中输入一个域名的时候,浏览器首先要查询DNS(域名解析系统,Domain Name System),根据DNS返回的域名与IP的对应关系来确定要向哪个IP发送HTTP请求。一般一次域名解析需要20~120毫秒。减少域名的使用可以有效减少DNS解析所花费的时间,但是由于每个域名有并行下载数的限制,Yahoo!建议使用2~4个域名以获取DNS解析时间与并行下载数的平衡。
缓存Ajax
Ajax同样也是可以被缓存的,优化缓存、压缩网页元素、减少DNS查询次数等规则同样适用于Ajax。
在提升速度时经常被忽视的一个问题是响应。对于用户的操作,不管返回结果的绝对速度是快还是慢,都要及时响应。
真实世界投射法在用户体验方面也可以给我们很多帮助。比如电梯(如图2-5-5所示)的运行速度总是不能让人满意,特别是对于等电梯的人而言。但是当用户按下电梯按钮的时候,按钮会立即点亮,告诉用户他的请求已经被接受。让我们想象一下如果电梯的按钮不会点亮会有什么问题,用户会一直按一直按,电梯没有任何响应,然后他会认为这台电梯无法沟通,转身去爬楼梯。没有响应的电梯很蠢是吗?让我们来看看Windows的桌面图标,你双击一下图标,就会打开应用程序,不知道你注意过没有,当你双击完成的时候,图标并没有任何响应(截止Windows Vista都是这样,Windows 7终于有了改善),在程序出现之前,你可能已经双击了很多次图标,而应用程序也启动了很多份。OS X系统里面则通过响应解决了这个问题,双击图标的时候,图标会立即有一个放大虚化的动画效果,告诉你双击已经被系统接受。在即时通信软件的会话窗口中输入一段文字然后发送,这段文字会立即从输入区移动到会话区,而此时这段文字还在发送中(如果发送失败则会在聊天内容展示框中提示用户),这个设计很好地提升了响应,把用户不需要了解的信息传递过程藏到了幕后。
图2-5-5电梯
响应问题之所以普遍存在,是因为大家常常把响应问题归结为性能问题。一个按钮点击之后没有响应,测试团队、产品经理和研发团队首先想到的都是系统的执行速度太慢,认为性能问题解决了,响应问题也就不是问题了。当提升系统的性能使之可以在0.1秒内响应用户操作的时候,的确可以解决响应问题,但是更多的时候(比如电梯),性能的提升是无法满足用户对响应的需求的,所以我们需要单独对待响应问题,将其与性能问题分开来看。保证一款产品的响应,只完成?
下一篇:图2-9-5植入产品的品牌