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

加载优先级

在打开到浏览页面的过程中，除加载速度，我留意并发现呈现顺序之差也能造成细微的体验影响。从web原理来讲，整个页面正常应该是从上倒下，逐步呈现。但现实中web往往是竖状布局居多，因为更符合用户浏览习惯，更易于页面技术实现。

竖状布局就会牵涉到个优先级问题，应该先显示哪列模块？答案肯定是最重要的内容。在2004年网站重构技术得到重视之后，此问题已经不算什么新情况了，技术解决方案很成熟。之前最常见的是用table标签进行布局，造成需要table内的内容全部加载完成之后才显示的后果。具体表现为可能卡在页面某处长时间停留，并整个模块突然出现在页面上。下图为三星中文官网错误的先显示广告，而在重要模块长时间等待。

http://www.samsung.com/cn 截图于2008年7月23日

除重要性，我认为模块还有时间先后关系在影响呈现。比如在网站首页顶部加长幅消息模块，通知服务器维护、改版新体验等用以提升用户体验的手段很常见。但是否有设计师考虑过这些内容“性质”模块应该在什么时间出现比较合适？

我曾经做过个方案规定“改版体验的提示必须在整个页面加载完成2秒之后，从上往下滑出推动整个页面，以求更明显让用户注意的效果。”因为在页面加载过程中，所有对象都在从无到有的移动显示，如果在整个页面相对静止之后，突出更重要的“改版提示”，效果会顺畅很多。同样的结论还可以用在帮助提示，或某些新功能贴“标签”上。下图为雅虎官方新改版的测试邀请。

http://www.yahoo.com 截图于2009年3月21日

前几年弹窗广告流行时还有个类似案例，因为用户都特烦弹窗，打开页面的弹窗往往用户下意识就去关掉了。后来我设计了个延时10秒的弹窗，一月数据显示点击效果平均提升了30%。

作者：千鸟

原文地址：http://blog.rexsong.com/?p=7364

F意味着fast（快速）。这就是用户阅读你精心准备的内容的方式。在几秒钟内，他们的目光以惊人的速度在你的网站文字间的穿过，而这种方式与你在学校所学到的有很大差别。

在我们这项新的视线追踪研究中，我们记录了232位用户浏览上千个网页的方式。我们发现，对于不同的站点和任务，用户的主要阅读行为是相当一致的。这种显著的阅读模式看起来有点像一个字母F，它有以下三个组成部分：

• 用户首先横向运动阅读，通常是在网页内容区域的上半部分。这最初的元素就形成了F顶部的那个横条。

• 接着用户的视线会从网页上往下移一点，然后第二次横向阅读，通常这次涵盖的区域会比前一次短。这个附加的元素形成了F下面那横。

• 最后，用户会纵向地浏览网页内容的左边部分。有时这是一个相当缓慢的和系统的浏览过程，在眼球追踪热度图上呈现的就是一条粗实的条纹。其他时间用户视线移动的较快，形成的就是散点状热度图。这最后一个元素形成了字母F的竖杠。 

   

显然，用户的浏览模式并不总是完全由这三个部分组成。有时用户还会阅读网页内容的第三部分，使得图案看起来更像E。还有时他们只横向读一遍，使得图案看起来像一个倒置的L （横在上方）。但是，总的来说，阅读模式大致相似字母F ，只不过上下两个横杠之间的距离不同。

热度图来自三个网站的用户眼球追踪研究。用户看的最多的区域是红色的，黄色区域是关注较少的版块，蓝色区域是关注最少的部分。灰色区域是没有任何人关注的部分。

上述热度图显示了用户阅读网页的三种不同类型：

• 公司网站“关于我们”部分中的一篇文章（左）

• 电子商务网站上的一个产品页面（中），和

• 一个搜索引擎的结果页（SERP ；右）。

如果你眯起眼睛并重点看红色（关注最多）的区域，所有这三个热度图显示的就是期望的“F”模式。当然，也会有一点不同。“F”型浏览模式是一个粗略的、一般的形状，而不是一个统一的、完美的行为。

在电子商务网页（中间的例子）上，F的第二横比一般的要低，因为中间插入了产品图。用户还花费大量固定的时间在网页的右上角方块部分，因为那里是价格和“添加到购物车”按钮。

在SERP（右边的例子）中，F的第二横比上面的那横要长，这主要是因为第二个标题比第一个标题长。虽然用户通常很少阅读所浏览网页的第二部分，但在这种情况下可以看出，用户对两个标题同样感兴趣。

F模式的影响

“F”模式对网页设计的影响是显而易见的，以下这些重要准则是为网页写的而不是用作印刷的内容：

用户不会逐字的完全阅读你的文本。仔细的阅读行为是很罕见的，尤其是当预期的客户对候选供应商进行初步研究的时候。确实，有些人会阅读更多，但大多数不会。

前两段必须指出最重要的信息。虽然他们可能读第一段比第二段多，但这里也有一些希望，那就是用户是在真正的阅读这些资料。

当用户以“F”行为的最后竖杠模式浏览你的内容的左边部分的时候，他们会注意开始标题、段落和有要点信息的词语。在同一行中，与前两个词语相比，他们很少会读第三个词。

具体的浏览行为

当人们阅读并浏览整个网页时，用户眼球运动的慢动作回放是很吸引人的。每个页面所阅读的主题都超越了我这里讨论的主要的“F”模式。例如，当他们在寻找价格或其他号码时，用户是以不同的，更有针对性的方式去浏览，且有个有趣的棘手行为决定了用户是如何看搜索引擎广告列表的。我们也有许多研究是关于人们如何看网站图片的。

在美国华盛顿、旧金山、伦敦和悉尼召开的2009年可用性会议上，我们在为期两天的研讨会中针对网站书写问题提出了许多详细的调查结果。

对于内容可用性最大的决定因素是用户如何在线阅读——因为人们阅读方式不同，你的书写方式也必须不同。