前端性能API导航：精通页面加载指标收集

在当今的数字环境中，网站性能至关重要。加载缓慢的网站会导致用户沮丧、放弃购物车，并最终造成收入损失。无论您的用户身处全球何地，优化前端性能对于提供积极的用户体验都至关重要。前端性能API提供了强大的工具，用于测量和分析页面加载性能的各个方面。本综合指南将引导您利用导航计时API（Navigation Timing API）及其他相关性能接口来收集和理解关键的页面加载指标，使您能够识别瓶颈，为全球用户提高网站的速度和响应能力。

理解页面加载指标的重要性

页面加载指标为了解您的网站加载速度以及用户可交互的速度提供了宝贵的见解。这些指标至关重要，原因如下：

用户体验： 加载更快的网站能提供更流畅、更愉悦的用户体验，从而提高用户参与度和满意度。想象一下，一位在东京的用户试图访问您的电子商务网站；缓慢的加载体验很可能会导致他们放弃购买。
SEO排名： 像谷歌这样的搜索引擎会将页面速度视为一个排名因素。优化网站性能可以提高您在搜索引擎中的可见度。
转化率： 研究表明，页面加载时间与转化率之间存在直接关联。加载更快的页面通常会带来更高的转化率，尤其是在网速较慢的地区。
移动端优化： 随着移动设备使用的日益普及，针对移动性能进行优化至关重要。页面加载时间会显著影响移动用户体验，尤其是在带宽有限的地区。例如，依赖3G连接的印度用户会比拥有高速光纤连接的用户更青睐一个快速加载的网站。
全球覆盖： 性能可能会因用户的地理位置、网络条件和设备能力而有显著差异。监控来自不同地区的性能有助于识别需要优化的领域。

前端性能API简介

前端性能API是一组JavaScript接口，提供对网页性能相关数据的访问。该API允许开发人员测量页面加载时间、资源加载和其他性能特征的各个方面。导航计时API（Navigation Timing API）作为前端性能API的关键组成部分，提供了关于页面加载过程各个阶段的详细计时信息。

性能API的关键组成部分：

导航计时API (Navigation Timing API)： 提供有关页面加载过程不同阶段的计时信息，例如DNS查询、TCP连接、请求和响应时间以及DOM处理。
资源计时API (Resource Timing API)： 提供页面加载的单个资源（如图像、脚本和样式表）的计时信息。这对于了解哪些资产对加载时间贡献最大非常有价值，尤其是在根据设备和地区提供不同分辨率的图像时（例如，为支持的浏览器提供WebP图像以获得更好的压缩效果）。
用户计时API (User Timing API)： 允许开发人员定义自定义性能指标，并在代码中标记特定点以测量执行时间。
绘制计时API (Paint Timing API)： 提供与屏幕内容渲染相关的指标，例如首次绘制（First Paint, FP）和首次内容绘制（First Contentful Paint, FCP）。
最大内容绘制 (Largest Contentful Paint, LCP)： 报告视口内可见的最大图像或文本块的渲染时间，相对于页面首次开始加载的时间。这是谷歌核心网页指标（Core Web Vitals）中的一个关键指标。
首次输入延迟 (First Input Delay, FID)： 测量从用户首次与页面交互（例如，点击链接、轻点按钮或使用自定义的、由JavaScript驱动的控件）到浏览器实际能够开始处理事件处理程序以响应该交互的时间。
累积布局偏移 (Cumulative Layout Shift, CLS)： 测量在页面整个生命周期内发生的所有意外布局偏移的总和。

使用导航计时API收集页面加载指标

导航计时API提供了大量关于页面加载过程的信息。要访问这些数据，您可以在JavaScript中使用 performance.timing 属性。

示例：收集导航计时数据

以下是一个如何收集导航计时数据并将其记录到控制台的示例：


