千鸟：网页页面加载对访问的影响

　　页面访问慢是网站公认的死穴，如果页面都没法访问，往后再精彩的体验都等于零。这个问题如果专业点说，叫做“加载”呈现效率。那么具体了讲，除常规的服务器处理速度、服务器端网络带宽、客户端网络带宽等“硬”问题外，有哪些是技术上没处理好的“软”问题?

　　举个例子，某页面浏览到一个地方卡住了，至少要等十几秒才出来内容。排查原因，浏览其他网站页面很快，说明客户端网络带宽没问题;浏览同个服务器上其他网站页面都很快，说明服务器的处理速度和网络带宽也没问题。分析代码可能有好几种情况，在YUI官方加速网站的最佳办法提到了13条方法，对于普通产品来说，个人认为有几条应该强化注意，其他(灰色)从性价比上来说则成本有点高。

　　Make Fewer HTTP Requests 更少的HTTP请求

　　Use a Content Delivery Network 使用CDN

　　Add an Expires Header 指定过期时间

　　Gzip Components 压缩结构

　　Put Stylesheets at the Top 样式表文件在顶部

　　Put Scripts at the Bottom 脚本在底部

　　Avoid CSS Expressions 不在css中使用表达式

　　Make JavaScript and CSS External 将Javascript和CSS文件分离到单独的文件

　　Reduce DNS Lookups 减少DNS查询

　　Minify JavaScript and CSS 精简Javascript和CSS

　　Avoid Redirects 避免重定向

　　Remove Duplicate Scripts 去掉多余的脚本

　　Configure ETags 配置实体标签

　　Make Ajax Cacheable 可缓存的AJAX

　　当所有假设都理想化之后，是否所有问题都解决了?答案是不一定。因为并不是加载越快就越好，快慢先后都应该有讲究，分别从加载速度、加载优先级两个角度举例探讨。

　　加载速度

　　我曾经碰到种情况，因为页面呈现过快反而影响用户体验。页面跳转交互一闪就过去了，但首屏内容没怎么变化，结果我不知道页面是否真进行了跳转。过快的交互感觉不是流畅，而是迷茫。此问题常见于博客系统，各位同行可以仔细观察。比如淘宝UED博客，下图左为首页首屏，右为网志页首屏。

　　http://ued.taobao.com/blog 截图于2009年10月28日

　　UCDChina官方博客也有类似问题，其症结在于前后页面布局不当。按理说，不同层级页面所突出的核心内容应该不同，所以首屏也应该有明显差异才对。我设计自己博客首页、列表页、网志页布局时，就特别注意了它们之间的传达关键点差异。下图上为首页首屏，左为列表页首屏，右为网志页首屏。

　　http://blog.rexsong.com 截图于2009年10月28日

　　从以上例子可以得出结论，加载速度并不是孤立存在可能影响用户体验的因素，而在整个设计方案体系中起推动作用。事实上，用户对加载速度的要求也不是特别高，最关键是稳定，不低于用户期望。慢一点没关系，只要能给用户“说法”，比如动态加载提示，用户反而会觉得“过程”很受用。

　　另外从技术原理上来看，60%到80%的优化很容易，但再往后的每一点进步，都得付出相应的成本和资源。因此，不纵观全局、不考虑客观条件追求极致优化的做法不可取。

评论总数：2 条 [ 查看全部 ] 网友评论