跳到主要内容

谈谈针对lighthouse性能优化分析

  • Lighthouse 是 Google 提供的开源网站质量检测工具

主要从五个维度评估页面表现：​

  • Performance（性能）

  • Accessibility（可访问性）

  • Best Practices（最佳实践）

  • SEO

  • PWA

Performance（性能） 是核心指标​

Lighthouse 的性能分数主要由以下 6 个指标组成（加权平均）：

指标含义理想值权重
LCP (Largest Contentful Paint)最大内容绘制时间< 2.5s25%
FID (First Input Delay)首次输入延迟< 100ms-（新版改为INP）
INP (Interaction to Next Paint)用户交互响应时间< 200ms10%
CLS (Cumulative Layout Shift)累积布局偏移< 0.115%
FCP (First Contentful Paint)首次内容绘制< 1.8s10%
TTI (Time To Interactive)可交互时间< 3.8s10%
Speed Index页面视觉加载速度< 3.4s10%

lighthouse报告​

生成包括

  • 1、Chrome DevTools → Lighthouse 面板 → 勾选 Performance → 生成报告

  • 2、通过lighthouse cli

    bash
    npx lighthouse https://example.com --view

报告中会展示：

  • 网络瓶颈（如 JS 文件体积、未压缩）
  • 渲染阻塞资源
  • 未使用的 JS / CSS
  • 图片优化建议
  • 字体加载延迟
  • 主线程阻塞时间

Lighthouse 的具体优化策略​

核心指标： FCP (用于首屏渲染时间)、LCP（用于页面内容加载速度）

FCP 影响用户看到首屏内容的速度，LCP 影响用户页面主要内容加载完成的速度。

指标良好需要改进差
FCP≤ 1.5s1.5~3s>3s
LCP≤ 2.5s2.5~4s>4s

FCP（首次内容绘制）​

衡量用户看到首个视觉元素的时间。

典型问题：​

  • 相关静态文件太大、请求慢
  • 样式阻塞渲染
  • 占用主线程问题，避免JS 执行过早

优化建议：​

  • 压缩资源文件 （ HTML / CSS / JS ）

  • 减少阻塞渲染的外部 CSS/JS

    • 非关键js脚本，比如第三方js的脚本，这些脚本不涉及页面的渲染，可以异步和延迟加载，避免页面的阻塞

    • JS 使用 defer 或 async 延迟执行

  • 使用 HTTP/2 并行加载 （开启 HTTP/2，提高并发请求性能）

    • 在nginx中开启http2 （利用多路复用特性）

  • 使用CDN缓存，开启缓存，提高资源访问效率， 减少重复请求 （强缓存、协商缓存）

LCP（最大内容绘制）​

典型问题：​

  • 首屏图片过大 / 未懒加载
  • Web 字体加载阻塞渲染
  • 服务器响应慢（TTFB高）

优化建议：​

  • 使用 CDN 加速静态资源

  • 优化图片（WebP）

  • 优化渲染性能，减少浏览器的重排

  • 优先加载关键资源，减少首屏布局阻塞

FID / INP（交互延迟）​

  • 衡量用户首次交互的响应流畅度。

典型问题：​

  • JS 体积太大，主线程被阻塞
  • Vue/React 初始化开销大
  • 大量同步任务（计算、渲染）

优化建议：​

  • 拆分大 JS 包（Code Splitting）
  • 使用 requestIdleCallback / setTimeout 延迟非关键逻辑
  • Web Worker 处理耗时计算
  • 懒加载组件
  • 减少 Re-render（使用 memo、computed、watchEffect 优化）

CLS（布局偏移）​

量加载时布局是否跳动。

典型问题：​

  • 图片无固定宽高
  • 动态广告插入（常见于内容站）
  • 字体切换导致跳动

优化建议：​

  • 所有图片/视频设置固定宽高比
  • 预留广告占位（Ad Placeholder）
  • 使用字体显示策略：
    • font-display: swap; 提高字体加载

TTI（可交互时间）​

衡量页面从加载到完全可交互的时间。

优化建议：​

  • 懒加载非首屏组件
  • 使用 Skeleton 骨架屏
  • 提前加载关键 JS：
text
<link rel="preload" href="/main.js" as="script">
  • 减少 JS 执行时间（主线程任务 < 50ms）
  • 拆分大任务，异步化逻辑

Speed Index（视觉加载速度）​

衡量用户感知到页面加载的速度。

优化建议：​

  • 服务端渲染（SSR / SSG）
  • 骨架屏或渐进加载
  • 优化动画和图片加载顺序
  • 合理使用懒加载（IntersectionObserver）

常见性能问题及优化案例​

问题优化措施
首页加载慢静态化首屏、CDN 加速、组件懒加载
图片大使用 vite-imagetools 生成多尺寸图、自适应加载
Google Ads 广告加载导致 CLS广告位预留占位容器，监听加载完成替换内容
Vue 初始化慢拆分 vendor 包、开启 script setup、减少响应式数据量
CSS 阻塞渲染使用 vite-plugin-critical 提取关键 CSS