if (window.performance && window.performance.timing) {
  const timing = window.performance.timing;
  console.log('Navigation Start:', timing.navigationStart);
  console.log('Fetch Start:', timing.fetchStart);
  console.log('Domain Lookup Start:', timing.domainLookupStart);
  console.log('Domain Lookup End:', timing.domainLookupEnd);
  console.log('Connect Start:', timing.connectStart);
  console.log('Connect End:', timing.connectEnd);
  console.log('Request Start:', timing.requestStart);
  console.log('Response Start:', timing.responseStart);
  console.log('Response End:', timing.responseEnd);
  console.log('DOM Loading:', timing.domLoading);
  console.log('DOM Interactive:', timing.domInteractive);
  console.log('DOM Complete:', timing.domComplete);
  console.log('Load Event Start:', timing.loadEventStart);
  console.log('Load Event End:', timing.loadEventEnd);
}

重要提示： performance.timing 对象已被弃用，推荐使用 PerformanceNavigationTiming 接口。建议在现代浏览器中使用后者。

使用PerformanceNavigationTiming


if (window.performance && window.performance.getEntriesByType) {
  const navigationEntries = performance.getEntriesByType('navigation');

  if (navigationEntries && navigationEntries.length > 0) {
    const navigationEntry = navigationEntries[0];

    console.log('Navigation Type:', navigationEntry.type); // e.g., 'navigate', 'reload', 'back_forward'
    console.log('Navigation Start:', navigationEntry.startTime);
    console.log('Fetch Start:', navigationEntry.fetchStart);
    console.log('Domain Lookup Start:', navigationEntry.domainLookupStart);
    console.log('Domain Lookup End:', navigationEntry.domainLookupEnd);
    console.log('Connect Start:', navigationEntry.connectStart);
    console.log('Connect End:', navigationEntry.connectEnd);
    console.log('Request Start:', navigationEntry.requestStart);
    console.log('Response Start:', navigationEntry.responseStart);
    console.log('Response End:', navigationEntry.responseEnd);
    console.log('DOM Interactive:', navigationEntry.domInteractive);
    console.log('DOM Complete:', navigationEntry.domComplete);
    console.log('Load Event Start:', navigationEntry.loadEventStart);
    console.log('Load Event End:', navigationEntry.loadEventEnd);
    console.log('Duration:', navigationEntry.duration);


    // Calculate Time to First Byte (TTFB)
    const ttfb = navigationEntry.responseStart - navigationEntry.requestStart;
    console.log('TTFB:', ttfb);

    // Calculate DOM Load Time
    const domLoadTime = navigationEntry.domComplete - navigationEntry.domLoading;
    console.log('DOM Load Time:', domLoadTime);

    // Calculate Page Load Time
    const pageLoadTime = navigationEntry.loadEventEnd - navigationEntry.startTime;
    console.log('Page Load Time:', pageLoadTime);
  }
}

理解导航计时指标

以下是导航计时API提供的一些关键指标的分解说明：

navigationStart: 文档导航开始的时间。
fetchStart: 浏览器开始获取文档的时间。
domainLookupStart: 浏览器开始对文档域名进行DNS查询的时间。
domainLookupEnd: 浏览器完成对文档域名DNS查询的时间。
connectStart: 浏览器开始与服务器建立连接的时间。
connectEnd: 浏览器完成与服务器建立连接的时间。考虑在不同地区使用CDN的影响；一个配置良好的CDN可以显著减少全球用户的连接时间。
requestStart: 浏览器开始向服务器发送请求的时间。
responseStart: 浏览器从服务器接收到响应的第一个字节的时间。这是测量首字节时间（Time to First Byte, TTFB）的起点。
responseEnd: 浏览器从服务器接收到响应的最后一个字节的时间。
domLoading: 浏览器开始解析HTML文档的时间。
domInteractive: 浏览器完成解析HTML文档并且DOM准备就绪的时间。此时用户可以与页面交互，尽管某些资源可能仍在加载中。
domComplete: 浏览器完成解析HTML文档并且所有资源（图像、脚本等）都已加载完成的时间。
loadEventStart: load 事件开始的时间。
loadEventEnd: load 事件完成的时间。这通常被认为是页面完全加载完成的时间点。
duration: 导航所花费的总时间。可通过 PerformanceNavigationTiming 获取。

