Web性能优化之如何评估网页性能——性能指标和度量工具介绍

前言

用户在访问 web 网页时，大部分都希望网页能够在一秒完成。事实上，加载时间每多 1 秒，就会流失 7%的用户。如果时间超过 8s 用户就会感到不耐烦、会放弃访问。这也就是著名的 “8秒原则”。

虽然当今设备及网络环境都大幅提升，但“带宽低”、“速度慢”、“内存小”的平均情况仍然是web性能瓶颈，特别是在移动端。因此多年以来，web 性能优化依旧是一个非常庞大的工程，需要制定指标、确定标准、采用优化手段、进行性能测试、确定性能指标上报、确定性能监控和预警等等。

本文将重点讲述web性能指标以及常用度量工具，希望能为你的网页性能优化提供一些参考。

一、性能度量指标

从开篇中我们知道性能很重要，但是当我们谈起 web 性能时，具体指的是什么？

首先性能的衡量是相对的，比如以下场景：

  • 由于网速或设备的差异，同一个网站可能对一个用户来说访问速度很快（“性能好”），但另一个用户访问速度很慢（“性能差”）。
  • 两个内容相似的网站完成加载所需的时间或许相同，但其中一个却显得加载速度更快（比如该网站逐步渐进式得加载内容，而不是等到最后才一起显示）。
  • 一个网站可能看起来加载速度很快，但随后在用户操作时、用户交互的响应速度却很慢（比如操作卡顿或根本无响应）。

因此，在谈论性能时，相对重要的是做到度量精确，并且根据能够进行定量测量的客观标准来论及性能。这些标准就是指标，常用的性能指标如下：

  • FCP：First Contentful Paint，首次内容绘制，测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。
  • FMP：First Meaningful Paint，首次有效绘制，当主要内容呈现在页面上；
  • HRT：Hero Rendering Times，英雄渲染时间，度量用户体验的新指标，当用户最关心的内容渲染完成；
  • TTI：Time to Interactive，可交互时间，指页面布局已经稳定，关键的页面内容是可见的，并且主进程可用于处理用户输入，基本上用户可以点击 UI 并与其交互；
    输入响应（Input responsiveness，界面响应用户输入所需的时间）
  • PSI：Perceptual Speed Index，感知速度指数，测量页面在加载过程中视觉上的变化速度（分数越低越好）；
  • LCP：Largest Contentful Paint 最大内容绘制，测量页面从开始加载到最大文本块或图像元素在屏幕上完成渲染的时间。
  • FID：First Input Delay，首次输入延迟，测量从用户第一次与您的网站交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器实际能够对交互做出响应所经过的时间。
  • TBT：Total blocking time 总阻塞时间，测量 FCP 与 TTI 之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。
  • CLS：Cumulative Layout Shift，累积布局偏移，测量页面在开始加载和其生命周期状态变为隐藏期间发生的所有意外布局偏移的累积分数。

注：FMP 与 HRT 非常相似，但它们不一样的地方在于 FMP 不区分内容是否有用，不区分渲染出的内容是否是用户关心的。

*Core Web Vitals核心网页指标

“Web Vitals”是 Google 推出的一项计划，旨在针对在提供出色的 Web 体验方面至关重要的质量信号提供统一指南。核心网页指标是适用于所有网页的部分网页指标，应由所有网站所有者进行衡量，并且会显示在所有 Google 工具中。每个核心网页指标都代表用户体验的一个不同方面，在实际应用中是可衡量的，并且反映了以用户为中心的关键结果的真实体验。

构成 Core Web Vitals 的指标会随着时间的推移而演变。目前设定的 2020 年目标侧重于用户体验的三个方面（加载、互动和视觉稳定性），并包含以下指标阈值：
请添加图片描述
对于上述每个指标，为了确保您达到大多数用户的推荐目标，最好衡量一下网页加载的第 75 个百分位（按移动设备和桌面设备细分）。

Performance API

浏览器提供的 Performance API 是一组用于衡量 web 应用性能的标准，是上述性能指标监控数据的关键来源。

Performance 提供高精度的时间戳，精度可达纳秒级别，且不会随操作系统时间设置的影响。

