一流的网站用户体验:响应设计提升网页打开速度

        用户是否喜欢一款产品，取决于他使用产品获得的好处，也取决于他在产品中获得的体验，两方面都是用户价值所在，缺一不可。

        最近在读王坚的《结网》，正看到网站用户体验的章节，收获很多。今天成文一篇，就当是阅读笔记了。

        关于网站用户体验的方法论有很多，这里引用王坚的一个简单易记的说法，用户体验三要素：别让我等！别让我想！别让我烦！针对这三个要素，我准备用3个篇幅来完成，今天先讲第一个：别让我等。

        为什么迅雷在下载软件中独树一帜？为什么越来越多的用户在低画质的视频网站上在线观看连续剧，而不是下载更清晰的视频文件？答案是：用户的耐心非常有限，用户对速度的追求远远超过了对画质等因素的追求。

      回到网站运营问题上，你是否有在全国各地都测试过，访问打开你的网站需要几秒？

     曾有很多研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。也许这样讲，各位还不会有太多感触，接下来，我列举一组数据：Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%；Amazon每增加100ms网站延迟将导致收入下降1%；雅虎如果有400ms延迟会导致流量下降5-9%。

       怎么样？现在感受如何？是不是该马上去做测试工作呢。

       这时候你也许会问：什么原因会导致网站打开慢？有什么办法解决呢？别急，我一一道来。以下内容有些偏技术层面，各位需要耐心阅读。

      1、减少HTTP请求数

       用户在打开一个网页的时候，后台程序响应用户所需的时间并不多，用户等待的时间主要花费在下载网页元素上了，即HTML、CSS、JavaScript、Flash、图片等，统计显示，每增加一个元素，网页载入的时间就增加25-40毫秒（取决于用户的带宽情况）。

       所以，想要提高网页打开速度，就要减少HTTP请求数，方法有3种：

      1）减少不必要的HTTP请求，例如用CSS圆角代替圆角图片，减少图片的使用。

       2）合并文件，对于文本文件，可以直接合并内容。例如将多个JS（JavaScript的简称）文件合并成一个，将多个CSS文件合并成一个。

       3）优化缓存，对于没有变化的网页元素（如页头、页尾等），用户再次访问的时候没有必要重新下载，直接从浏览器缓存里读取就可以了。

      2、使用CDN（Content Delivery Network，内容分发网络）

       CDN由一系列分散到各个不同地理位置上的Web服务器组成，它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。当你的网站图片很多事，就一样要使用CDN了，比如现在的电商网站，几乎都在使用CDN。

        3、压缩网页元素

        网页中的每个元素越小，下载所需的时间就越少，这个很好理解。现在比较成熟和流程的压缩网页的方式，是通过Gzip，我自己的实操经验来看，一般可以将网页文本内容减少70%以上。

        4、样式表放在网页Head部分

       这也是我实际操作过的案例，把样式表（CSS文件）移到网页的Head部分，可以提高页面的加载速度，让页面元素顺序显示。

       5、把JS文件放到网页底部

       网页打开时，所有元素是顺序显示的。由于JS文件的特殊性，其相比其他元素来说，会加载的很慢，在JS文件下载完成之前，其他后面元素的顺序显示将被阻塞，因此把JS文件尽量放在底部，意味着内容能被快速显示。

         6、把样式表和JS脚本放到外部文件中

        尽管将样式表和JS脚本直接写入网页HTML中，可以减少外部文件调用数量，但是，这样做会增加网页的文件大小。综合来看，将样式表和JS脚本放到外部文件中，也许用户首次访问时会有点慢，但是后续在访问网站时，用户直接通过浏览器缓存就可以用，从而达到减少HTTP请求数的目的，为最优的做法。

         写在最后的话：

       在提升网页打开速度经常被忽视的一个问题是响应。对于用户来说，每次的操作，不管返回结果是慢，还是快，都要及时予以响应，最典型的例子就是：当用户点击打开一张图片时，是否有百分比数字显示的进度条，就是一个典型的响应设计。

        一流的网站用户体验绝对不是一蹴而就的，要进行充分的可用性测试，收集用户的反馈，持续改进。