使用谷歌官方工具Chrome Developer Tool分析并准确测试当前网站页面载入的速度

今天逛自己博客和各位大佬博客的时候,发现别人的载入速度总是要比我快,我想着能不能获取个准确的载入时间呢,也好知道自己该怎么优化。所以就有这篇文章的产生了。

简要说一下谷歌浏览器~

Chrome的简洁、快速吸引了无数人,它的启动速度、页面解析速度都很快,同时得益于Google V8的快速,Javascript执行速度也飞快。而且它对HTML5和CSS3的支持也完善,html类的富客户端

应用Chrome上无论是流畅性还是呈现的效果,都是比较出色的,这对于开发者,特别是对于那些喜欢研究前沿技术的前端开发者来说,是非常重要的。

 

网站加载速度在用户体验中是一个很重要的因素,虽然从很早以前就在研究如何加快网站速度,但是一直都是凭借第三方网站及主观感受来判断。现在得益于强大的Chrome Developer Tool,终于

能对自己的网站的速度进行相对专业地量化分析。下面就记录分享一下。

 

在Chrome浏览器(谷歌内核都可以)中按快捷键F12(或者右键-审核元素)就可以调出Developer Tool,然后加载任意一个网页就可以得到详细的分析报告,如果要看速度,”Network”里的内容应

该是我们关注的重点:

加载总览及禁用缓存. – 如果看不清楚的话,右键-在新标签中打开图片就可以看得很清楚了

点击”Network”之后就能看到总体的情况,我的chrome浏览器加载这个网页:

  • 32 Requests – 32个请求数
  • 318 KB transferred – 下载了318KB的内容
  • Loads:3.88S – 总耗时3.88秒(emmm变成壕了再考虑换个服务器吧,这个服务器真够慢的~)

如果我们勾选了”Disable Cache”基本就等同于第一次加载网页的时间(域名解析时间是否计入未知),不勾选的情况下再次刷新网页就等于第二次访问网页耗费的时间(浏览器缓存机制起作用)

另外,想直观地看到网站载入情况,最好新建一个用户不安装任何插件来使用Chrome Developer Tool进行页面分析。

载入速度对比例子– 如果看不清楚的话,右键-在新标签中打开图片就可以看得很清楚了

下面是我博客网站和百度网站页面的载入速度对比。

这个是我博客的页面的载入速度…哇的一声就哭出来了

…这个是百度的载入速度…真…jier厉害

 

本文部分内容素材源自:百度经验

13 comments

@欧文斯: 大佬,你这网站速度挺快的~秒开~~是用了cdn加速吗? 我看到GCP相关的教程了…emmm国内的普通银联信用卡不行,必须要VISA国际卡…emmm想办法撸他一张~

发表评论

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

*
*