当我们访问 window.performance 时可以看到它返回一个 Performance 类型的对象，以及该对象中暴露出来的几个对象和方法：

p-performance
这些字段在下图中得以有效体现：
在这里插入图片描述

但仅仅因为某个指标基于客观标准并且能够进行定量测量，也并不一定意味着那些测量值就是有用的。我们需要自定义指标，由业务需求和用户体验来决定。

自定义指标

有时候，可能会有某个特定网站比较独树一帜，需要额外的指标来捕获完整的性能全貌。例如，LCP 指标用于测量页面的主要内容何时完成加载，但在某些情况下，最大元素并不是页面主要内容的一部分，因此 LCP 就不再适用。

为了解决这种情况，Web 性能工作组还推出了一系列较低级别的标准化 API，通过这些API我们可以实现各种自定义指标。API如下、具体使用本文不做展开：

  • 用户计时 API https://w3c.github.io/user-timing/
  • 长任务 API https://w3c.github.io/longtasks/
  • 元素计时 API https://wicg.github.io/element-timing/
  • 导航计时 API https://w3c.github.io/navigation-timing/
  • 资源计时 API https://w3c.github.io/resource-timing/
  • 服务器计时 https://w3c.github.io/server-timing/

比较常见的自定义指标方式是结合Performance时间 + 交互API统计时间 + js dom展示事件打点

二、RAIL 体验模型

RAIL 模型是 Chrome 团队于 2020年 发布的一种以用户为中心的性能模型，它将用户体验分解为关键操作并提供了一种考虑性能的结构。RAIL 是 response （响应）、 animation（动画）、idle（浏览器空置时间）和 load（加载）。

从这四个模块角度来思考你的产品。如果在每个模块上，你都可以达到性能优化的目标值，那么最终用户感受到的将会是极致的体验。

在 RAIL 模型中，通常建议性能阈值：

  • Response：点击/轻触后 100 ms 内得到响应；
  • Animation：每一帧的渲染在 16 ms 内完成；拖拽后的页面渲染也要在 16 ms 内完成；
  • Idle：合理地使用浏览器空闲时间；任务要在 50 ms 内完成；
  • Page Load：加载的过程要满足“响应”目标；最重要的内容要在 1000 ms 内完成加载。

p-rail

在此性能目标的基础上，结合度量工具进行统计，便能对线上用户的 RAIL 性能情况得到统计和分析评估。

三、性能度量工具

很多工具能够帮助我们获取或度量分析上文中的一些通用性指标数据。

一类工具就是基于模拟器或者仿真环境机制的合成监控（Synthetic Monitoring，SYN），最典型的就是Chrome DevTools：

Chrome DevTools

Chrome 浏览器开发者工具中的 Lighthouse 和 Performance 能有效帮助我们进行性能分析：

  • Lighthouse：生成性能分析报告。并且给予相关优化建议；
  • Performace：分析运行时数据报告，包含阻塞、重排等细节信息；

p-1-chrome_tools

根据这两个有效工具能够帮我们分析当前页面/运行的性能情况，以便有效做出优化。具体工具使用可以看对应官网文档《Chrome-Analyze runtime performance》、《Using Lighthouse To Improve Page Load Performance》

lighthouse 的本地使用/脚本化

Nodejs 12.x 版本起支持，可以直接安装 lighthouse 在本地：

npm i -g lighthouse

简单分析，比如：

# lighthouse URL地址 参数
lighthouse https://blog.michealwayne.cn

以此为基础，我们可以用 Nodejs 写脚本，并尝试将分析工作自动化及平台化。比如 https://web.dev/measure/ 中的 PageSpeed测试。

p-pagespeed

*React Profiler 分析 React 性能

React Profiler 是 React 官方提供的性能审查工具。React 16.5 添加了对新 DevTools 分析器插件的支持。该插件使用 React 的实验性 Profiler API 来收集有关渲染的每个组件的时间信息，以便识别 React 应用程序中的性能瓶颈。使用官网说明https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html

p-react-profiler

*通过 Web Vitals库测量“Core Web Vitals”

若要衡量所有核心网页指标，最简单的方法是使用 web-vitals JavaScript 库，这是一个可用于生产环境的小型底层 Web API 封装容器，用于衡量每个指标，并且衡量方式与上述所有 Google 工具报告这些指标的方式完全一致。

