性能优化实战，提升FP、FCP、LCP和TTI的终极策略

Web性能优化实战：提升FP、FCP、LCP和TTI的全面优化策略

在现代Web开发中，性能优化是提升用户体验的关键因素。随着用户对加载速度的要求越来越高，Web开发者需要持续关注和优化页面加载的各个环节。为此，Google等公司提出了多个性能指标来帮助开发者衡量和优化页面的响应性和可用性，尤其是FP（First Paint）、FCP（First Contentful Paint）、LCP（Largest Contentful Paint）和TTI（Time to Interactive）四大指标，它们对用户体验有着深远的影响。

下面将通过一个电商网站的实战案例，结合项目背景、具体的优化措施以及性能测试数据，深入探讨如何通过优化这四个关键性能指标，提升网站的加载速度和交互性。

一、核心性能指标解析

在深入分析优化措施之前，我们首先来回顾一下四个关键性能指标的定义及其对用户体验的影响。

1. First Paint（FP） ：表示页面从空白到首次有颜色渲染的时间。虽然FP的出现标志着浏览器开始渲染页面，但它并不代表页面的实际内容已显示出来。
2. First Contentful Paint（FCP） ：表示页面上第一个有意义的内容（如文本、图片或SVG元素）被渲染的时间。FCP的时间较短，用户会感知到“页面正在加载”并可以开始理解页面结构。
3. Largest Contentful Paint（LCP） ：表示页面上最大、最重要的可视内容（如大图、主标题等）加载完成的时间。LCP直接影响用户对页面加载速度的感知，因此它是评估页面加载质量的核心指标。
4. Time to Interactive（TTI） ：表示页面完全交互可用的时间。即用户能够与页面开始交互的时刻，JavaScript加载并执行完成后，页面才具备完全的可交互性。

二、项目背景：电商网站首页的性能挑战

优化电商网站的一个首页。该首页包含以下主要元素：

• 大头图：展示当前促销活动，图像大且影响LCP。
• 产品列表：动态加载多个商品图像，可能导致FCP和LCP延迟。
• 广告横幅：异步加载，可能影响页面的整体加载时长。
• 导航条和JS交互：需要JavaScript执行后才能实现动态功能，影响TTI。
• 用户评论模块：需要通过JavaScript异步加载并渲染，可能会延迟交互时间。

为了提升用户体验，我们的目标是通过优化以下关键点：

• 提升页面的视觉反馈（FP和FCP）。
• 优化页面核心内容的加载（LCP）。
• 加快页面的交互性（TTI）。

三、优化策略

1. 提升FP与FCP：减少阻塞渲染

• 内联关键CSS：我们将首屏所需的CSS直接嵌入HTML文件中，避免外部请求延迟页面渲染。这样，页面的首屏内容能够更快渲染出来，减少空白等待时间。

<style>
  body { margin: 0; font-family: Arial, sans-serif; }
  header { background-color: #333; color: #fff; padding: 10px; }
  /* 只保留渲染首屏所需的CSS */
</style>

• 异步加载JavaScript：将非核心的JavaScript文件通过defer或async属性进行延迟加载，确保页面内容尽早渲染。

<!-- 异步加载非核心JavaScript -->
<script src="main.js" defer></script>

• 懒加载图片与视频：将页面上的非首屏图片和视频使用懒加载方式加载，避免它们阻塞页面的首屏渲染。

<img src="hero-banner.jpg" loading="lazy" alt="Hero Banner">

• 预加载关键资源：使用<link rel="preload">提前加载CSS、字体和JS文件，确保这些资源尽早准备好，避免影响页面首屏渲染。

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="core.js" as="script">

2. 优化LCP：优化核心内容的加载

• 图片优化：针对电商页面的大头图（LCP元素），使用了WebP格式对图片进行优化，同时启用了懒加载。

<picture>
  <source srcset="hero-banner.webp" type="image/webp">
  <img src="hero-banner.jpg" alt="Hero Banner">
</picture>

• 避免字体阻塞：通过font-display: swap确保页面加载时即使字体没有加载完成，也能显示内容，避免空白闪烁。

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
}

3. 优化TTI：提升页面交互性

• 代码拆分与懒加载：使用Webpack对JavaScript进行拆分，仅按需加载页面所需的功能模块，避免一次性加载过多的代码，导致长时间阻塞主线程。

import('./product-gallery').then(module => {
  module.loadGallery();
});

• 分割长任务：使用requestIdleCallback或setTimeout将长任务分割成多个短任务，避免单次执行时间过长（大于50ms）而阻塞主线程。

requestIdleCallback(() => {
  // 执行较轻的后台任务
});

• 使用Service Worker缓存：为静态资源添加缓存策略，减少网络请求次数，提升后续页面访问的加载速度。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then((registration) => {
    console.log('Service Worker registered:', registration);
  }).catch((error) => {
    console.error('Service Worker registration failed:', error);
  });
}

四、优化效果测试

我们使用了 Google Lighthouse 和 WebPageTest 进行优化前后的性能对比测试，以下是数据结果：

优化前性能数据

优化后性能数据

Google Lighthouse 评分对比

WebPageTest结果

五、总结与展望

深度理解并优化FP、FCP、FMP、LCP和TTI对于提升页面加载性能、增强用户体验具有不可或缺的作用。每个指标不仅独立衡量页面的不同性能方面，还可以通过优化策略相互配合，最终提供更加流畅和快速的浏览体验。在技术细节和工具的帮助下，开发者能够针对具体问题做出精准的优化，实现最终用户的满意度和站点的性能双赢。

附：性能优化 面试25问！带答案 戳我领取

1. script标签放在header里和放在body底部里有什么区别?
2. 前端性能优化指标有哪些?怎么进行性能检测?
3. SPA(单页应用)首屏加载速度慢怎么解决?
4. 如果使用CSS提高页面性能?
5. 怎么进行站点内的图片性能优化?
6. 虚拟DOM一定更快吗?
7. 有些框架不用虚拟dom，但是他们的性能也不错是为什么?
8. 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能?
9. 讲-下png8、png16、png32的区别，并简单讲讲 png 的压缩原理
10. 页面加载的过程中，JS文件是不是一定会阻塞 DOM 和 CSSOM 的构建？
11. React,memo()和 useMemo()的用法是什么，有哪些区别?
12. 导致页面加载白屏时间长的原因有哪些，怎么进行优化?
13. 如果一个列表有 100000 个数据，这个该怎么进行展示?
14. DNS 预解析是什么?怎么实现?
15. 在 React 中可以做哪些性能优化?
16. 浏览器为什么要请求并发数限制?
17. 如何确定页面的可用性时间，什么是 Performance API?
18. 谈谈对 window.requestAnimationFrame 的理解
19. css加载会造成阻塞吗?
20. 什么是内存泄漏?什么原因会导致呢?
21. 如何用webpack来优化前端性能
22. 说说常规的前端性能优化手段
23. 什么是Css Sprites?
24. CSS优化、提高性能的方法有哪些?
25. script 标签中， async 和 defer 两个属性有什么用途和区别?