Back to Details

webperf-core-web-vitals

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

WebPerf: Core Web Vitals

WebPerf: Core Web Vitals

JavaScript snippets for measuring web performance in Chrome DevTools. Execute with 
mcp__chrome-devtools__evaluate_script
, capture output with 
mcp__chrome-devtools__get_console_message
.
用于在Chrome DevTools中测量网页性能的JavaScript代码片段。使用
mcp__chrome-devtools__evaluate_script
执行，通过
mcp__chrome-devtools__get_console_message
捕获输出。

Available Snippets

可用代码片段

SnippetDescriptionFile
Cumulative Layout Shift (CLS)Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual stabilityscripts/CLS.js
Interaction to Next Paint (INP)Tracks Interaction to Next Paint, a Core Web Vital that measures responsivenessscripts/INP.js
LCP Image EntropyChecks if images qualify as LCP candidates based on their entropy (bits per pixel)scripts/LCP-Image-Entropy.js
LCP Sub-PartsBreaks down Largest Contentful Paint into its four phases to identify optimization opportunitiesscripts/LCP-Sub-Parts.js
LCP TrailTracks every LCP candidate element during page load and highlights each one with a distinct pastel-cscripts/LCP-Trail.js
LCP Video CandidateDetects whether the LCP element is a <video> and audits the poster image configuration — the most coscripts/LCP-Video-Candidate.js
Largest Contentful Paint (LCP)Quick check for Largest Contentful Paint, a Core Web Vital that measures loading performancescripts/LCP.js
代码片段描述文件
Cumulative Layout Shift (CLS)快速检测累积布局偏移，这是衡量页面视觉稳定性的Core Web Vital指标scripts/CLS.js
Interaction to Next Paint (INP)追踪交互到下一次绘制，这是衡量页面响应性的Core Web Vital指标scripts/INP.js
LCP Image Entropy根据熵值（每像素比特数）检查图片是否符合LCP候选元素要求scripts/LCP-Image-Entropy.js
LCP Sub-Parts将最大内容绘制（LCP）拆解为四个阶段，帮助定位优化机会scripts/LCP-Sub-Parts.js
LCP Trail追踪页面加载过程中每一个LCP候选元素，并用不同的柔和彩色虚线轮廓高亮每个元素scripts/LCP-Trail.js
LCP Video Candidate检测LCP元素是否为<video>标签，并审计封面图配置——这是视频作为首屏元素时可避免的LCP延迟的最常见原因scripts/LCP-Video-Candidate.js
Largest Contentful Paint (LCP)快速检测最大内容绘制，这是衡量加载性能的Core Web Vital指标scripts/LCP.js

Execution with Chrome DevTools MCP

通过Chrome DevTools MCP执行

1. mcp__chrome-devtools__navigate_page  → navigate to target URL
2. mcp__chrome-devtools__evaluate_script → run snippet code (read from scripts/ file)
3. mcp__chrome-devtools__get_console_message → capture console output
4. Interpret results using thresholds below, provide recommendations
1. mcp__chrome-devtools__navigate_page  → navigate to target URL
2. mcp__chrome-devtools__evaluate_script → run snippet code (read from scripts/ file)
3. mcp__chrome-devtools__get_console_message → capture console output
4. Interpret results using thresholds below, provide recommendations

Common Workflows

通用工作流

Complete Core Web Vitals Audit

完整Core Web Vitals审计

When the user asks for a comprehensive Core Web Vitals analysis or "audit CWV":
  1. LCP.js - Measure Largest Contentful Paint
  2. CLS.js - Measure Cumulative Layout Shift
  3. INP.js - Measure Interaction to Next Paint
  4. LCP-Sub-Parts.js - Break down LCP timing phases
  5. LCP-Trail.js - Track LCP candidate evolution