分析页面加载指标以进行优化

一旦收集了页面加载指标，下一步就是分析它们以确定优化的领域。以下是一些关键策略：

1. 识别瓶颈

通过检查导航计时数据，您可以精确定位页面加载过程中耗时最长的阶段。例如，如果 domainLookupEnd - domainLookupStart 的值很高，则表示存在DNS解析问题。如果 responseEnd - responseStart 的值很高，则表明服务器响应时间慢或内容体积大。

示例： 设想一个场景，南美用户的 connectEnd - connectStart 值明显高于北美用户。这可能表明需要在更靠近南美用户的地方部署拥有存在点（PoP）的CDN。

2. 优化服务器响应时间（TTFB）

首字节时间（TTFB）是一个关键指标，用于测量浏览器从服务器接收到第一个字节数据所需的时间。高TTFB会严重影响整体页面加载时间。

改善TTFB的策略：

优化服务器端代码： 提高服务器端代码的效率，以减少生成HTML响应所需的时间。使用性能分析工具来识别慢查询或低效算法。
使用内容分发网络（CDN）： CDN可以缓存您的网站内容，并从离用户更近的服务器提供服务，从而减少延迟并改善TTFB。考虑使用拥有强大全球网络的CDN，以满足不同地区用户的需求。
启用HTTP缓存： 配置您的服务器发送适当的HTTP缓存头，以允许浏览器缓存静态资产。这可以显著减少对服务器的请求次数，并改善后续页面加载的TTFB。有效利用浏览器缓存。
优化数据库查询： 缓慢的数据库查询会严重影响TTFB。通过使用索引、避免全表扫描和缓存频繁访问的数据来优化您的查询。
使用更快的网络托管服务： 如果您当前的托管服务速度慢，可以考虑更换为更快的服务。

3. 优化资源加载

资源计时API提供了有关单个资源（如图像、脚本和样式表）加载时间的详细信息。使用这些数据来识别加载时间长的资源并进行优化。

优化资源加载的策略：

压缩图像： 使用图像优化工具在不牺牲质量的情况下压缩图像。考虑使用WebP等现代图像格式，它们比JPEG和PNG提供更好的压缩效果。使用 <picture> 元素或响应式图像技术，根据用户的设备和屏幕尺寸提供不同的图像分辨率。
压缩CSS和JavaScript： 从您的CSS和JavaScript文件中移除不必要的字符和空格，以减小它们的体积。
打包CSS和JavaScript文件： 将多个CSS和JavaScript文件合并为更少的文件，以减少HTTP请求的数量。使用Webpack、Parcel或Rollup等工具进行打包。
延迟加载非关键资源： 使用懒加载等技术异步加载非关键资源（例如，首屏下方的图像）。
为静态资产使用CDN： 从CDN提供静态资产（图像、CSS、JavaScript），以提高加载速度。
优先加载关键资源： 使用 <link rel="preload"> 来优先加载关键资源，例如CSS和字体，以改善页面的初始渲染。

4. 优化渲染

优化您网站的渲染方式以改善用户体验。关键指标包括首次绘制（FP）、首次内容绘制（FCP）和最大内容绘制（LCP）。

优化渲染的策略：

