对网页进行优化后,Google帮你“测试载入速度”

2018年5月29日12:02:52 3 31 阅读

如何你对网站开发的话,要达到一个很好的行业标准,必须对以下的内容进行优化

Google帮你“测试流动装置载入速度 ,测试网址,如果在中国访问这个测试网址可能要多走几步

https://testmysite.withgoogle.com/

对网页进行优化后,Google帮你“测试载入速度”

载入速度

(一)减小网站内容中资源体积(html、JPG、CSS、JS等)

  • gzip压缩
  • js混淆
  • css压缩
  • 图片压缩

gzip压缩主要是针对html文件来说的,它可以将html中重复的部分进行一个打包,多次复用的过程。js的混淆可以有简单的压缩(将空白字符删除)、丑化(丑化的方法,就是将一些变量缩小)、或者可以使用php对js进行混淆加密。css压缩,就是进行简单的压缩。图片的压缩,主要也是减小体积,在不影响观感的前提下,尽量压缩图片,使用png等图片格式,减少矢量图、高清图等的使用。这样子的做法不仅可以加快网页显示,也能减少流量的损耗。

除了以上两部分的操作之外,在网络层面我们还需要做好缓存工作。真正的性能优化来说,缓存是效率最高的一种,往往缩短的加载时间也是最大的。

对网页进行优化后,Google帮你“测试载入速度”

(二)缓存:对有关节点上的资源进行缓存,减少请求次数。

对有关节点上的资源进行缓存,减少请求次数,或者缩短访问者的距离。网页打开速度测试会加快,页面加载时间短。

  • DNS缓存
  • CDN部署与缓存
  • http缓存

由于浏览器会在DNS解析步骤中消耗一定的时间,所以,对于一些高访问量网站来说,做好DNS的缓存工作,就会一定程度上提升网站效率。CDN缓存,CDN作为静态资源文件的分发网络,本身就已经提升了,网站静态资源的获取速度,加快网站的加载速度,同时也给静态资源做好缓存工作,有效的利用已缓存的静态资源,加快获取速度。http缓存,也是给资源设定缓存时间,防止在有效的缓存时间内对资源进行重复的下载,从而提升整体网页的加载速度。

其实,网络层面的优化还有很多,特别是针对于移动端页面来说。众所周知,移动端对于网络的敏感度更加的高,除了目前的4G和WIFI之外,其他的移动端网络相当于弱网环境,在这种环境下,资源的缓存利用是相当重要的。而且,减少http的请求次数,也是至关重要的,移动端弱网环境下,对于http请求的时间也会增加。所以,我们可以看一下我们在移动端网络方面可以做的优化:

(三)移动端优化,可以通过下页几种方式来加快网页加载速度。

  • 使用长cache,可以使得移动端的部分资源设定长期缓存,这样可以保证资源不用向服务器发送请求,来比较资源是否更新,从而避免304的情况。304重定向,在PC端或许并不会影响网页的加载速度,但是,在移动端网络不稳定的前提下,多一次请求,就多了一部分加载时间。
  • 首屏优化,保证首屏加载数据小于10-15kb,对于移动端来说是至关重要的。2s时间是用户的最佳体验,一旦超出这个时间,将会导致用户的流失。所以,针对移动端的网络情况,不可能在这么短时间内加载完成所有的网页资源,所以我们必须保证首屏中的内容被优先显示出来,而且基于TCP的慢启动和拥塞控制,第一个14kb的数据是非常重要的,所以需要保证首部加载数据能够小于14kb。
  • 不滥用web字体,web字体的好处就是,可以代替某些图片资源,但是,在移动端过多的web字体的使用,会导致页面资源加载的繁重,所以,慎用web字体。

(四)网页加载时间对用户的流失率分析

Google 去年查看移动页面速度以来,完全加载移动目标网页所需的平均时间已经下降了7秒。坏消息是,根据我们的新分析,它仍然需要大约15秒。一个需要三秒钟以上的页面加载的移动站点,53%的访问离开了,为什么,因为网页打开这太慢了。

Google 的数据显示,尽管一半以上的整体网络流量来自移动设备,但移动转化率低于台式机。总之,速度等于收入。谷歌为了更好地了解的广告合作伙伴在做什么,上个月,分析了213个国家/地区的1100万个移动广告的登录网页。发现大多访问的数据流量来自4G而不是3G,但是大多数移动网站仍然打开缓慢,网页臃肿,调用元素太多。Google 分析的对于70%的移动网页,首屏要在超过五秒的时间才能显示在屏幕上,超过七秒以上才能完全加载所有页面内容。

Google 训练了一个深度神经网络来模拟人类大脑的神经网络计算机系统 ,大量的数据表明。神经网络计算机系统预测准确率达90%神奇的发现,当移动端页面加载时间从一秒钟到10秒钟时,移动站点访问者跳出率的概率增加了123%。下图是不现加载时间与跳出率的关系。通过对网页加载分析得的结论,不同的网页加载时间对用户的流失率相差很大。

对网页进行优化后,Google帮你“测试载入速度”

 

本文诣在注意移动端加载时间与网站跳出率的关系,并指出要达到好的行业标准马上行动起来,给你的移动端进行充分的优化与加速吧。

hcyaobin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  0   博主  0   引用   3

    来自外部的引用: 3

    • CentOS 6 升级 Python 至 3.x – 网络驱动
    • 如何让图片自适应屏幕(移动端)大小 – 文中之舞
    • 用webpagetest.org测试网页性能 – 文中之舞