当用户要求进行全面的Core Web Vitals分析或「审计CWV」时：
  1. LCP.js - 测量最大内容绘制（LCP）
  2. CLS.js - 测量累积布局偏移（CLS）
  3. INP.js - 测量交互到下一次绘制（INP）
  4. LCP-Sub-Parts.js - 拆解LCP时间阶段
  5. LCP-Trail.js - 追踪LCP候选元素的变化过程

LCP Deep Dive

LCP深度排查

When LCP is slow or the user asks "debug LCP" or "why is LCP slow":
  1. LCP.js - Establish baseline LCP value
  2. LCP-Sub-Parts.js - Break down into TTFB, resource load, render delay
  3. LCP-Trail.js - Identify all LCP candidates and changes
  4. LCP-Image-Entropy.js - Check if LCP image has visual complexity issues
  5. LCP-Video-Candidate.js - Detect if LCP is a video (poster or video element)
当LCP耗时过长或用户询问「调试LCP」或「LCP慢的原因」时：
  1. LCP.js - 确定LCP基准值
  2. LCP-Sub-Parts.js - 拆解为TTFB、资源加载、渲染延迟几个阶段
  3. LCP-Trail.js - 识别所有LCP候选元素及变化
  4. LCP-Image-Entropy.js - 检查LCP图片是否存在视觉复杂度问题
  5. LCP-Video-Candidate.js - 检测LCP是否为视频（封面图或视频元素）

CLS Investigation

CLS问题调查

When layout shifts are detected or the user asks "debug CLS" or "layout shift issues":
  1. CLS.js - Measure overall CLS score
  2. Layout-Shift-Loading-and-Interaction.js (from Interaction skill) - Separate loading vs interaction shifts
  3. Cross-reference with webperf-loading skill:
    • Find-Above-The-Fold-Lazy-Loaded-Images.js (lazy images causing shifts)
    • Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swap causing shifts)
当检测到布局偏移或用户询问「调试CLS」或「布局偏移问题」时：
  1. CLS.js - 测量整体CLS得分
  2. Layout-Shift-Loading-and-Interaction.js（来自交互技能集） - 区分加载阶段与交互阶段产生的偏移
  3. 与webperf-loading技能集交叉验证：
    • Find-Above-The-Fold-Lazy-Loaded-Images.js（懒加载图片导致的偏移）
    • Fonts-Preloaded-Loaded-and-used-above-the-fold.js（字体替换导致的偏移）

INP Debugging

INP调试

When interactions feel slow or the user asks "debug INP" or "slow interactions":
  1. INP.js - Measure overall INP value
  2. Interactions.js (from Interaction skill) - List all interactions with timing
  3. Input-Latency-Breakdown.js (from Interaction skill) - Break down input delay, processing, presentation
  4. Long-Animation-Frames.js (from Interaction skill) - Identify blocking animation frames
  5. Long-Animation-Frames-Script-Attribution.js (from Interaction skill) - Find scripts causing delays
当交互体验卡顿或用户询问「调试INP」或「交互慢」时：
  1. INP.js - 测量整体INP值
  2. Interactions.js（来自交互技能集） - 列出所有交互的耗时
  3. Input-Latency-Breakdown.js（来自交互技能集） - 拆解输入延迟、处理耗时、渲染耗时
  4. Long-Animation-Frames.js（来自交互技能集） - 识别阻塞的动画帧
  5. Long-Animation-Frames-Script-Attribution.js（来自交互技能集） - 定位导致延迟的脚本

Video as LCP Investigation

视频作为LCP的调查

When LCP is a video element (detected by LCP-Video-Candidate.js):
  1. LCP-Video-Candidate.js - Identify video as LCP candidate
  2. Video-Element-Audit.js (from Media skill) - Audit video loading strategy
  3. LCP-Sub-Parts.js - Analyze video loading phases
  4. Cross-reference with webperf-loading skill:
    • Resource-Hints-Validation.js (check for video preload)
    • Priority-Hints-Audit.js (check for fetchpriority on video)