优化CSS交付： 以避免渲染阻塞的方式交付CSS。使用关键CSS等技术，将初始视口所需的CSS内联，并异步加载剩余的CSS。
避免长时间运行的JavaScript： 将长时间运行的JavaScript任务分解为更小的块，以防止阻塞主线程。
使用Web Workers： 将计算密集型任务移至Web Workers，以避免阻塞主线程。
优化JavaScript执行： 使用高效的JavaScript代码，避免不必要的DOM操作。像React、Vue和Angular这样的虚拟DOM库可以帮助优化DOM更新。
减少布局偏移： 最大限度地减少意外的布局偏移，以提高视觉稳定性。为图像和广告预留空间，以防止内容在页面加载时跳动。使用累积布局偏移（CLS）指标来识别发生布局偏移的区域。
优化字体： 高效使用网络字体，方法包括预加载它们，使用 font-display: swap; 避免不可见文本，以及使用字体子集来减小字体文件的大小。在适当的情况下考虑使用系统字体。

5. 持续监控性能

网站性能并非一劳永逸。持续监控性能以识别并解决新出现的瓶颈至关重要。使用性能监控工具来跟踪关键指标随时间的变化，并设置警报以便在性能下降时通知您。定期使用Google PageSpeed Insights、WebPageTest和Lighthouse等工具审核您的网站性能。考虑实施真实用户监控（RUM）来收集来自不同位置的真实用户的性能数据。

利用用户计时API进行自定义指标测量

用户计时API允许您定义自定义性能指标，并测量特定代码段执行所需的时间。这对于跟踪自定义组件或特定用户交互的性能非常有用。

示例：测量自定义指标


// Start measuring
performance.mark('start-custom-metric');

// Perform some operation
// ... your code here ...

// End measuring
performance.mark('end-custom-metric');

// Calculate the duration
performance.measure('custom-metric', 'start-custom-metric', 'end-custom-metric');

// Get the measurement
const measures = performance.getEntriesByType('measure');
if (measures && measures.length > 0) {
  const customMetric = measures[0];
  console.log('Custom Metric Duration:', customMetric.duration);
}

通过真实用户监控（RUM）获取全球性能洞察

虽然综合测试（例如，使用Lighthouse）提供了宝贵的见解，但真实用户监控（RUM）能更准确地反映您的网站在不同地点和各种网络条件下为真实用户提供的性能。RUM直接从用户的浏览器收集性能数据，并提供对页面加载时间、TTFB和错误率等关键指标的洞察。考虑使用RUM工具，它允许您按地理位置、设备、浏览器和网络类型对数据进行分段，以识别特定于某些用户群体的性能问题。

全球RUM实施的注意事项：

数据隐私： 在收集用户数据时，确保遵守GDPR和CCPA等数据隐私法规。在可能的情况下，对敏感数据进行匿名化或假名化处理。
采样： 考虑使用采样来减少收集的数据量，并最大限度地减少对用户性能的影响。
地理分段： 按地理区域对您的RUM数据进行分段，以识别特定于某些地点的性能问题。
网络条件： 跟踪不同网络类型（例如，3G、4G、Wi-Fi）的性能，以了解网络条件如何影响用户体验。

选择合适的工具

有几种工具可以帮助您收集和分析页面加载指标。一些流行的选项包括：

Google PageSpeed Insights： 一个免费工具，可分析您网站的性能并提供改进建议。
WebPageTest： 一个免费工具，允许您从不同地点和浏览器测试网站的性能。
Lighthouse： 一个开源工具，可审核您网站的性能、可访问性和SEO。它已集成到Chrome开发者工具中。
New Relic： 一个全面的监控平台，可提供对您网站性能的实时洞察。
Datadog： 一个监控和分析平台，提供真实用户监控和综合测试功能。
Sentry： 一个错误跟踪和性能监控平台，可帮助您识别和修复性能问题。

结论

优化前端性能是一个持续的过程，需要不断的监控、分析和优化。通过利用前端性能API和其他工具，您可以获得关于网站性能的宝贵见解，并确定需要改进的领域。请记住要考虑您受众的全球性，并为不同地点和不同网络条件下的用户进行优化。通过关注用户体验并持续监控性能，您可以确保您的网站为所有用户提供快速且响应迅速的体验，无论他们身在何处。实施这些策略将帮助您为全球受众创建一个更快、更具吸引力且更成功的网站。