借助 web-vitals 库，您可以像调用一个函数一样轻松衡量每个指标（如需查看完整的用法和 API 详情，请参阅相关文档）：

import {onCLS, onFID, onLCP} from 'web-vitals';function sendToAnalytics(metric) {const body = JSON.stringify(metric);// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||fetch('/analytics', {body, method: 'POST', keepalive: true});
}onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

将网站配置为使用 web-vitals 库衡量核心网页指标数据并将其发送到分析端点后，下一步是汇总并报告这些数据，看您的网页是否至少有 75% 的网页访问达到建议的阈值。

*通过 webpack-bundle-analyzer 和 vue-cli report 分析模块资源大小

这两个插件不是典型的性能度量工具，但我们知道影响前端加载和执行时间的一大重要因素就是资源大小，这两个工具就是便于分析产物及依赖资源大小的典型插件。

通过webpack-bundle-analyzer，我们可以分析各个模块的大小，进行对性能影响最大的模块进行优化。vue-cli report 也集成了这功能。

p-webpack-report

真实场景的性能分析工具：WebPageTest

WebPageTest（地址https://www.webpagetest.org/），如下图所示、通过浏览器访问并请添加图片描述
基于输入的 WebSite URL，以及选择的国家城市、浏览器类型、网络带宽等信息，启动对应的远程服务器上的浏览器进行性能分析测试。相似的还有 YSlow、PageSpeed。
请添加图片描述

其他性能测试方案

另外一些工具基于真实环境场景，这类就是真实用户监控（Real User Monitoring，RUM）：

使用性能 SDK

如 APM-SkyWalking client。优点是方案与到时候线上用户一致，缺点是在测试环节样本少，需要暴露到线上。

类似的还有非常著名的 Sentry，它们都是RUM。

借助工具录视频

通过真机自动化工具直接进行页面访问时的视频录制，优点是可以和 QA 设施相结合，还能同时测试内存和 CPU 等信息。缺点是对于真实用户的监控力度不足、难以模拟各种场景。

借助端侧打点

与端侧能力相结合，通过像素检测等手段进行打点上报。优点是能兼顾线上用户及 QA 设施结合。缺点是只能作用在端内业务，无法检测端外业务。

总结

本文以web性能优化为背景，介绍前期最应该关注的内容：性能指标。

  • 基础指标:FCP、FMP、LCP等
  • 交互指标:TTI、FID等
  • 用户感知:PSI、TBT、CLS等

另外简单介绍了RAIL性能模型以及典型的检测工具：Chrome DevTools、Lighthouse、React Profiler、Webpack Bundle Analyzer、WebPageTest。

性能指标以及度量工具是定位性能问题、制定性能优化方案的基石，下一篇将开始介绍常见性能优化手段。

作者联系方式
  • michealwayne@163.com
  • GitHub：http://github.com/MichealWayne