当LCP为视频元素时（通过LCP-Video-Candidate.js检测）：
  1. LCP-Video-Candidate.js - 识别视频为LCP候选元素
  2. Video-Element-Audit.js（来自媒体技能集） - 审计视频加载策略
  3. LCP-Sub-Parts.js - 分析视频加载阶段
  4. 与webperf-loading技能集交叉验证：
    • Resource-Hints-Validation.js（检查视频预加载配置）
    • Priority-Hints-Audit.js（检查视频的fetchpriority配置）

Image as LCP Investigation

图片作为LCP的调查

When LCP is an image (most common case):
  1. LCP.js - Measure LCP timing
  2. LCP-Sub-Parts.js - Break down timing phases
  3. LCP-Image-Entropy.js - Analyze image complexity
  4. Cross-reference with webperf-media skill:
    • Image-Element-Audit.js (check format, dimensions, lazy loading)
  5. Cross-reference with webperf-loading skill:
    • Find-Above-The-Fold-Lazy-Loaded-Images.js (check if incorrectly lazy)
    • Priority-Hints-Audit.js (check for fetchpriority="high")
    • Resource-Hints-Validation.js (check for preload)
当LCP为图片时（最常见场景）：
  1. LCP.js - 测量LCP耗时
  2. LCP-Sub-Parts.js - 拆解时间阶段
  3. LCP-Image-Entropy.js - 分析图片复杂度
  4. 与webperf-media技能集交叉验证：
    • Image-Element-Audit.js（检查格式、尺寸、懒加载配置）
  5. 与webperf-loading技能集交叉验证：
    • Find-Above-The-Fold-Lazy-Loaded-Images.js（检查是否错误配置了懒加载）
    • Priority-Hints-Audit.js（检查是否配置了fetchpriority="high"）
    • Resource-Hints-Validation.js（检查预加载配置）

Decision Tree

决策树

Use this decision tree to automatically run follow-up snippets based on results:
使用该决策树根据结果自动执行后续代码片段：

After LCP.js

执行LCP.js后

  • If LCP > 2.5s → Run LCP-Sub-Parts.js to diagnose which phase is slow
  • If LCP > 4.0s (poor) → Run full LCP deep dive workflow (5 snippets)
  • If LCP candidate is an image → Run LCP-Image-Entropy.js and webperf-media:Image-Element-Audit.js
  • If LCP candidate is a video → Run LCP-Video-Candidate.js and webperf-media:Video-Element-Audit.js
  • Always run → LCP-Trail.js to understand candidate evolution
  • 如果LCP > 2.5s → 运行LCP-Sub-Parts.js诊断哪个阶段耗时较长
  • 如果LCP > 4.0s（不佳） → 运行完整的LCP深度排查工作流（5个代码片段）
  • 如果LCP候选元素为图片 → 运行LCP-Image-Entropy.js和webperf-media:Image-Element-Audit.js
  • 如果LCP候选元素为视频 → 运行LCP-Video-Candidate.js和webperf-media:Video-Element-Audit.js
  • 始终运行 → LCP-Trail.js了解候选元素的变化过程

After LCP-Sub-Parts.js

