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的原创文章，尽在：“汪子熙”:

使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题相关推荐

利用Chrome开发者工具分析C4C Opportunity搜索的前端性能
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
如何使用Chrome开发者工具调试web socket应用
使用Chrome开发者工具,web socket应用的调试显得异常方便. 打开Chrome开发者工具,切换到network标签页,选择Filter,根据WS过滤, 刷新我们的web socket应用, ...
Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能[转]
我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的 ...
chrome开发者工具_如何使用Chrome开发者工具查找性能瓶颈
chrome开发者工具介绍 (Introduction) As one advances through a software development career, concerns beyond ...
Chrome开发者工具详解(2)-Network面板
注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板面板上包含了Elements面板.Console面板.Sources面板. ...
用Chrome开发者工具调试一切
自Google发布Chrome浏览器以来,其附带的Chrome开发者工具就深受开发者们的喜爱,现在人们不仅仅用它来调试Web前端页面,还将它扩展用来调试移动应用和服务端应用.在错误报告平台Bugsna ...
使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
Chrome 开发者工具 workspace 的概念
Edit files with Workspaces 本教程提供设置和使用工作区的实践练习,以便您可以在自己的项目中使用工作区. 工作区使您能够将在 DevTools 中所做的更改保存到存储在计算机上 ...
Chrome开发者工具network标签页里的transferred over network和resources loaded by the page的区别
如下图所示: network底部有1.1 MB transferred over network和5.1 MB resources loaded by the page. 这两个大小有何区别? 有中文 ...

使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题

Establish a baseline

使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题相关推荐

最新文章

热门文章