网页设计之感官体验の要素④ 网页打开速度

前言

网站页面的打开速度严重影响用户体验，再好的网站，如果打开速度慢，10个人有9个会选择关闭。正常情况下，应该确保网站页面在5秒内打开，如果是超大型的网站就需要考虑南北互通问题，进行压力测试。

用户最满意的网页打开时间是2秒以下，当然越快越好。用户可以接受最长等待时间一般是6-8秒，超过8秒打开的网站将会失去浏览用户。

网站的打开速度直接对用户的心理会造成一定影响。普遍认为，打开速度快的网站质量高，可信度高，相反速度慢的就会让用户心理对其有一种不好的印象，怀疑网站的可信度和质量问题，怀疑服务器是否出现了问题等等。也可能会导致用户在等待过程中忘记了自己打开网页后的下一步做什么。

如果确实是因为服务器响应速度慢，可以考虑在网页的加载过程中添加加载动画，或者是一些反馈信息，进度条、加载动画等等都可以让等待画面更有趣，也可以争取客户的耐心等待时间。

如何提高网站页面打开，改善用户体验？

1、优化图片

减少图片的体积大小，尽量保持在800kb以内，使用Photoshop的存储web格式存储。（也可以使用firework处理网页图片）

2、选择合适的图片格式

在网页中常用的格式有jpg、png、gif三种，其中jpg用于普通照片真彩色不支持透明，gif用于平面色彩支持透明，像图标、背景、按钮等，png与前面两种类似，支持透明度。

3、图片宽度和高度设置

很多时候我们在制作网页的时候忘记添加图片的尺寸，图片的尺寸可以告诉浏览器预留相应大小的区域。

4、合并代码

css文件和js文件分别采用link和script的外部链接方式进行引入，减少html文件的体积。同类的代码可以放在一个文件中。

5、延迟显示可见区域外的内容

确保快速看到可见区域的内容，可以通过脚本实现懒加载让可见窗口外的内容暂停加载，当用户滚动鼠标时内容再开始加载。

6、精简代码

顾名思义优化代码，删除不必要的多余代码，如不必要的空格、换行符、注释等等。这里的代码规范要遵循W3C和HTML5标准

7、延迟加载和执行非必要脚本

对于一些不是针对于打开时执行的脚本js，可以放到onload事件之后再执行。

8、减少网页与服务器的响应次数

用户打开网页的流程是：浏览器——网址域名——连接绑定域名的服务器——服务器接收打开网页的请求——同意请求——检索需要反馈的页面给浏览器——呈现用户面前。

如果网站程序存在与服务器交互的语言，比如php，asp等，这类的网站都是动态生成页面，需要不停的向服务器发送显示请求，对于动态网站可以加入ajax技术做到异步更新，这样网站更新内容只向服务器请求已更新的内容，而不会重新把全部的页面请求。对于静态的网站而言，就不需要这个方式了，因为静态网站已经是可以直接阅览的页面，不需要请求服务器。

总结

重视网站的用户体验可以说是互联网发展由技术为中心到以客户为中心的转变，主流的搜索引擎都将网站的用户体验作为评价网站的重要标准。想要在搜索引擎中获得好评，就必须重视用户体验的优化，而网站的加载速度则是用户体验的首要条件。

用户都喜欢打开速度开的网站，不喜欢花太长时间在等待过程上，一旦打开速度慢，用户会毫不犹豫选择关闭网页。在制作网站的时候能不用图片的就不用图片，一般情况按钮和图标类的可以通过图标字体库引入（fontawesome、bootstrapUI图标、阿里巴巴iconfont）。当然，可以在加载页面中添加适当的加载动画，使枯燥的等待页面变得更有趣，这样也可以缓解用户在等待过程中产生的焦虑感。