网页页面加载对用户访问的影响
举个例子,某页面浏览到一个地方卡住了,至少要等十几秒才出来内容。排查原因,浏览其他网站页面很快,说明客户端网络带宽没问题;浏览同个服务器上其他网站页面都很快,说明服务器的处理速度和网络带宽也没问题。分析代码可能有好几种情况,在YUI官方加速网站的最佳办法提到了13条方法,对于普通产品来说,个人认为有几条应该强化注意,其他(灰色)从性价比上来说则成本有点高。
- Make Fewer HTTP Requests 更少的HTTP请求
- Use a Content Delivery Network 使用
- 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查询
- Mify JavaScript and CSS 精简Javascript和CSS
- Avoid Redirects 避免重定向
- Remove Duplicate Scripts 去掉多余的脚本
- Configure ETags 配置实体标签
- Make Ajax Cacheable 可缓存的AJAX
当所有假设都理想化之后,是否所有问题都解决了?答案是不一定。因为并不是加载越快就越好,快慢先后都应该有讲究,分别从加载速度、加载优先级两个角度举例探讨。
加载速度
我曾经碰到种情况,因为页面呈现过快反而影响用户体验。页面跳转交互一闪就过去了,但首屏内容没怎么变化,结果我不知道页面是否真进行了跳转。过快的交互感觉不是流畅,而是迷茫。此问题常见于博客系统,各位同行可以仔细观察。比如淘宝UED博客,下图左为首页首屏,右为网志页首屏。
http://ued.taobao./blog 截图于2009年10月28日
UCDCha官方博客也有类似问题,其症结在于前后页面布局不当。按理说,不同层级页面所突出的核心内容应该不同,所以首屏也应该有明显差异才对。我设计自己博客首页、列表页、网志页布局时,就特别注意了它们之间的传达关键点差异,如此在较快的交互时会有“动画”效果。下图上为首页首屏,左为列表页首屏,右为网志页首屏。