页面加载对访问的影响

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

举个例子，某页面浏览到一个地方卡住了，至少要等十几秒才出来内容。排查原因，浏览其他网站页面很快，说明客户端网络带宽没问题；浏览同个服务器上其他网站页面都很快，说明服务器的处理速度和网络带宽也没问题。分析代码可能有好几种情况，在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％的优化很容易，但再往后的每一点进步，都得付出相应的成本和资源。因此，不纵观全局、不考虑客观条件追求极致优化的做法不可取。