乐趣区

关于chrome:使用-Chrome-开发者工具的-lighthouse-功能分析-web-应用的性能问题

Optimize website speed

每当您着手进步站点的负载性能时,请始终从 audit 开始。审计有两个重要性能:

  • 它为您创立了一个基线来掂量后续更改。
  • 它为您提供无关哪些更改将产生最大影响的可行提醒。

本文应用上面这个网站利用作为例子。

https://glitch.com/edit/#!/tony

点击 Tony, 而后再点击 remix this,失去一个名称随机生成的我的项目:

点击 show 按钮,关上一个新的 tab. 按 F12 关上 Chrome 开发者工具,切换到 Lighthouse 标签页:

Establish a baseline

只选中 Performance 和 Mobile 的 checkbox:

点击 generate report,审计工作就开始了:

确保在隐身模式下生成 report,以防止 Chrome 扩大的烦扰。

稍后,审计报表就生成了:

报告顶部的数字是网站的整体性能得分。稍后,当您对代码进行更改时,您应该会看到这个数字回升。更高的分数意味着更好的性能。

指标局部提供站点性能的定量测量。每个指标都提供了对性能不同方面的洞察。例如,First Contentful Paint 会告诉您内容何时首次绘制到屏幕上,这是用户感知页面加载的一个重要里程碑,而 Time To Interactive 标记着页面仿佛已筹备好解决用户交互的工夫点。

每一个选项都能够点击 learn more 深入研究:

Passed audits 蕴含的是该 web 利用通过了的审计我的项目:

Diagnostics 栏目下就是该利用存在能够改良的中央:

更多 Jerry 的原创文章,尽在:” 汪子熙 ”:

退出移动版