如何快速提高网站用户体验,详细解析用户体验的三个关键因素

今天由Grace大姐姐给同学们介绍阿里巴巴首席架构师王坚博士《结网》一书的读书笔记,重点说说用户体验设计中最关键的三个要素:别让我等!别让我想!别让我烦!大牛手笔,绝无半点水分,字字句句都是干货,拿来即用,粗暴有效。话不多说,阅读见分晓。

用户是否喜欢一款产品,取决于他使用产品获得的好处,也取决于他在产品中获得的体验,两方面都是用户价值所在,缺一不可。

对于网站的SEO推广而言,用户体验可以说是一个不可忽视的根基。一个网站如何没有良好的用户体验,自然不会提升流量更不用谈转化率了。网站的用户体验是从多个方面来衡量的,蝉知小编就和大家探讨下如何提升网站的用户体验度。

图片 1

最近在读王坚的《结网》,正看到 网站用户体验
的章节,收获很多。今天成文一篇,就当是阅读笔记了。

绝招一:快

用户体验三要素:别让我等!别让我想!别让我烦!

图片 2

每一个用户都是我们努力引流的结果,千万不要让用户在打开你网站时,半天打不开。一般情况下PC端网站10秒内没打开,移动端3秒内没打开,用户基本上都会直接关掉。况且现在随着移动端超越PC端,搜索引擎也对网站的打开速度有了一定的要求,这一点相信大家都能理解。蝉知小编建议,最好让我们的网站PC端能在3秒内打开,移动端能在1秒内打开,这样才有利于抢占先机。

图片 3

关于 网站用户体验
的方法论有很多,这里引用王坚的一个简单易记的说法,用户体验三要素:别让我等!别让我想!别让我烦!针对这三个要素,我准备用3个篇幅来完成,今天先讲第一个:别让我等。

说了这么多,可能大家会觉得是废话,其实不然。我们来看两个数字,google曾经做过的一个实验,显示10条搜索结果的页面载入需要0.4秒,显示30条搜索结果的页面载入需要0.9秒,采用后面一个方案的话,流量和收入各减少20%。而且百度也在移动端的优化指南中明确规定了:网站打开速度过慢是不利于网站排名的。

别让我等

为什么迅雷在下载软件中独树一帜?为什么越来越多的用户在低画质的视频网站上在线观看连续剧,而不是下载更清晰的视频文件?答案是:用户的耐心非常有限,用户对速度的追求远远超过了对画质等因素的追求。

如何优化网站的打开速度呢?干货来了哦。

曾有很多研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。也许这样讲,各位还不会有太多感触,接下来,我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。

回到网站运营问题上,你是否有在全国各地都测试过,访问打开你的网站需要几秒?

1、减少HTTP请求数

怎么样?现在感受如何?是不是该马上去做测试工作呢。

曾有很多研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。也许这样讲,各位还不会有太多感触,接下来,我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。

用户在打开一个网页的时候,后台程序响应用户所需的时间并不多,用户等待的时间主要花费在下载网页元素上了,即HTML、CSS、JavaScript、Flash、图片等,统计显示,每增加一个元素,网页载入的时间就增加25-40毫秒(取决于用户的带宽情况)。

这时候你也许会问:什么原因会导致网站打开慢?有什么办法解决呢?别急,我一一道来。以下内容有些偏技术层面,各位需要耐心阅读。

怎么样?现在感受如何?是不是该马上去做测试工作呢。

所以,想要提高网页打开速度,就要减少HTTP请求数,方法有3种:

1、减少HTTP请求数

这时候你也许会问:什么原因会导致网站打开慢?有什么办法解决呢?别急,我一一道来。以下内容有些偏技术层面,各位需要耐心阅读。

A、减少不必要的HTTP请求,例如用CSS圆角代替圆角图片,减少图片的使用。

用户在打开一个网页的时候,后台程序响应用户所需的时间并不多,用户等待的时间主要花费在下载网页元素上了,即HTML、CSS、JavaScript、Flash、图片等,统计显示,每增加一个元素,网页载入的时间就增加25-40毫秒(取决于用户的带宽情况)。

1、减少HTTP请求数

B、合并文件,对于文本文件,可以直接合并内容。例如将多个JS(JavaScript的简称)文件合并成一个,将多个CSS文件合并成一个。

所以,想要提高网页打开速度,就要减少HTTP请求数,方法有3种:

用户在打开一个网页的时候,后台程序响应用户所需的时间并不多,用户等待的时间主要花费在下载网页元素上了,即HTML、CSS、JavaScript、Flash、图片等,统计显示,每增加一个元素,网页载入的时间就增加25-40毫秒(取决于用户的带宽情况)。

