页面加载对访问的影响
作者:一叶千鸟 来源:千鸟志 发布时间:2009-10-30 18:54:00
页面访问慢是网站公认的死穴,如果页面都没法访问,往后再精彩的体验都等于零。这个问题如果专业点说,叫做“加载”呈现效率。那么具体了讲,除常规的服务器处理速度、服务器端网络带宽、客户端网络带宽等“硬”问题外,有哪些是技术上没处理好的“软”问题?
举个例子,某页面浏览到一个地方卡住了,至少要等十几秒才出来内容。排查原因,浏览其他网站页面很快,说明客户端网络带宽没问题;浏览同个服务器上其他网站页面都很快,说明服务器的处理速度和网络带宽也没问题。分析代码可能有好几种情况,在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%的优化很容易,但再往后的每一点进步,都得付出相应的成本和资源。因此,不纵观全局、不考虑客观条件追求极致优化的做法不可取。
猜你喜欢
- 前段时间开始学习JSON在ASP中的使用,JSON确实比XML方便。以前在写程序的时候有考虑使用XML来存储数据,但是一直觉得生成文档及文档
- 在安装了IIS以后,缺省的服务器端脚本语言被设置成VBScript。许多Web 开发团队在他们的开发环境中保持了这些缺省设置,这是不幸的,因
- 内容摘要:本文介绍了使用js来实现下拉伸缩导航菜单的功能,并带有渐显的效果,值得收藏。正好这几天公司不忙,学校又没有事情,所以想抽空架一个个
- 1.1.1 摘要 如果说要对数据库进行优化,我们主要可以通过以下五种方法,对数据库系统进行优化。 1. 计算机硬件调优 2. 应用程序调优
- 总的来说,提高应用程序性能的最好的方法是发现应用的瓶径之所在,和数据库进行交互的性能无疑是决定应用程序性能的重要环节之一。因为ADO是当前最
- 每周的《午间欢乐购》和《周末疯狂购》,已经成为视觉组的固定需求。从开始接触到现在5个月的时间里,思维也和这些小小banner逐渐碰撞出火花。
- 看到sam关于max-height的文章,觉得按捺不住了。sam注重于样式表的写法,过多的要求div+css的布局,sam可是追求艺术的人哦
- 今天有个朋友做网页的时候遇到个问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇
- 查询效率分析:子查询为确保消除重复值,必须为外部查询的每个结果都处理嵌套查询。在这种情况下可以考虑用联接查询来取代。如果要用子查询,那就用E
- 对设计“以人为本”和“绿色设计”两个观点的反思——兼与设计界同仁商榷Reflection of Two Views: “People-ori
- JavaScript Length 字符长度函数,在很多时间我们会用length函数了,因为你得前台判断一个用户输入
- <%'============================================================
- 翻译:ShiningRay简介你是否知道JavaScript其实也是一个函数式编程语言呢?本指南将教你如何利用JavaScript的函数式特
- 笔者认为,在创建索引时要做到三个适当,即在适当的表上、适当的列上创建适当数量的索引。虽然这可以通过一句话来概括优化的索引的基本准则,但是要做
- 感谢LeXRus为我们带来他费心制作的教程,这是一个非常棒的动画教程,教程中不仅有 DW MX 2004 的操作方法,还有一些代码的写作和方
- 昨天还和裕波沟通我没有准备ppt,想以另一种互动的方式来交流。后来想想,每个人都准备了,我不准备也不太好意思,呵呵。今天在webrebuil
- 谈到“登录”,大多数人脑海中会立刻浮现出那个“两小框:一用户名,一密码,外加一按钮”的经典豆腐块, 这样的功能模块在互联网上屡见不鲜, 成为
- 有一个查询如下: 代码如下:SELECT c.CustomerId, CompanyName FROM Customers c
- Oracle公司6月9日宣布同意收购TimesTen公司,TimesTen是一家私营软件企业,其产品能提高用于股市和机票预订等需要快速响应时
- 内容摘要:本文介绍了通过获取访问者的IP地址来统计在线人数的方法,本文只是给出了实现统计在线人数的方法思路,具体代码的实现过程还得自己动手(