参考链接

  • 《Google-Developer Loading Performace》https://developers.google.com/web/fundamentals/performance/get-started?hl=zh-cn
  • 《Google-Developer Rendering Performace》https://developers.google.com/web/fundamentals/performance/rendering?hl=zh-cn
  • 《Becoming Wyzerr: The 8-Second Rule》(https://medium.com/wisdom-blog/becoming-wyzerr-the-8-second-rule-84a814fa2a02)(https://medium.com/wisdom-blog/becoming-wyzerr-the-8-second-rule-84a814fa2a02)
  • 《以用户为中心的性能指标》https://web.dev/user-centric-performance-metrics/
  • 《WebDev RAIL 模型》https://web.dev/rail/
  • 《MDN-Web 性能》https://developer.mozilla.org/zh-CN/docs/Web/Performance
  • 《MDN-Performance》https://developer.mozilla.org/zh-CN/docs/Web/API/Performance
  • 《嗨，送你一张 Web 性能优化地图》https://github.com/berwin/Blog/issues/23
  • 《Web Vitals》https://web.dev/learn-web-vitals/
  • Web vitals库 https://github.com/GoogleChrome/web-vitals

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/249124.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Spark系列3】RDD源码解析实战

【Spark系列3】RDD源码解析实战

本文主要讲 1、什么是RDD 2、RDD是如何从数据中构建 一、什么是RDD？ RDD：弹性分布式数据集，Resillient Distributed Dataset的缩写。 个人理解：RDD是一个容错的、并行的数据结构，可以让用户显式的将数据存储到磁盘…
阅读更多...
DVI接口如何连接HDMI接口显示器？DVI转HDMI转换器DHA

DVI接口如何连接HDMI接口显示器？DVI转HDMI转换器DHA

DVI转HDMI转换器DHA简介 DVI转HDMI转换器DHA能够将DVI信号和R/L音频信号输入转换成HDMI信号输出,独特的功能使其顺畅地整合到家庭影院中，并且播放出高品质的图像。主要用于数据监控中心、大型会议展示中心、学校及各个公司 DVI转HDMI转换器DHA特点 01.支持分辨率4K…
阅读更多...
【TCP】三次握手（建立连接）

【TCP】三次握手（建立连接）

前言 在网络通信的世界里，可靠传输协议（TCP）扮演着重要的角色，它保证了数据包能够按顺序、完整地从发送端传送到接收端。TCP协议中有一个至关重要的机制——三次握手。这一过程确保了两个TCP设备在开始数据传输之前建立起一个稳定…
阅读更多...
内衣洗衣机有必要买吗？最好用的迷你洗衣机推荐

内衣洗衣机有必要买吗？最好用的迷你洗衣机推荐

随着内衣洗衣机的流行，很多小伙伴在纠结该不该入手一款内衣洗衣机，专门来洗一些贴身衣物，答案是非常有必要的，因为我们现在市面上的大型洗衣机只能做清洁，无法对我们的贴身衣物进行一个高强度的清洁，而小小…
阅读更多...
手写分布式存储系统v0.1版本

手写分布式存储系统v0.1版本

引言 这是手写分布式存储系统v0.1版本，只有一个目标就是支持通过tcp接收数据并落地到磁盘文件(单机模式)，那接下来就开始吧 设计 实现一个系统，设计是最过瘾的过程没有之一，类似你搭积木前在脑海设计构建一副大致的“雏形”&am…
阅读更多...
力扣hot100 最小路径和 多维DP 滚动数组 一题多解

力扣hot100 最小路径和 多维DP 滚动数组 一题多解

Problem: 64. 最小路径和 文章目录 思路💖 朴素版💖 空间优化版 思路 👨‍🏫 路飞 💖 朴素版 ⏰ 时间复杂度: O ( n m ) O(nm) O(nm) 🌎 空间复杂度: O ( n m ) O(nm) O(nm) class Solution {public …
阅读更多...
查看Windows 所有账户方法

查看Windows 所有账户方法

目标 了解Windows查看所有账户的方法 方法 方法1：本地和用户组 按下Win X键，选择“计算机管理”。在计算机管理界面的左侧面板中，展开“系统工具” -> “本地用户和组” -> “用户”。在右侧窗口中，查看列出的所有用户账…
阅读更多...
数据结构+算法（第01篇）：走下神坛吧！算法

数据结构+算法（第01篇）：走下神坛吧！算法

作者简介：大家好，我是smart哥，前中兴通讯、美团架构师，现某互联网公司CTO 联系qq：184480602，加我进群，大家一起学习，一起进步，一起对抗互联网寒冬 学习必须往深处挖&…
阅读更多...
科技云报道：新趋势下，国产数据库或“春山可望”

科技云报道：新趋势下，国产数据库或“春山可望”

科技云报道原创。 从540亿元到1286亿元——这是中国通信标准化协会大数据技术标准推进委员会针对中国数据库行业给出的一份预测报告。 报告指出，未来五年，中国数据库行业将从百亿级市场跨越成为千亿级市场。 最近两年，中国的数据库行业似乎…
阅读更多...
Docker核心教程

Docker核心教程

1. 概述 官网：https://docs.docker.com/ Docker Hub 网站：https://hub.docker.com/ 容器较为官方的解释： 一句话概括容器：容器就是将软件打包成标准化单元，以用于开发、交付和部署。 容器镜像是轻量的、可执行的独立…
阅读更多...
leetcode—跳跃游戏—贪心算法

leetcode—跳跃游戏—贪心算法

1 跳跃游戏1 给你一个非负整数数组 nums ，你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标，如果可以，返回 true ；否则，返回 false 。 示例 1&a…
阅读更多...
Codeforces Round 922 (Div. 2)补题

Codeforces Round 922 (Div. 2)补题

Brick Wall（Problem - A - Codeforces） 题目大意：规定砖的大小为1*k（k>2）,现在有一面n*m的砖墙，n是墙高，m是墙宽，砖在砖墙中有两种放法，水平放置和竖直放置&#xff…
阅读更多...
注册亚马逊店铺用动态IP可以吗？

注册亚马逊店铺用动态IP可以吗？

注册亚马逊店铺可以用动态IP，只要是独立且干净的网线就没问题，亚马逊规则要求一个IP地址只能出现一个亚马逊店铺，若使用不当会导致关联账户。 固定ip可以给我们的账户带来更多的安全，要知道关联问题是亚马逊上的一个大问题&#…
阅读更多...
《动手学深度学习(PyTorch版)》笔记4.8

《动手学深度学习(PyTorch版)》笔记4.8

注：书中对代码的讲解并不详细，本文对很多细节做了详细注释。另外，书上的源代码是在Jupyter Notebook上运行的，较为分散，本文将代码集中起来，并加以完善，全部用vscode在python 3.9.18下测试通过。…
阅读更多...
人工智能基础-Numpy.array基本操作

人工智能基础-Numpy.array基本操作

基本属性 查看维度 x.ndim查看维度（元组形式） x.shape元素个数 x.size数据访问 子矩阵 内容同步修改 加是copy（）则不同步修改 Reshape 修改维度 参数为-1时自动识别个数 合并 np.concatenate([x, y])沿着列合并 np.co…
阅读更多...
第十四届蓝桥杯大赛软件赛省赛（C/C++ 大学B组）题解

第十四届蓝桥杯大赛软件赛省赛（C/C++ 大学B组）题解

尝试再做一次，我记得还是有点难，我会尽量多写一点解析，尽量让基础比较弱的友友也能看懂，希望能给你带来帮助 目录 1. 日期统计 题目描述 解题思路 具体代码 2. 01 串的熵 题目描述 解题思路 具体代码 3. 冶炼金属 题目…
阅读更多...
如何编写具有完备性的测试用例 ？ 具体思路是什么 ？ 全套解决方案打包呈现给你 。

如何编写具有完备性的测试用例 ？ 具体思路是什么 ？ 全套解决方案打包呈现给你 。

设计测试用例应该算是测试人员最为主要的工作之一 ，好的测试用例往往具有覆盖性强 ，扩展性高以及复用性好等特点 。该如何设计出好的测试用例 ？是我们每一位测试人员需要重点思考的问题 ，下面是我对设计测试用例设计的思考 &#…
阅读更多...
#RAG|NLP|Jieba|PDF2WORD# pdf转word-换行问题

#RAG|NLP|Jieba|PDF2WORD# pdf转word-换行问题

文档在生成PDF时,文宁都发生了什么。本文讲解了配置对象、resources对象和content对象的作用,以及字体、宇号、坐标、文本摆放等过程。同时,还解释了为什么PDF转word或转文字都是一行一行的以及为什么页眉页脚的问题会加大识别难度。最后提到了文本的编码和PDF中缺少文档结构标…
阅读更多...
如何输入手机验证码才能查询?确保本人查询!

如何输入手机验证码才能查询?确保本人查询!

易查分的手机验证码功能可以通过预留手机号，让用户查询时输入验证码，确保是本人进行查询。本次就来介绍如何开启【手机验证码功能】。 📌使用教程 01准备电子表格 在准备表格时，建立查询时，查询条件必须设置两个或者两…
阅读更多...
ElementUI 组件：Container 布局容器实例

ElementUI 组件：Container 布局容器实例

ElementUI安装与使用指南 Container 布局容器 点击下载learnelementuispringboot项目源码 效果图 项目里el-container-example.vue代码 <script> export default {name: el_container_example,data() {const item {date: 2024-01-31,name: 国龙,address: 上海市某区…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023