执行LCP-Sub-Parts.js后

  • If TTFB phase > 600ms → Switch to webperf-loading skill and run TTFB-Sub-Parts.js
  • If Resource Load Time > 1500ms → Run:
    1. webperf-loading:Resource-Hints-Validation.js (check for preload/preconnect)
    2. webperf-loading:Priority-Hints-Audit.js (check fetchpriority)
    3. webperf-loading:Find-render-blocking-resources.js (competing resources)
  • If Render Delay > 200ms → Run:
    1. webperf-loading:Find-render-blocking-resources.js (blocking CSS/JS)
    2. webperf-loading:Script-Loading.js (parser-blocking scripts)
    3. webperf-interaction:Long-Animation-Frames.js (main thread blocking)
  • 如果TTFB阶段 > 600ms → 切换到webperf-loading技能集并运行TTFB-Sub-Parts.js
  • 如果资源加载时间 > 1500ms → 运行：
    1. webperf-loading:Resource-Hints-Validation.js（检查预加载/预连接配置）
    2. webperf-loading:Priority-Hints-Audit.js（检查fetchpriority配置）
    3. webperf-loading:Find-render-blocking-resources.js（竞争资源排查）
  • 如果渲染延迟 > 200ms → 运行：
    1. webperf-loading:Find-render-blocking-resources.js（阻塞的CSS/JS）
    2. webperf-loading:Script-Loading.js（阻塞解析的脚本）
    3. webperf-interaction:Long-Animation-Frames.js（主线程阻塞）

After LCP-Trail.js

执行LCP-Trail.js后

  • If many LCP candidate changes (>3) → This causes visual instability, investigate:
    1. webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js (late-loading images)
    2. webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swaps)
    3. CLS.js (layout shifts contributing to LCP changes)
  • If final LCP candidate appears late → Run webperf-loading:Resource-Hints-Validation.js
  • If early candidate was replaced → Understand why initial content was pushed down (likely CLS issue)
  • 如果LCP候选元素变化次数多（>3次） → 会导致视觉不稳定，需排查：
    1. webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js（加载过晚的图片）
    2. webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js（字体替换）
    3. CLS.js（导致LCP变化的布局偏移）
  • 如果最终LCP候选元素出现过晚 → 运行webperf-loading:Resource-Hints-Validation.js
  • 如果早期候选元素被替换 → 排查初始内容被挤下去的原因（大概率是CLS问题）

After LCP-Image-Entropy.js

执行LCP-Image-Entropy.js后

  • If entropy is very high → Image is visually complex, recommend:
    • Modern formats (WebP, AVIF)
    • Appropriate compression
    • Potentially a placeholder strategy
  • If entropy is low → Image may be over-optimized or placeholder-like
  • If large file size detected → Run webperf-media:Image-Element-Audit.js for format/sizing analysis
  • 如果熵值非常高 → 图片视觉复杂度高，推荐：
    • 现代格式（WebP、AVIF）
    • 合理压缩
    • 可选占位图策略
  • 如果熵值低 → 图片可能过度优化或类似占位图
  • 如果检测到文件过大 → 运行webperf-media:Image-Element-Audit.js进行格式/尺寸分析

After LCP-Video-Candidate.js

执行LCP-Video-Candidate.js后

  • If video is LCP → Run:
    1. webperf-media:Video-Element-Audit.js (check poster, preload, formats)
    2. webperf-loading:Priority-Hints-Audit.js (check fetchpriority on poster)
    3. LCP-Sub-Parts.js (analyze video loading phases)
  • If poster image is LCP → Treat as image LCP (run image workflows)
  • 如果视频是LCP → 运行：
    1. webperf-media:Video-Element-Audit.js（检查封面图、预加载、格式）
    2. webperf-loading:Priority-Hints-Audit.js（检查封面图的fetchpriority配置）
    3. LCP-Sub-Parts.js（分析视频加载阶段）
  • 如果封面图是LCP → 按图片LCP处理（运行图片相关工作流）

After CLS.js

执行CLS.js后

  • If CLS > 0.1 → Run webperf-interaction:Layout-Shift-Loading-and-Interaction.js to separate causes
  • If CLS > 0.25 (poor) → Run comprehensive shift investigation:
    1. webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js (images without dimensions)
    2. webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font loading strategy)
    3. webperf-loading:Critical-CSS-Detection.js (late-loading styles)
    4. webperf-media:Image-Element-Audit.js (missing width/height)
  • If CLS = 0 → Confirm with multiple page loads (might be timing-dependent)
  • 如果CLS > 0.1 → 运行webperf-interaction:Layout-Shift-Loading-and-Interaction.js区分原因
  • 如果CLS > 0.25（不佳） → 运行全面的偏移调查：
    1. webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js（无尺寸的图片）
    2. webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js（字体加载策略）
    3. webperf-loading:Critical-CSS-Detection.js（加载过晚的样式）
    4. webperf-media:Image-Element-Audit.js（缺失width/height属性）
  • 如果CLS = 0 → 多次加载页面确认（可能和时机相关）