C、优化缓存,对于没有变化的网页元素(如页头、页尾等),用户再次访问的时候没有必要重新下载,直接从浏览器缓存里读取就可以了。

1)减少不必要的HTTP请求,例如用CSS圆角代替圆角图片,减少图片的使用。

所以,想要提高网页打开速度,就要减少HTTP请求数,方法有3种:

2、使用CDN加速(Content Delivery Network,内容分发网络)

2)合并文件,对于文本文件,可以直接合并内容。例如将多个JS(JavaScript的简称)文件合并成一个,将多个CSS文件合并成一个。

1)减少不必要的HTTP请求,例如用CSS圆角代替圆角图片,减少图片的使用。

用户与你网站服务器的接近程度会影响响应时间的长短,把网站内容分散到多个、处于不同地理位置的服务器上可以加快下载速度。CDN由一系列分散到各个不同地理位置上的Web服务器组成,它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。现在市面上有很多第三方CDN产品,比如百度云加速、360加速、加速乐、安全宝等。

3)优化缓存,对于没有变化的网页元素(如页头、页尾等),用户再次访问的时候没有必要重新下载,直接从浏览器缓存里读取就可以了。

2)合并文件,对于文本文件,可以直接合并内容。例如将多个JS(JavaScript的简称)文件合并成一个,将多个CSS文件合并成一个。

我们的蝉知系统提供了CDN功能,后台轻松一键开启,简单方便,使用户的网站访问速度更快,也有效地防御DDOS攻击。

2、使用CDN(Content Delivery Network,内容分发网络)

3)优化缓存,对于没有变化的网页元素(如页头、页尾等),用户再次访问的时候没有必要重新下载,直接从浏览器缓存里读取就可以了。

3、压缩网页元素

CDN由一系列分散到各个不同地理位置上的Web服务器组成,它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。当你的网站图片很多事,就一样要使用CDN了,比如现在的电商网站,几乎都在使用CDN。

2、使用CDN(Content Delivery Network,内容分发网络)

网页中的每个元素越小,下载所需的时间就越少,这个很好理解。现在比较成熟和流程的压缩网页的方式,是通过Gzip,我自己的实操经验来看,一般可以将网页文本内容减少70%以上。

3、压缩网页元素

CDN由一系列分散到各个不同地理位置上的Web服务器组成,它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。当你的网站图片很多事,就一样要使用CDN了,比如现在的电商网站,几乎都在使用CDN。

4、样式表放在网页head部分

网页中的每个元素越小,下载所需的时间就越少,这个很好理解。现在比较成熟和流程的压缩网页的方式,是通过Gzip,我自己的实操经验来看,一般可以将网页文本内容减少70%以上。

3、压缩网页元素

把样式表(CSS文件)移到网页的head部分可以让页面尽快开始渲染,用户所感受的载入速度将会变快。

4、样式表放在网页Head部分

网页中的每个元素越小,下载所需的时间就越少,这个很好理解。现在比较成熟和流程的压缩网页的方式,是通过Gzip,我自己的实操经验来看,一般可以将网页文本内容减少70%以上。

5、把JS文件放到网页底部

这也是我实际操作过的案例,把样式表(CSS文件)移到网页的Head部分,可以提高页面的加载速度,让页面元素顺序显示。

4、样式表放在网页Head部分

网页打开时,所有元素是顺序显示的。由于JS文件的特殊性,其相比其他元素来说,会加载的很慢,在JS文件下载完成之前,其他后面元素的顺序显示将被阻塞,因此把JS文件尽量放在底部,意味着内容能被快速显示。

5、把JS文件放到网页底部

这也是我实际操作过的案例,把样式表(CSS文件)移到网页的Head部分,可以提高页面的加载速度,让页面元素顺序显示。

6、把样式表和JS脚本放到外部文件中

网页打开时,所有元素是顺序显示的。由于JS文件的特殊性,其相比其他元素来说,会加载的很慢,在JS文件下载完成之前,其他后面元素的顺序显示将被阻塞,因此把JS文件尽量放在底部,意味着内容能被快速显示。

5、把JS文件放到网页底部

尽管将样式表和JS脚本直接写入网页HTML中,可以减少外部文件调用数量,从而增加HTTP请求数。但是,这样做会增加网页的文件大小。综合来看,将样式表和JS脚本放到外部文件中,也许用户首次访问时会有点慢,但是后续在访问网站时,页面内容通过浏览器缓存来减少HTTP请求,从而达到快速显示的目的。

This entry was posted in 摄影专区 and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

发表评论

电子邮件地址不会被公开。 必填项已用*标注