网页页面加载对用户访问的影响

所属分类: 网站运营 / 建站经验 阅读数: 112
收藏 0 赞 0 分享
那么具体了讲,除常规的服务器处理速度、服务器端网络带宽、客户端网络带宽等“硬”问题外,有哪些是技术上没处理好的“软”问题?

举个例子,某页面浏览到一个地方卡住了,至少要等十几秒才出来内容。排查原因,浏览其他网站页面很快,说明客户端网络带宽没问题;浏览同个服务器上其他网站页面都很快,说明服务器的处理速度和网络带宽也没问题。分析代码可能有好几种情况,在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博客,下图左为首页首屏,右为网志页首屏。

speed_taobaoued

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

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

speed_rexsong

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

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

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

加载优先级

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

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

samsung-downing

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

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

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

148150778_dcf7c24d84

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

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

更多精彩内容其他人还在看

美国Inmotion主机的购买及续费教程

这篇文章主要介绍了美国Inmotion主机的购买及续费教程,90天内无条件全额退款是Inmotion Hosting最为著名的一大特色,需要的朋友可以参考下
收藏 0 赞 0 分享

网站建立前怎么办?企业网站建立前本身有哪些问题被忽略?

网站是需要运营的,在运营过程中有一个重要的点就是营销,而网站的营销大多数朋友采用的就是竞价或者优化。那么网站建立前怎么办?企业网站建立前本身有哪些问题被忽略?下面我们就来看看吧
收藏 0 赞 0 分享

移动端网站页面调试的一些经验分享

这篇文章主要介绍了移动端网站页面调试的一些经验分享,包括远程调试以及针对iOS和Android平台的具体调试方法,干货十足,需要的朋友可以参考下
收藏 0 赞 0 分享

使用Google CDN导致网站页面无法加载的问题解决

这篇文章主要介绍了使用Google CDN导致网站页面无法加载的问题解决,由于谷歌在国内的访问原因,使得很多内置使用Google CDN的产品影响网站的访问,需要的朋友可以参考下
收藏 0 赞 0 分享

网站如何进行改版更好些 网站改版注意事项详情解答

为了应对客户的需求和当下网友们的审美观,很多网站都会在后期进行改版,网站改版期如果做的不过,那么对整个网站就是伤筋动骨的大事了,那么,如何进行网站改版?以及网站改版需要注意哪些事情呢?对此,本文小编就为大家介绍网站改版的详细注意事项
收藏 0 赞 0 分享

美国Hostigation的VPS主机购买管理及评测完全攻略

这篇文章主要介绍了美国Hostigation的VPS主机购买管理及评测完全攻略,Hostigation中用户可以选择KVM或者OpenVZ虚拟机下的服务器,这一点比较难得,需要的朋友可以参考下
收藏 0 赞 0 分享

网站分类目录的赚钱模式有哪些?网站分类目录站点的五种盈利模式分析

近些年网站分类目录站点很受个人建站喜欢,主要因为运营维护不需要花费太大精力,推广简单,外链自然增长,PR值很容易提升,还有盈利渠道简单多样等等,那么网站分类目录的赚钱模式有哪些?本文提供网站分类目录站点的五种盈利模式分析供大家了解,希望对大家有所帮助
收藏 0 赞 0 分享

知乎社区如何保持用户高粘性?

知乎是一个真实的网络问答社区,帮助你寻找答案,分享知识,当下知乎已经从一个小众的极客社区成长为了拥有1700万注册用户的庞大社区,那么知乎是如何做到这些的呢?下面就分析一下
收藏 0 赞 0 分享

如何购买模板?防范购买模板上当受骗的几个方面

于是很多站长开始选择第三条路,那就是购买一些定制化的模板,可是不幸的是,这些采购者往往会遭遇各种各样的陷阱,有些所谓的个性化模板已经被很多人倒转了几手,而且内部还存在着很多的缺陷,买回来也难以使用。所以为了防范自己上当受骗,就需要从下面几个方面来防范
收藏 0 赞 0 分享

简单总结Hadoop和Spark集群技术的不同点

这篇文章主要介绍了简单总结Hadoop和Spark集群技术的不同点,一般情况下人们普遍认为Spark的性能要比Hadoop好很多,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多