After INP.js

执行INP.js后

  • If INP > 200ms → Run webperf-interaction:Interactions.js to identify slow interactions
  • If INP > 500ms (poor) → Run full INP debugging workflow:
    1. webperf-interaction:Interactions.js (list all interactions)
    2. webperf-interaction:Input-Latency-Breakdown.js (phase breakdown)
    3. webperf-interaction:Long-Animation-Frames.js (blocking frames)
    4. webperf-interaction:Long-Animation-Frames-Script-Attribution.js (culprit scripts)
  • If specific interaction type is slow (e.g., keyboard) → Focus analysis on that interaction type
  • 如果INP > 200ms → 运行webperf-interaction:Interactions.js识别慢交互
  • 如果INP > 500ms（不佳） → 运行完整的INP调试工作流：
    1. webperf-interaction:Interactions.js（列出所有交互）
    2. webperf-interaction:Input-Latency-Breakdown.js（阶段拆解）
    3. webperf-interaction:Long-Animation-Frames.js（阻塞帧）
    4. webperf-interaction:Long-Animation-Frames-Script-Attribution.js（问题脚本定位）
  • 如果特定交互类型慢（比如键盘输入） → 重点分析该交互类型

Cross-Skill Triggers

跨技能集触发

These triggers recommend using snippets from other skills:
这些触发条件推荐使用其他技能集的代码片段：

From LCP to Loading Skill

从LCP到加载技能集

  • If LCP > 2.5s and TTFB phase is dominant → Use webperf-loading skill:
    • TTFB.js, TTFB-Sub-Parts.js, Service-Worker-Analysis.js
  • If LCP image is lazy-loaded → Use webperf-loading skill:
    • Find-Above-The-Fold-Lazy-Loaded-Images.js
  • If LCP has no fetchpriority → Use webperf-loading skill:
    • Priority-Hints-Audit.js
  • 如果LCP > 2.5s且TTFB阶段占比最高 → 使用webperf-loading技能集：
    • TTFB.js、TTFB-Sub-Parts.js、Service-Worker-Analysis.js
  • 如果LCP图片配置了懒加载 → 使用webperf-loading技能集：
    • Find-Above-The-Fold-Lazy-Loaded-Images.js
  • 如果LCP没有配置fetchpriority → 使用webperf-loading技能集：
    • Priority-Hints-Audit.js

From CLS to Loading Skill

从CLS到加载技能集

  • If CLS caused by fonts → Use webperf-loading skill:
    • Fonts-Preloaded-Loaded-and-used-above-the-fold.js
    • Resource-Hints-Validation.js (for font preload)
  • If CLS caused by images → Use webperf-media skill:
    • Image-Element-Audit.js (check for width/height attributes)
  • 如果CLS由字体导致 → 使用webperf-loading技能集：
    • Fonts-Preloaded-Loaded-and-used-above-the-fold.js
    • Resource-Hints-Validation.js（用于字体预加载）
  • 如果CLS由图片导致 → 使用webperf-media技能集：
    • Image-Element-Audit.js（检查width/height属性）

From INP to Interaction Skill

