Bob自习室

Appearance

性能分析报告 ​

背景：Chrome浏览器、无痕模式、无缓存情况。

一、网站清单 ​

  • https://alivinghome.com/
  • https://www.tidewe.com/
  • https://www.piscifun.com/

二、初步performance分数 ​

  • alivinghome：30、35、30、37、45
  • tidewe：57、57、57、55、65
  • piscifun: 53、34、54、43、34

备注：

  • 测试工具：谷歌浏览器devtool
  • https://pagespeed.web.dev/

三、指标解析（附上指标分数权重：官方标准） ​

下文中的具体数据以 alivinghome 为例。

  • 比重网址分析： https://googlechrome.github.io/lighthouse/scorecalc/#FCP=2320&SI=5009&FMP=4000&TTI=35959&FCI=6500&LCP=2180&TBT=1040&CLS=0&device=mobile&version=12

3.1 TBT（Total Blocking Time）：总屏蔽时间。权重：30%。 ​

3.2 LCP（Largest Contentful Paint）：最大内容渲染时间。权重：25%。 ​

衡量页面主要内容加载完成的时间（< 2.5 秒为优）。

  • 资源加载
    • image: https://47hz76hrz77gut3a-62773723180.shopifypreview.com/cdn/shop/files/804_1280_7ec99d66-ea66-4fee-b40a-e40afd674f94.jpg?v=1745895319&width=600
    • TTFB：3%。
    • 加载延迟：9%。
    • 加载时间：2%。
    • 渲染延迟：85%。（最大的问题就是渲染延迟）
      • 通常意味着页面的关键内容渲染被主线程阻塞或渲染流程本身存在瓶颈。
      • 常见的渲染瓶颈汇总：主线程阻塞、CSS复杂度高、字体加载延迟、DOM规模过大等。
  • 渲染优先级
  • 服务器响应

3.3 CLS（Cumulative Layout Shift）：累积布局偏移。权重：25%（旧版15%权重）。 ​

页面布局稳定性（应小于0.1），衡量页面视觉稳定性（如图片加载后跳动）

3.4 FCP（First Contentful Paint）：首次内容绘制。权重：10%。 ​

页面中首个文本/图像等 DOM 元素出现的时间。

FCP（首次内容渲染）到LCP的时间差：反映渲染关键内容的效率。

3.5 SI（Speed Index）：速度指数。权重：10%。 ​

3.6 TTFB（Time to First Byte）：首字节时间。 ​

从发起请求到收到第一个字节的时间，服务器响应速度（应小于200ms）

严重阻塞的原因：

  • 第三方插件代码：https://widget.privy.com/assets/widget.js

3.7 FID（First Input Delay）：首次输入延迟。 ​

衡量用户第一次操作到浏览器响应之间的时间

Performance颜色区分 ​

  • css样式：紫色
  • JS：淡黄色
  • image：浅绿色

✅ 建议重点关注指标组合（推荐）： ​

  • 首屏加载速度：FCP + LCP + Speed Index
  • 交互性能：FID / INP + TBT + TTI
  • 视觉稳定性：CLS
  • 网络性能：TTFB + Resource Count + Transfer Size
  • 是否卡顿：Long Tasks + FPS