性能优化指标

绘制

FP（First Paint）：首次绘制时间，指浏览器首次在屏幕上渲染像素的时间，代表页面开始渲染的时间点。它是评估页面渲染速度的重要指标。
FCP（First Contentful Paint）：首次内容绘制时间，是页面首次绘制任何有内容的像素到屏幕上的时间，代表页面首屏加载的时间点。
LCP（Last Contentful Paint）：最大内容绘制时间，指页面上最大的可见元素（文本、图像、视频等）绘制完成的时间，代表用户视觉上感知到页面加载完成的时间点。它是评估页面内容加载速度的重要指标之一。
FMP（First Meaningful Paint）：首次有意义绘制
TTI（Time to Interactive）：用户可交互时间，指页面加载完成并且用户能够与页面进行交互的时间，代表用户可以开始操作页面的时间点。（ssr 关注这个指标）
TBT（Total Blocking Time）：（FCP 到 TTI 的总阻塞时间）页面总阻塞时间，页面上出现阻塞的时间，指在页面变得完全交互之前，用户与页面上的元素交互时出现阻塞的时间。TBT 应该尽可能小，通常应该在 300 毫秒以内。
DCL（DOM Content Loaded）：表示浏览器完成解析 DOM 树并完成加载页面的时候。它通常用于评估页面脚本的加载性能。
SEO（Search Engine Optimization）：搜索引擎优化，网站在搜索引擎中的排名和可见性。评分范围从 0 到 100，100 分表示网站符合所有 SEO 最佳实践。 SEO 优化思路
1. 页面结构优化
  1. 优化 HTML 结构，使用语义化标签，避免使用无语义标签。
  2. title 、description 和 keywords优化
2. 内容优化：
  - 保证关键词覆盖率
  - 外部友情链接优化
  - 少用 iframe
  - 重要内容不用js输出
  - 重要内容放html前面
3. 技术向 SEO 优化
  1. 站点地图
  txt
```
# robots.txt
User-agent: *
Allow: /
Disallow: /admin/
Sitemap: https://example.com/sitemap.xml
```
  1
  2
  3
  4
  5
  1. 结构化数据
  json
```
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Example Domain",
  "url": "https://example.com"
  ...
}
</script>
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  1. 移动端兼容处理 CSS 媒体查询
  2. 性能优化
请求次数和大小

FP 和 FCP 上面两个可以通过浏览器提供的 api 来实现 Performance api，FMP 一般都是 Mutation Observer 监听到 DOM 变化

具体指标

DCL 和 L

DCL：DOMContentLoaded 事件，表示浏览器完成解析 DOM 树并完成加载页面的时候。（无需等待样式表、图标和子框架的完全加载）
L：Load 事件，表示浏览器完成加载页面，包括所有子框架（比如嵌套的 iframe）加载完成。（需要等待样式表、图标和子框架的完全加载）

由于目前大部分项目是 SPA 单页面应用，由 js 加载页面，所以 DCL 和 L 就不能够很好的衡量页面性能了。

FP、FCP 和 LCP

FP：首次绘制时间，指浏览器首次在屏幕上渲染像素的时间。（也就是白屏时间）
FCP：首次内容绘制时间，是页面首次绘制任何有内容的像素到屏幕上的时间。
LCP：最大内容绘制时间，指页面上最大的可见元素（文本、图像、视频等）绘制完成的时间。

FP 可能会和 FCP 同时触发，不可能会晚触发。

指标计算

常规指标采集：使用 Performance、PerformanceObserver AP 、webVital 来计算指标。
自定义指标采集： MutationObserver（FMP 监听主要内容 dom）。
额外指标：首字节、DNS 加载时间、服务端上报

上报： xhr（跨域）、图片

FP 和 FCP:

const paintEntries = performance.getEntriesByType("paint");
paintEntries.forEach((entry) => {
  console.log(entry.name, entry.startTime, "ms");
});

// First Paint xxxms
// First Contentful Paint xxxms

LCP

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("LCP：", entry.startTime, "ms");
  });
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

性能优化指标 ​

具体指标 ​

DCL 和 L ​

FP、FCP 和 LCP ​

指标计算 ​

性能优化指标

具体指标

DCL 和 L

FP、FCP 和 LCP

指标计算