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

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

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

时间: 2024-11-29 14:46:10

网页页面加载对用户访问的影响的相关文章

Javascript在网页页面加载时的执行顺序

javascript|加载|网页|页面|执行 一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属性制定外部的js文件 放在事件处理程序中,比如:<p >点击我</p> 作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="javascript:alert('我是由javascript

ajax-asp页面加载频繁访问数据库导致响应时间大幅增加的问题

问题描述 asp页面加载频繁访问数据库导致响应时间大幅增加的问题 有一个asp页面需要通过查询语句A来显示获取数据填充到页面的table中,但是其中一列X所要显示的数据无法通过查询语句A来获取,必须在循环显示查询语句A所得到的结果的基础上再分别通过查询语句B来获取相应数据,这个步骤严重增加了页面的加载时间. 目前想到的方法.使用Ajax异步加载的方法,在页面加载完成再使用Ajax方法执行查询语句B来显示列X的数据.在做其他页面的测试时发现Ajax虽然不会阻塞页面的操作,但是多个Ajax直接会相互

网站页面加载超过四秒?不好意思,你将面临1/4的用户流失

假如有一家的http://www.aliyun.com/zixun/aggregation/18434.html">网站页面加载超过了4秒,那么就不好意思,你将面临1/4的用户流失的惨重结果.因为在一个高速浏览的时代,没人会愿意去等待答案.而人们对速度获取信息的渴望也让美国人变得开始毫无耐心起来. Google现在每天要处理30亿次搜索,着相当于每秒钟响应3.4万个问题,要是没有及时得到回复,那么人们就会不愿意Google通过发问.而Google发现只要搜索结果慢了1/4秒,那么一天的搜索

MFC在登陆页面中 加一个显示验证码的控件应该加哪个?图片从一个网页中加载出来的

问题描述 MFC在登陆页面中 加一个显示验证码的控件应该加哪个?图片从一个网页中加载出来的 http://202.200.144.63/(gac14yvwcsjrzj45cx1fq4ed)/CheckCode.aspx 我想把这网页里的图片显示在登陆界面作为验证码,请问我该在对话框中加什么控件,我用的是下边的方法 CHtmlView* pView= (CHtmlView*)m_wndSplit.GetPane(0,1); pView->Navigate("http://hao.201201

【软件周刊第 32 期】Ubuntu 最新构建版启用 GNOME;Android 端 Chrome 59 提升页面加载速度

在最新发布的 Ubuntu 17.10 每日构建版中,Unity 桌面环境已消失,GNOME 已经正式成为即将推出的Ubuntu 17.10(Artful Aardvark)版本的默认桌面环境. 据悉,Ubuntu 17.10 将在 9 月 28 日发布 Final Beta 版本,这时候才会基本确定下来所有的内容,10 月 19 日 Ubuntu 17.10(Artful Aardvark)将正式发布. Android O 开发者预览版 Beta3 发布:包含最终 API 谷歌为参与 Andr

400% 的飞跃-web 页面加载速度优化实战

前言 一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. 正常来讲一个网页 4s 加载不完就会流失很大一部分用户,而博主的网站加载时间竟然达到了 8s 还是在电脑端,如果在移动端,加载时间会更久,体验会更差. 这样的话网站做得再难看批判者进不来不是白搭嘛,于是针对 web 页面加载速度的优化迫在眉睫. 基于博主以前优化过其他网站,于是博主准备把这次的优化过程记

新技能Get:如何利用HTTP技术提升网页的加载速度

在这个信息爆炸的时代,使用移动终端获取新鲜信息已经是大势所趋,但是移动网页浏览速度还有巨大的提升空间.据 Strangeloop Networks 统计,在同样的网络条件下,使用移动端访问相同网页平均会比 PC 端慢40%!然而另一方面,用户对网速的要求却步步紧逼.研究表明,网页响应时间可容忍的阀值是2秒,一旦超过3秒,会有40%的用户放弃浏览页面. 所谓天下武功,唯快不破!想要设计更快的网页优化速度,我们可以借鉴成功的优化经验,全球最大的CDN服务商Akamai(阿卡迈)针对移动体验的问题,提

推荐十大优化页面加载速度的方法

许多研究发现,页面速度和访客的滞留时间,跳出率以及收入都有直接的关系.另外,谷歌的排名算法中也把页面加载速度作为其中一项考 虑因素.因此,你网站的页面加载时间是至关重要的.从访问者的角度看,测试你的浏览器速度的一个很好的方法是清除你的浏览器缓存,然后加载页面. 小于2秒的页载入时间被认为是优良的,而且高达4秒是可接受的.而大于5秒的页面载入时间不仅影响你网站的搜索引擎排名,还会严重影响用户体验.这里列出了10种方法,可以快速提升你网站的性能. 1. 优化图像 图像对于吸引访客的关注是很重要的.但

跨域网站实现了单点登录,但各网站的每个页面继承验证类,导致页面加载时 刷新两次

问题描述 跨域网站实现了单点登录,但各网站的每个页面继承验证类,导致页面加载时刷新两次各网站加载较慢单点登录原理是各网站的用户凭证保存到验证服务器的cache中请问有什么异步方法不让每个页面都刷新一次谢谢 解决方案 解决方案二:每个页面都访问单点登录系统?什么情况?你的网站,如果没有登录信息,才需要访问单点登录网页.而如果已经登陆过,你的网页该干什么还干什么.从单点登录网页重定向回到当前网站页面之后,当前网站应该从单点登录网站(根据传来的url参数)把用户的信息取过来保存,以后在打开别的页面时就