优化用户体验：关键 Web 性能指标的获取、分析、优化方法

前言

在当今互联网高速发展的时代用户对于网页的加载速度和响应时间越来越敏感。一个性能表现不佳的网页不仅会影响用户体验，还可能导致用户流失。
因此，了解和优化网页性能指标是每个开发者的必修课。今天我们就来聊聊常见的网页性能指标以及如何获取这些指标。

常见的 Web 页面性能指标

1. 页面加载时间（Load Time）

页面加载时间指的是从用户开始请求网页到页面完全加载完成所花费的时间。这个指标直接影响用户对网站的第一印象。

2. 首次内容绘制（First Contentful Paint, FCP）

FCP 指的是浏览器从开始加载网页到页面上任何内容（例如文本、图片、SVG）的首次绘制时间。这个指标反映了用户看到第一个内容的时间。

3. 首次有意义绘制（First Meaningful Paint, FMP）

FMP 是浏览器从开始加载网页到页面主要内容绘制完成的时间。这个指标主要体现了用户看到主要内容的时间。

4. 完全加载时间（Load Event End）

完全加载时间是指页面所有资源（图片、CSS、JS等）加载完成后的时间。这个指标对整体的用户体验影响较大。

5. 交互时间（Time to Interactive, TTI）

TTI 是指页面从开始加载到用户可以与页面进行交互的时间这个指标对用户体验非常关键，因为它直接影响到用户能否快速操作页面。

6. 页面资源加载时间（Resource Load Time）

页面资源加载时间指的是页面中的各个资源（如图片、JavaScript、CSS文件等）的加载时间。这个指标帮助开发者了解各个资源的加载效率。

获取 Web 页面性能指标的方法

Performance API 是一种浏览器原生的 API，专门用于获取高精度的时间数据，并帮助我们分析网页性能。我们可以使用 Performance API 来获取各种时间点，然后计算各个性能指标。以下是一些常见性能指标的计算方法：

window.addEventListener('load', () => {const performanceData = window.performance.timing;// 页面加载时间const pageLoadTime = performanceData.loadEventEnd - performanceData.navigationStart;// 首次内容绘制 (FCP)const [firstContentfulPaintEntry] = performance.getEntriesByName('first-contentful-paint');const fcp = firstContentfulPaintEntry ? firstContentfulPaintEntry.startTime : 0;// 首次有意义绘制 (FMP)// 注意：FMP 是一个比较复杂的指标，通常需要特殊工具或浏览器支持。const [firstMeaningfulPaintEntry] = performance.getEntriesByName('first-meaningful-paint');const fmp = firstMeaningfulPaintEntry ? firstMeaningfulPaintEntry.startTime : 0;// 交互时间 (TTI)const [timeToInteractiveEntry] = performance.getEntriesByName('interactive');const tti = timeToInteractiveEntry ? timeToInteractiveEntry.startTime : 0;// 页面完全加载时间const loadEventEnd = performanceData.loadEventEnd;const performanceMetrics = {pageLoadTime,fcp,fmp,tti,loadEventEnd};console.log('Performance Metrics:', performanceMetrics);});

获取页面加载时间:
```
const pageLoadTime = performanceData.loadEventEnd - performanceData.navigationStart;
```
navigationStart 表示导航开始的时间点，loadEventEnd 表示页面加载完成的时间点。

获取首次内容绘制时间 (FCP):

const [firstContentfulPaintEntry] = performance.getEntriesByName('first-contentful-paint');
const fcp = firstContentfulPaintEntry ? firstContentfulPaintEntry.startTime : 0;

使用 performance.getEntriesByName('first-contentful-paint') 获取 FCP 事件的时间。

获取首次有意义绘制时间 (FMP):

const [firstMeaningfulPaintEntry] = performance.getEntriesByName('first-meaningful-paint');
const fmp = firstMeaningfulPaintEntry ? firstMeaningfulPaintEntry.startTime : 0;

FMP 计算相对复杂，可能需要浏览器特殊支持或使用工具。

获取交互时间 (TTI):

const [timeToInteractiveEntry] = performance.getEntriesByName('interactive');
const tti = timeToInteractiveEntry ? timeToInteractiveEntry.startTime : 0;