从INP到交互技能集

  • If INP > 200ms → Use webperf-interaction skill for full debugging:
    • Interactions.js, Input-Latency-Breakdown.js
    • Long-Animation-Frames.js, Long-Animation-Frames-Script-Attribution.js
    • LongTask.js (if pre-interaction blocking suspected)
  • 如果INP > 200ms → 使用webperf-interaction技能集进行完整调试：
    • Interactions.js、Input-Latency-Breakdown.js
    • Long-Animation-Frames.js、Long-Animation-Frames-Script-Attribution.js
    • LongTask.js（如果怀疑是交互前的阻塞导致）

From LCP/INP to Interaction Skill

从LCP/INP到交互技能集

  • If render delay or interaction delay is high → Use webperf-interaction skill:
    • Long-Animation-Frames.js (main thread blocking)
    • LongTask.js (long tasks delaying rendering)
  • 如果渲染延迟或交互延迟高 → 使用webperf-interaction技能集：
    • Long-Animation-Frames.js（主线程阻塞）
    • LongTask.js（长任务延迟渲染）

Multi-Metric Correlation

多指标关联分析

When multiple CWV metrics are poor, prioritize investigation:
  • If LCP > 2.5s AND CLS > 0.1 → Likely shared root cause:
    1. Check for late-loading content pushing LCP element
    2. Run LCP-Trail.js to see LCP candidate changes
    3. Run Layout-Shift-Loading-and-Interaction.js to correlate timing
  • If LCP > 2.5s AND INP > 200ms → Main thread congestion:
    1. Run Long-Animation-Frames.js
    2. Run webperf-loading:Script-Loading.js
    3. Run webperf-loading:JS-Execution-Time-Breakdown.js
  • If CLS > 0.1 AND INP > 200ms → Layout thrashing or interaction-triggered shifts:
    1. Run Layout-Shift-Loading-and-Interaction.js
    2. Run Interactions.js
    3. Check if shifts occur during/after interactions
当多个CWV指标表现不佳时，按优先级排查：
  • 如果LCP > 2.5s 且 CLS > 0.1 → 大概率存在共同根因：
    1. 检查是否有加载过晚的内容挤压LCP元素
    2. 运行LCP-Trail.js查看LCP候选元素变化
    3. 运行Layout-Shift-Loading-and-Interaction.js关联时间线
  • 如果LCP > 2.5s 且 INP > 200ms → 主线程拥堵：
    1. 运行Long-Animation-Frames.js
    2. 运行webperf-loading:Script-Loading.js
    3. 运行webperf-loading:JS-Execution-Time-Breakdown.js
  • 如果CLS > 0.1 且 INP > 200ms → 布局抖动或交互触发的偏移：
    1. 运行Layout-Shift-Loading-and-Interaction.js
    2. 运行Interactions.js
    3. 检查偏移是否发生在交互期间/之后

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS)

Quick check for Cumulative Layout Shift, a Core Web Vital that measures visual stability. CLS tracks how much the page layout shifts unexpectedly during its lifetime, providing a single score that represents the cumulative impact of all unexpected layout shifts.
Script: 
scripts/CLS.js
Thresholds:
RatingScoreMeaning
🟢 Good≤ 0.1Stable, minimal shifting
🟡 Needs Improvement≤ 0.25Noticeable shifting
🔴 Poor> 0.25Significant layout instability
快速检测累积布局偏移，这是衡量页面视觉稳定性的Core Web Vital指标。CLS会追踪页面生命周期内意外布局偏移的幅度，输出一个单一得分代表所有意外偏移的累积影响。
脚本： 
scripts/CLS.js
阈值：
评级得分含义
🟢 优秀≤ 0.1稳定，偏移量极小
🟡 需优化≤ 0.25偏移可感知
🔴 不佳> 0.25布局存在严重不稳定性

Interaction to Next Paint (INP)

Interaction to Next Paint (INP)

