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

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

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


它为您创建了一个基线来衡量后续更改。

它为您提供有关哪些更改将产生最大影响的可行提示。

本文使用下面这个网站应用作为例子。


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


点击 Tony, 然后再点击 remix this,得到一个名称随机生成的项目:


image.png

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


image.png


Establish a baseline

只选中 Performance 和 Mobile 的checkbox:


image.png


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


image.png

确保在隐身模式下生成 report,以避免 Chrome 扩展的干扰。


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


image.png

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


image.png


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


每一个选项都可以点击 learn more 深入研究:


image.png

Passed audits 包含的是该 web 应用通过了的审计项目:


image.png


Diagnostics 栏目下就是该应用存在可以改进的地方:

image.png

相关文章
|
4天前
|
SQL 缓存 PHP
PHP 与数据库优化:提升Web应用性能的关键
在Web开发中,PHP作为一种流行的服务器端脚本语言,与数据库密切相关。本文探讨了如何通过PHP与数据库优化来提升Web应用的性能和响应速度。从数据库查询优化、索引的设计到PHP代码编写的最佳实践,我们将深入探讨每个方面如何影响应用的效率和用户体验。
|
7天前
|
缓存 负载均衡 安全
Servlet与JSP在Java Web应用中的性能调优策略
【6月更文挑战第23天】在Java Web中,Servlet和JSP调优至关重要,以应对高并发和复杂业务带来的性能挑战。优化包括Servlet复用、线程安全、数据库连接池,以及JSP的编译优化、使用JSTL、页面缓存和静态内容分离。全局优化涉及负载均衡、异步处理和缓存策略。通过这些实践,开发者能提升应用响应速度和吞吐量,确保高负载下的稳定运行。
|
18天前
|
机器学习/深度学习 人工智能 前端开发
WebAssembly:浏览器中的新语言,引领Web性能革命
【6月更文挑战第12天】WebAssembly,简称Wasm,是浏览器中的新语言,旨在带来近乎原生的性能,引领Web性能革命。它具有高效、可移植、安全和多语言支持的特点,适用于游戏开发、图形处理、计算机视觉等领域。随着浏览器支持增强,Wasm将在跨平台应用、AI、机器学习、云计算和边缘计算中发挥更大作用,推动Web应用的发展。
|
16小时前
|
分布式计算 并行计算 安全
在Python Web开发中,Python的全局解释器锁(Global Interpreter Lock,简称GIL)是一个核心概念,它直接影响了Python程序在多线程环境下的执行效率和性能表现
【6月更文挑战第30天】Python的GIL是CPython中的全局锁,限制了多线程并行执行,尤其是在多核CPU上。GIL确保同一时间仅有一个线程执行Python字节码,导致CPU密集型任务时多线程无法充分利用多核,反而可能因上下文切换降低性能。然而,I/O密集型任务仍能受益于线程交替执行。为利用多核,开发者常选择多进程、异步IO或使用不受GIL限制的Python实现。在Web开发中,理解GIL对于优化并发性能至关重要。
9 0
|
2天前
|
监控 Python 缓存
缓存系统提升Web应用性能
【6月更文挑战第22天】
5 0
|
4天前
|
JavaScript 程序员 应用服务中间件
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(2)
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(2)
17 7
|
4天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
21 6
|
4天前
|
XML 存储 JavaScript
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(1)
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(1)
15 5
|
1天前
|
安全 编译器 API
探索PHP 8的新特性及其对现代Web开发的影响
随着PHP 8的正式发布,这一版本带来了多项重大改进和新特性,旨在提升性能、增加语言的灵活性并简化开发流程。本文将详细探讨PHP 8中的关键更新,包括JIT编译器、联合类型、命名参数、匹配表达式等,并分析这些新特性如何影响现代Web开发的实践。通过引用最新的性能数据和开发者反馈,我们将深入理解PHP 8带来的变革,以及它对现有项目和未来趋势的潜在影响。
|
1天前
|
安全 大数据 PHP
深入理解PHP 7中的新特性及其对现代Web开发的影响
【6月更文挑战第28天】本文将深入探讨PHP 7带来的革新,从性能提升到语法改进,揭示这些变化如何重塑Web开发领域。我们将一窥未来PHP的发展趋势,并分析开发者如何利用这些新特性来构建更快、更安全、更易于维护的应用程序。
7 1