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

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

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

简要说一下谷歌浏览器~

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

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

 

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

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

 

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

该是我们关注的重点:

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

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

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

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

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

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

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

下面是我博客网站和百度网站页面的载入速度对比。使用谷歌官方工具Chrome Developer Tool分析并准确测试当前网站页面载入的速度 网站 第3张

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

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

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

 

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

这些可能会帮助到你: 综合论坛  资源下载帮助  留言建议

欢迎入群交流沟通:QQ群: 653767067 · TG群: t.me/saodaye · TG频道: t.me/infosaodaye

本站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议

你或许会喜欢...

13 条评论

  1. 欧文斯说道:

    开了 CloudFlare 你会发现。。。哇,还不如不加。。
    你是用 Amazon 免费计划吗?

  2. 懿古今说道:

    服务器给力,再开CDN的话,一般这个速度应该都还不错

发表评论

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