Tracks Interaction to Next Paint, a Core Web Vital that measures responsiveness. INP evaluates how quickly a page responds to user interactions throughout the entire page visit, replacing First Input Delay (FID) as a Core Web Vital in March 2024.
Script: 
scripts/INP.js
Thresholds:
RatingTimeMeaning
🟢 Good≤ 200msResponsive, feels instant
🟡 Needs Improvement≤ 500msNoticeable delay
🔴 Poor> 500msSlow, frustrating experience
追踪交互到下一次绘制，这是衡量页面响应性的Core Web Vital指标。INP评估页面在整个访问周期内对用户交互的响应速度，于2024年3月替代首次输入延迟（FID）成为Core Web Vital指标。
脚本： 
scripts/INP.js
阈值：
评级耗时含义
🟢 优秀≤ 200ms响应迅速，体验流畅
🟡 需优化≤ 500ms延迟可感知
🔴 不佳> 500ms响应缓慢，体验糟糕

LCP Image Entropy

LCP Image Entropy

Checks if images qualify as LCP candidates based on their entropy (bits per pixel). Since Chrome 112, low-entropy images are ignored for LCP measurement.
Script: 
scripts/LCP-Image-Entropy.js
Thresholds:
BPPEntropyLCP EligibleExample
< 0.05🔴 Low❌ NoSolid colors, simple gradients, placeholders
≥ 0.05🟢 Normal✅ YesPhotos, complex graphics
根据熵值（每像素比特数）检查图片是否符合LCP候选元素要求。从Chrome 112开始，低熵值图片会被排除在LCP统计之外。
脚本： 
scripts/LCP-Image-Entropy.js
阈值：
每像素比特数熵值符合LCP资格示例
< 0.05🔴 低❌ 否纯色、简单渐变、占位图
≥ 0.05🟢 正常✅ 是照片、复杂图形

LCP Sub-Parts

LCP Sub-Parts

Breaks down Largest Contentful Paint into its four phases to identify optimization opportunities. Understanding which phase is slowest helps you focus your optimization efforts where they'll have the most impact. Based on the Web Vitals Chrome Extension.
Script: 
scripts/LCP-Sub-Parts.js
将最大内容绘制（LCP）拆解为四个阶段，帮助定位优化机会。了解最慢的阶段可以帮你把优化精力放在投入产出比最高的地方。基于Web Vitals Chrome扩展开发。
脚本： 
scripts/LCP-Sub-Parts.js

LCP Trail

LCP Trail

Tracks every LCP candidate element during page load and highlights each one with a distinct pastel-colored dashed outline — so you can see the full trail from first candidate to final LCP.
Script: 
scripts/LCP-Trail.js
追踪页面加载过程中每一个LCP候选元素，并用不同的柔和彩色虚线轮廓高亮每个元素——你可以看到从第一个候选元素到最终LCP的完整变化轨迹。
脚本： 
scripts/LCP-Trail.js

LCP Video Candidate

LCP Video Candidate

Detects whether the LCP element is a <video> and audits the poster image configuration — the most common source of avoidable LCP delay when video is the hero element.
Script: 
scripts/LCP-Video-Candidate.js
检测LCP元素是否为<video>标签，并审计封面图配置——这是视频作为首屏元素时可避免的LCP延迟的最常见原因。
脚本： 
scripts/LCP-Video-Candidate.js

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP)

Quick check for Largest Contentful Paint, a Core Web Vital that measures loading performance. LCP marks when the largest content element becomes visible in the viewport.
Script: 
scripts/LCP.js
Thresholds:
RatingTimeMeaning
🟢 Good≤ 2.5sFast, content appears quickly
🟡 Needs Improvement≤ 4sModerate delay
🔴 Poor> 4sSlow, users may abandon
快速检测最大内容绘制，这是衡量加载性能的Core Web Vital指标。LCP标记视口中最大内容元素变为可见的时间点。
脚本： 
scripts/LCP.js
阈值：
评级耗时含义
🟢 优秀≤ 2.5s加载快，内容呈现迅速
🟡 需优化≤ 4s存在中等延迟
🔴 不佳> 4s加载缓慢，可能导致用户流失