React / Vue 项目如何提高 LCP / FCP

光影少年
120 阅读4分钟

1. FCP (First Contentful Paint) ：

  • 定义：FCP 是指页面首次呈现内容的时间。也就是从页面开始加载到浏览器渲染出第一部分 DOM 内容（文字、图片、canvas 等）的时间。FCP 是评估页面是否“能被看到”的一个非常重要的指标。
  • 关注点：主要关注的是页面的第一块内容显示是否迅速，通常是文本、图片或背景色等。

2. LCP (Largest Contentful Paint) ：

  • 定义：LCP 是指页面上最大的可视元素（文本、图片、视频等）渲染出来的时间。LCP 是衡量页面主要内容加载完成的时间，它关注的是用户看到的“最大可视内容”的显示时刻。
  • 关注点：LCP 主要关注的是 首屏加载的核心内容，如页面的主要图片、标题、hero 内容等。它比 FCP 更能反映页面加载的“完成度”。

FCP 和 LCP 的区别：

  • FCP 是 首次 渲染的内容出现的时间；而 LCP 是页面 最大内容元素 完全加载的时间。
  • LCP 更侧重页面的 核心展示内容，比如产品图、标题等，而 FCP 则是页面中最初的任何内容显示出来。
  • FCP 通常比 LCP 更早发生。

如何在 React 或 Vue 项目中提高 FCP 和 LCP？

🚀 1. 减少阻塞渲染的资源（CSS 和 JavaScript）

  • 优化 CSS 和 JavaScript 加载：

    • 使用 异步加载 (async) 或 延迟加载 (defer) 你的 JavaScript 文件。对于一些不影响首屏显示的 JavaScript（如下拉菜单、异步特效等），可以延迟加载。
    • 通过将 CSS 文件分割成多个小文件，仅加载当前页面所需的 CSS，避免全局 CSS 文件阻塞渲染。
    • 使用 Critical CSS 技术，将首屏需要的 CSS 内联到 HTML 中，以便更快渲染。

  • 分离并懒加载 JavaScript：
    React 和 Vue 都支持懒加载路由和组件，尽量避免一次性加载所有 JavaScript 代码，尤其是首屏不需要的部分。

    // React 使用 React.lazy 和 Suspense 实现组件懒加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

    // Vue 使用动态 import 实现组件懒加载
const LazyComponent = () => import('./LazyComponent.vue');

🚀 2. 使用服务器端渲染（SSR）或静态站点生成（SSG）

  • SSR（Server-Side Rendering） ：将页面内容在服务器端预渲染，减少客户端的渲染负担。对于 React 和 Vue 项目，Next.js（React）和 Nuxt.js（Vue）都支持 SSR。通过 SSR，页面可以更早地渲染出内容，减少 FCP 和 LCP 的时间。
  • SSG（Static Site Generation） ：生成静态 HTML 文件，浏览器直接加载 HTML，减少 JavaScript 的渲染时间。可以使用 Next.js 和 Nuxt.js 的静态导出功能。

🚀 3. 使用图片优化（懒加载和图像格式）

  • 懒加载图片：对于页面中不在视口内的图片使用懒加载技术，避免阻塞首屏内容的渲染。React 和 Vue 都有现成的库可以实现懒加载。

  • 图片格式优化：使用现代的图片格式（如 WebP）来减少图片大小。可以通过工具（如 ImageOptim、Squoosh）对图片进行优化。

🚀 4. 使用字体优化

  • 减少字体的阻塞加载：字体的加载可能会影响 FCP 和 LCP，特别是 Web 字体。使用 font-display: swap; 可以在字体加载之前显示备用字体，这样可以减少字体加载对首屏内容渲染的影响。

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

  • 预加载关键字体：对于首屏需要使用的字体，可以在 <head> 中提前预加载，避免字体加载阻塞渲染。

    <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

🚀 5. 减少渲染阻塞的网络请求

  • 减少 HTTP 请求数：减少请求数量有助于加速 FCP 和 LCP，尤其是首屏的请求。合并小的 JavaScript 和 CSS 文件，避免多个网络请求。
  • 利用浏览器缓存：确保静态资源（如 JS、CSS、图片等）能够被浏览器缓存。利用适当的缓存策略，避免每次加载页面时都重新请求静态资源。

🚀 6. 使用 CDN 加速资源加载

  • 使用 内容分发网络（CDN） ，将资源放置在离用户更近的节点上，减少网络延迟，提升资源加载速度。

🚀 7. 性能监测与调试

  • 使用 Lighthouse 或 Web Vitals 工具进行性能分析，持续监测 FCP 和 LCP 指标，找出瓶颈，进行针对性优化。

8. React/Vue 特有的优化技巧

  • React：

    • 使用 React.memo 和 PureComponent 避免不必要的重新渲染。
    • 使用 Suspense 和 lazy 进行懒加载，尤其是路由页面。

  • Vue：

    • 使用 Vue异步组件 和 Vuex模块懒加载。
    • 在 mounted() 钩子里延迟加载不必要的资源，减少首屏渲染的负担。
avatar
文章
阅读
粉丝