性能分析工具
LightHouse
Lighthouse 提供针对性能、无障碍功能、渐进式 Web 应用、SEO 等方面的审核。可以对任何公开网页或需要身份验证的网页运行Lighthouse。
安装：
1.chrome应用商店安装扩展程序下载地址 2. 使用开发者工具内LightHouse工具
使用步骤：
- chrome打开控制台，打开工具Lighthouse
- 模式选择Navigation;Device按需选择Mobile或者Desktop;Categories选择Performance
- 点击Analyze page load按钮,等待几分钟。直至出现下图。
测评结果
测评标准-Lighthouse-V10
| 审核 | 重量 |
|---|---|
| First Contentful Paint | 10% |
| 速度指数 | 10% |
| Largest Contentful Paint | 25% |
| Total Blocking Time | 30% |
| Cumulative Layout Shift | 25% |
怎么看：
- 看测评指标FCP、LCP、CLS、TBT、SI
- View TreeMap,看到静态资源的利用率情况
- 看诊断结果，给出的优化建议
PageSpeedInsight
测评地址
测评结果示例
支持测评指标
其他工具
Chrome-devTool里面的Performance面板、WebPageTest均可进行测量。webPageTest测评自服务官网结果
核心网页指标
核心网页指标是适用于所有网页的部分网页指标，应由所有网站所有者进行衡量，并且会在所有 Google 工具中显示。每个核心网页指标都代表用户体验的一个不同方面，在实际应用 中是可衡量的，并且反映了以用户为中心的关键结果的真实体验。
构成 Core Web Vitals 的指标会随着时间的推移而演变。当前这组策略侧重于用户体验的三个方面：加载、互动和视觉稳定性。它包括以下指标：
- Largest Contentful Paint (LCP) ：衡量加载性能。 为了提供良好的用户体验，LCP 必须在网页首次开始加载后的 2.5 秒内发生。
- Interaction to Next Paint (INP) ：衡量互动。为了提供良好的用户体验，网页的 INP 不得超过 200 毫秒。
- Cumulative Layout Shift (CLS) ：衡量视觉稳定性。为了提供良好的用户体验，必须将 CLS 保持在 0.1. 或更低。
LCP(Largest Contentful Paint)
Largest Contentful Paint (LCP) 是一种稳定的 Core Web Vitals 指标，用于衡量感知的加载速度。 它用于标记网页加载时间轴中可能加载了网页主要内容的时间点。快速 LCP 有助于让用户确信相应网页有用。 LCP 报告的是视口中可见最大图片或文本块的呈现时间
什么是良好的LCP得分
网站应力求将至少75%的网页访问的LCP时间控制在2.5秒甚至更短
分数是怎么算的
需要考虑哪些元素？
Largest Contentful Paint 考虑的元素类型包括：
<img>元素（第一帧呈现时间用于 GIF 或动画 PNG 等动画内容）<svg>元素内的<image>元素<video>元素（系统会使用视频的海报图片加载时间或第一帧显示时间，以较早者为准）- 一个元素，带有使用
url()函数（而不是 CSS 渐变）加载的背景图片 - 包含文本节点或其他内嵌级文本元素子元素的块级元素。
示例
INP(Interaction to Next Paint)
INP 会在网页生命周期内观察用户与网页进行的所有点击、点按和键盘互动的延迟时间，并报告最长持续时间，并忽略离群值。INP 较低意味着网页始终能够快速响应大多数用户互动。
良好的响应速度意味着网页对互动的响应速度很快。当网页响应互动时，浏览器会在呈现的下一帧中提供视觉反馈，表明互动已成功。
INP得分
针对用户发起的所有或大多数互动，最大限度地缩短从用户发起互动到下一帧绘制完成所需的时间
示例
INP示例效果对比 响应速度较差与良好的示例。在左侧，长任务会阻止手风琴打开。这会导致用户多次点击，认为体验不稳定。当主线程赶上来时，它会处理延迟的输入，导致手风琴式折叠意外打开和关闭。在屏幕右侧，响应速度更快的页面可快速打开手风琴，而不会出现突发事件。
CLS(Cumulative Layout Shift)
用于衡量视觉稳定性，因为它有助于量化用户遇到意外布局偏移的频率。CLS 衡量的是网页生命周期内发生的每次意外布局偏移的最大*布局偏移得分。如果资源以异步方式加载，或 DOM 元素被动态添加到网页中的现有内容之前，通常会发生网页内容意外移动的情况
什么是良好的CLS得分
为了提供良好的用户体验，网站的 CLS 得分必须不超过 0.1。为确保大多数用户都能达到此目标，我们建议衡量网页加载的第 75 个百分位（按移动设备和桌面设备细分）。
示例
其他性能指标
FCP（First Contentful Paint）
概念：首次有内容渲染的时间点.
FCP 衡量的是从用户首次导航到相应网页到该网页的任何部分呈现在屏幕上所用的时间。对于此指标，“内容”是指文本、图片（包括背景图片）、<svg> 元素或非白色 <canvas> 元素。
呈现第一个内容元素时，并非所有内容都会呈现。这是 FCP 和 Largest Contentful Paint (LCP) 之间的重要区别，LCP 衡量的是网页主要内容何时完成加载。
在性能统计指标中，从用户开始访问 Web 页面的时间点到 FCP 的时间点这段时间可以被视为无内容时间，也就是说在用户访问 Web 网页的过程中，FCP 时间点之前，用户看到的都是没有任何实际内容的屏幕，用户在这个阶段获取不到任何有用的信息。
示例：
良好的FCP得分是多少
网站的 FCP 不得超过 1.8 秒。为确保您的大多数用户都能达到此目标，建议您衡量第75 个百分位的网页加载情况（按移动设备和桌面设备细分）。
FID(First Input Delay)
概念：首次输入延迟，是度量用户第一次与页面交互的延迟时间，是用户第一次与页面交互到浏览器真正能够开始处理事件处理程序以响应该交互的时间。 用于捕获用户对网站的互动性和响应速度的第一印象。该指标衡量的是从用户首次与网页互动到浏览器实际能够响应此次互动之间的用时。 提示: First Input Delay (FID) 是衡量加载响应速度的稳定指标，因为它可以量化用户尝试与无响应的网页互动时的体验。较低的 FID 有助于确保网页易于使用。自 2024 年 3 月 12 日起，FID 将被Interaction to Next Paint (INP) 取代，成为网页核心指标。
FP(First Paint)
- 首次渲染的时间点。 在性能统计指标中，从用户开始访问 Web 页面的时间点到 FP 的时间点这段时间可以被视为 白屏时间，也就是说在用户访问 Web 网页的过程中，FP 时间点之前，用户看到的都是没有任何内容的白色屏幕，用户在这个阶段感知不到任何有效的工作在进行。
- 所以通常会反映页面的白屏时间，而白屏时间会反映当前 Web 页面的网络加载性能情况，当加载性能非常良好的情况下，白屏的时间就会越短，用户等待内容的时间就会越短，流失的概率就会降低。
下一个篇
LCP指标优化
