Back to Details

webperf-loading

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

WebPerf: Loading Performance

WebPerf: 加载性能

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中测量Web性能的JavaScript代码片段。使用
mcp__chrome-devtools__evaluate_script
执行，通过
mcp__chrome-devtools__get_console_message
捕获输出。

Scripts

脚本列表

  • scripts/Back-Forward-Cache.js
    — Back/Forward Cache (bfcache)
  • scripts/CSS-Media-Queries-Analysis.js
    — CSS Media Queries Analysis
  • scripts/Client-Side-Redirect-Detection.js
    — Client-Side Redirect Detection
  • scripts/Content-Visibility.js
    — Content Visibility
  • scripts/Critical-CSS-Detection.js
    — Critical CSS Detection
  • scripts/Event-Processing-Time.js
    — Event Processing Time
  • scripts/FCP.js
    — First Contentful Paint (FCP)
  • scripts/Find-Above-The-Fold-Lazy-Loaded-Images.js
    — Find Above The Fold Lazy Loaded Images
  • scripts/Find-Images-With-Lazy-and-Fetchpriority.js
    — Find Images With Loading Lazy and Fetchpriority
  • scripts/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
    — Find non Lazy Loaded Images outside of the viewport
  • scripts/Find-render-blocking-resources.js
    — Find render-blocking resources
  • scripts/First-And-Third-Party-Script-Info.js
    — First And Third Party Script Info
  • scripts/First-And-Third-Party-Script-Timings.js
    — First And Third Party Script Timings
  • scripts/Fonts-Preloaded-Loaded-and-used-above-the-fold.js
    — Fonts Preloaded, Loaded, and Used Above The Fold
  • scripts/Inline-CSS-Info-and-Size.js
    — Inline CSS Info and Size
  • scripts/Inline-Script-Info-and-Size.js
    — Inline Script Info and Size
  • scripts/JS-Execution-Time-Breakdown.js
    — JavaScript Execution Time Breakdown
  • scripts/Prefetch-Resource-Validation.js
    — Prefetch Resource Validation
  • scripts/Priority-Hints-Audit.js
    — Priority Hints Audit
  • scripts/Resource-Hints-Validation.js
    — Resource Hints Validation
  • scripts/Resource-Hints.js
    — Resource Hints
  • scripts/SSR-Hydration-Data-Analysis.js
    — SSR Framework Hydration Data Analysis
  • scripts/Script-Loading.js
    — Scripts Loading
  • scripts/Service-Worker-Analysis.js
    — Service Worker Analysis
  • scripts/TTFB-Resources.js
    — Time To First Byte: Measure TTFB for all resources
  • scripts/TTFB-Sub-Parts.js
    — Time To First Byte: Measure TTFB sub-parts
  • scripts/TTFB.js
    — Time To First Byte: Measure the time to first byte
  • scripts/Validate-Preload-Async-Defer-Scripts.js
    — Validate Preload on Async/Defer Scripts
  • scripts/Back-Forward-Cache.js
    — 前进/后退缓存（bfcache）
  • scripts/CSS-Media-Queries-Analysis.js
    — CSS媒体查询分析
  • scripts/Client-Side-Redirect-Detection.js
    — 客户端重定向检测
  • scripts/Content-Visibility.js
    — 内容可见性分析
  • scripts/Critical-CSS-Detection.js
    — 关键CSS检测
  • scripts/Event-Processing-Time.js
    — 事件处理耗时分析
  • scripts/FCP.js
    — 首次内容绘制（FCP）测量
  • scripts/Find-Above-The-Fold-Lazy-Loaded-Images.js
    — 查找视口内懒加载的图片
  • scripts/Find-Images-With-Lazy-and-Fetchpriority.js
    — 查找同时设置懒加载和fetchpriority的图片
  • scripts/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
    — 查找视口外未懒加载的图片
  • scripts/Find-render-blocking-resources.js
    — 查找渲染阻塞资源
  • scripts/First-And-Third-Party-Script-Info.js
    — 第一方与第三方脚本信息统计
  • scripts/First-And-Third-Party-Script-Timings.js
    — 第一方与第三方脚本耗时分析
  • scripts/Fonts-Preloaded-Loaded-and-used-above-the-fold.js
    — 视口内预加载、已加载及已使用字体分析
  • scripts/Inline-CSS-Info-and-Size.js
    — 内联CSS信息与大小统计
  • scripts/Inline-Script-Info-and-Size.js
    — 内联脚本信息与大小统计
  • scripts/JS-Execution-Time-Breakdown.js
    — JavaScript执行耗时细分
  • scripts/Prefetch-Resource-Validation.js
    — 预获取资源验证
  • scripts/Priority-Hints-Audit.js
    — 优先级提示审计
  • scripts/Resource-Hints-Validation.js
    — 资源提示验证
  • scripts/Resource-Hints.js
    — 资源提示汇总
  • scripts/SSR-Hydration-Data-Analysis.js
    — SSR框架水合数据分析
  • scripts/Script-Loading.js
    — 脚本加载模式审计
  • scripts/Service-Worker-Analysis.js
    — Service Worker分析
  • scripts/TTFB-Resources.js
    — 首字节时间（TTFB）：测量所有资源的TTFB
  • scripts/TTFB-Sub-Parts.js
    — 首字节时间（TTFB）：测量TTFB各子环节耗时
  • scripts/TTFB.js
    — 首字节时间（TTFB）：测量首字节耗时
  • scripts/Validate-Preload-Async-Defer-Scripts.js
    — 验证异步/延迟脚本的预加载设置

Common Workflows

常见工作流

Complete Loading Performance Audit

完整加载性能审计

When the user asks for a comprehensive loading analysis or "audit loading performance":
  1. TTFB.js - Establish baseline server/network performance
  2. FCP.js - Check initial render timing
  3. Find-render-blocking-resources.js - Identify what's blocking rendering
  4. Critical-CSS-Detection.js - Validate CSS strategy
  5. Script-Loading.js - Audit script loading patterns
  6. Resource-Hints-Validation.js - Check optimization hints
当用户要求全面的加载分析或询问“审计加载性能”时：
  1. TTFB.js - 建立服务器/网络性能基准
  2. FCP.js - 检查初始渲染时间
  3. Find-render-blocking-resources.js - 识别渲染阻塞因素
  4. Critical-CSS-Detection.js - 验证CSS策略
  5. Script-Loading.js - 审计脚本加载模式
  6. Resource-Hints-Validation.js - 检查优化提示

Server/Backend Performance Investigation

服务器/后端性能排查

When TTFB is slow or the user asks "why is my server slow":
  1. TTFB.js - Measure overall TTFB
  2. TTFB-Sub-Parts.js - Break down into DNS, connection, server time
  3. Service-Worker-Analysis.js - Check for SW overhead impacting TTFB
  4. TTFB-Resources.js - Identify slow third-party or API endpoints
当TTFB缓慢或用户询问“我的服务器为什么慢”时：
  1. TTFB.js - 测量整体TTFB
  2. TTFB-Sub-Parts.js - 细分为DNS、连接、服务器时间
  3. Service-Worker-Analysis.js - 检查Service Worker对TTFB的影响
  4. TTFB-Resources.js - 识别缓慢的第三方或API端点

Font Loading Optimization

字体加载优化

When the user asks about fonts, FOIT, FOUT, or font performance:
  1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js - Full font audit
  2. Resource-Hints-Validation.js - Verify font preloads are correct
  3. Find-render-blocking-resources.js - Check if fonts block rendering
当用户询问字体、FOIT、FOUT或字体性能相关问题时：
  1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js - 完整字体审计
  2. Resource-Hints-Validation.js - 验证字体预加载设置
  3. Find-render-blocking-resources.js - 检查字体是否阻塞渲染

Script Performance Deep Dive

脚本性能深度分析

When scripts are suspected to slow down the page:
  1. Script-Loading.js - Identify blocking scripts and loading strategy
  2. First-And-Third-Party-Script-Info.js - Separate first vs third-party impact
  3. First-And-Third-Party-Script-Timings.js - Diagnose slow script connections
  4. JS-Execution-Time-Breakdown.js - Network vs parse/execution time
  5. Inline-Script-Info-and-Size.js - Measure inline script overhead
  6. Validate-Preload-Async-Defer-Scripts.js - Find preload anti-patterns
当怀疑脚本导致页面缓慢时：
  1. Script-Loading.js - 识别阻塞脚本及加载策略
  2. First-And-Third-Party-Script-Info.js - 区分第一方与第三方脚本的影响
  3. First-And-Third-Party-Script-Timings.js - 排查缓慢的脚本连接
  4. JS-Execution-Time-Breakdown.js - 网络耗时与解析/执行耗时对比
  5. Inline-Script-Info-and-Size.js - 测量内联脚本开销
  6. Validate-Preload-Async-Defer-Scripts.js - 查找预加载反模式

Resource Hints & Priority Optimization

资源提示与优先级优化

When the user wants to optimize resource loading priorities:
  1. Resource-Hints.js - Overview of all hints in use
  2. Resource-Hints-Validation.js - Verify hints are actually used
  3. Priority-Hints-Audit.js - Check fetchpriority usage
  4. Prefetch-Resource-Validation.js - Validate prefetch strategy
  5. Validate-Preload-Async-Defer-Scripts.js - Find conflicts
当用户希望优化资源加载优先级时：
  1. Resource-Hints.js - 汇总所有已使用的资源提示
  2. Resource-Hints-Validation.js - 验证提示是否实际生效
  3. Priority-Hints-Audit.js - 检查fetchpriority使用情况
  4. Prefetch-Resource-Validation.js - 验证预获取策略
  5. Validate-Preload-Async-Defer-Scripts.js - 查找冲突设置

CSS Optimization Workflow

CSS优化工作流

When CSS is bloated or blocking rendering:
  1. Critical-CSS-Detection.js - Check critical CSS strategy
  2. Inline-CSS-Info-and-Size.js - Measure inline CSS overhead
  3. CSS-Media-Queries-Analysis.js - Find unused responsive CSS
  4. Find-render-blocking-resources.js - Identify blocking stylesheets
当CSS冗余或阻塞渲染时：
  1. Critical-CSS-Detection.js - 检查关键CSS策略
  2. Inline-CSS-Info-and-Size.js - 测量内联CSS开销
  3. CSS-Media-Queries-Analysis.js - 查找未使用的响应式CSS
  4. Find-render-blocking-resources.js - 识别阻塞渲染的样式表

SSR/Framework Performance

SSR/框架性能分析

When analyzing Next.js, Nuxt, Remix, or other SSR frameworks:
  1. SSR-Hydration-Data-Analysis.js - Analyze hydration data size
  2. Script-Loading.js - Check framework script loading patterns
  3. JS-Execution-Time-Breakdown.js - Measure hydration execution cost
  4. Content-Visibility.js - Check if content-visibility is used for optimization
当分析Next.js、Nuxt、Remix或其他SSR框架时：
  1. SSR-Hydration-Data-Analysis.js - 分析水合数据大小
  2. Script-Loading.js - 检查框架脚本加载模式
  3. JS-Execution-Time-Breakdown.js - 测量水合执行成本
  4. Content-Visibility.js - 检查是否使用content-visibility进行优化

Decision Tree

决策树

Use this decision tree to automatically run follow-up snippets based on results:
根据分析结果，使用以下决策树自动运行后续脚本：

After TTFB.js

执行TTFB.js后

  • If TTFB > 600ms → Run TTFB-Sub-Parts.js to diagnose where time is spent
  • If Service Worker detected → Run Service-Worker-Analysis.js to check for SW overhead
  • If TTFB varies significantly across resources → Run TTFB-Resources.js
  • 若TTFB > 600ms → 运行TTFB-Sub-Parts.js诊断耗时环节
  • 若检测到Service Worker → 运行Service-Worker-Analysis.js检查其开销
  • 若不同资源的TTFB差异显著 → 运行TTFB-Resources.js

After FCP.js

执行FCP.js后

  • If FCP > 1.8s → Run:
    1. Find-render-blocking-resources.js (CSS/JS blocking)
    2. Critical-CSS-Detection.js (CSS strategy)
    3. Script-Loading.js (blocking scripts)
  • If FCP is good but user complains about perceived slowness → Check LCP with webperf-core-web-vitals skill
  • 若FCP > 1.8s → 运行：
    1. Find-render-blocking-resources.js（CSS/JS阻塞）
    2. Critical-CSS-Detection.js（CSS策略）
    3. Script-Loading.js（阻塞脚本）
  • 若FCP正常但用户反馈感知缓慢 → 使用webperf-core-web-vitals技能检查LCP

After Find-render-blocking-resources.js

执行Find-render-blocking-resources.js后

  • If blocking stylesheets found → Run Critical-CSS-Detection.js
  • If blocking scripts found → Run:
    1. Script-Loading.js (loading strategy)
    2. Validate-Preload-Async-Defer-Scripts.js (check for anti-patterns)
  • If fonts blocking → Run Fonts-Preloaded-Loaded-and-used-above-the-fold.js
  • 若发现阻塞样式表 → 运行Critical-CSS-Detection.js
  • 若发现阻塞脚本 → 运行：
    1. Script-Loading.js（加载策略）
    2. Validate-Preload-Async-Defer-Scripts.js（检查反模式）
  • 若发现字体阻塞 → 运行Fonts-Preloaded-Loaded-and-used-above-the-fold.js

After Script-Loading.js

执行Script-Loading.js后

  • If many blocking/parser-blocking scripts → Run:
    1. JS-Execution-Time-Breakdown.js (measure execution cost)
    2. First-And-Third-Party-Script-Info.js (identify third-party culprits)
  • If third-party scripts detected → Run First-And-Third-Party-Script-Timings.js
  • If large inline scripts → Run Inline-Script-Info-and-Size.js
  • 若存在大量阻塞/解析阻塞脚本 → 运行：
    1. JS-Execution-Time-Breakdown.js（测量执行成本）
    2. First-And-Third-Party-Script-Info.js（识别第三方问题脚本）
  • 若检测到第三方脚本 → 运行First-And-Third-Party-Script-Timings.js
  • 若存在大体积内联脚本 → 运行Inline-Script-Info-and-Size.js

After Resource-Hints-Validation.js

执行Resource-Hints-Validation.js后

  • If unused preloads found → Recommend removing them
  • If missing preloads for critical resources → Run:
    1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js (fonts)
    2. Priority-Hints-Audit.js (LCP candidate)
  • If preloads on async/defer scripts → Run Validate-Preload-Async-Defer-Scripts.js
  • 若发现未使用的预加载 → 建议移除
  • 若关键资源缺少预加载 → 运行：
    1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js（字体）
    2. Priority-Hints-Audit.js（LCP候选资源）
  • 若异步/延迟脚本设置了预加载 → 运行Validate-Preload-Async-Defer-Scripts.js

After Service-Worker-Analysis.js

执行Service-Worker-Analysis.js后

  • If SW overhead > 100ms → Recommend Navigation Preload API
  • If SW caching many resources → Run TTFB-Resources.js to verify cache hits
  • If SW not detected but site is SPA/PWA → Recommend implementing SW
  • 若Service Worker开销 > 100ms → 建议使用Navigation Preload API
  • 若Service Worker缓存大量资源 → 运行TTFB-Resources.js验证缓存命中情况
  • 若未检测到Service Worker但站点为SPA/PWA → 建议实现Service Worker

After Fonts-Preloaded-Loaded-and-used-above-the-fold.js

执行Fonts-Preloaded-Loaded-and-used-above-the-fold.js后

  • If fonts preloaded but not used above-the-fold → Recommend removing preloads
  • If fonts used but not preloaded → Recommend adding preload
  • If many font variants loaded → Suggest subsetting or reducing variants
  • 若预加载的字体未在视口内使用 → 建议移除预加载
  • 若视口内使用的字体未预加载 → 建议添加预加载
  • 若加载了多种字体变体 → 建议精简变体或子集化

After First-And-Third-Party-Script-Info.js

执行First-And-Third-Party-Script-Info.js后

  • If many third-party scripts (>5) → Run:
    1. First-And-Third-Party-Script-Timings.js (detailed timing)
    2. JS-Execution-Time-Breakdown.js (execution impact)
  • If third-party scripts are slow → Recommend async/defer or removal
  • 若第三方脚本数量>5个 → 运行：
    1. First-And-Third-Party-Script-Timings.js（详细耗时）
    2. JS-Execution-Time-Breakdown.js（执行影响）
  • 若第三方脚本缓慢 → 建议使用异步/延迟或移除

After SSR-Hydration-Data-Analysis.js

执行SSR-Hydration-Data-Analysis.js后

  • If hydration data > 100KB → Recommend optimization strategies
  • If multiple hydration scripts → Investigate framework configuration
  • If large inline hydration data → Consider streaming or chunking
  • 若水合数据>100KB → 建议优化策略
  • 若存在多个水合脚本 → 排查框架配置
  • 若内临水合数据体积大 → 考虑流式传输或分块

After Priority-Hints-Audit.js

执行Priority-Hints-Audit.js后

  • If LCP candidate lacks fetchpriority="high" → Recommend adding it
  • If conflicting priorities (preload + low) → Recommend resolving conflict
  • If fetchpriority on non-critical resources → Review priority strategy
  • 若LCP候选资源缺少fetchpriority="high" → 建议添加
  • 若存在优先级冲突（预加载+低优先级） → 建议解决冲突
  • 若非关键资源设置了fetchpriority → 建议审查优先级策略

After Prefetch-Resource-Validation.js

执行Prefetch-Resource-Validation.js后

  • If >10 prefetch hints → Recommend reducing to critical resources
  • If individual prefetch > 500KB → Question necessity
  • If total prefetch > 2MB → Flag as mobile bandwidth concern
  • 若预获取提示>10个 → 建议仅保留关键资源
  • 若单个预获取资源>500KB → 质疑其必要性
  • 若预获取资源总大小>2MB → 标记为移动带宽风险

After Critical-CSS-Detection.js

执行Critical-CSS-Detection.js后

  • If render-blocking CSS > 14KB → Recommend inlining critical CSS
  • If no inline CSS but has blocking stylesheets → Suggest critical CSS extraction
  • If CSS > 50KB total → Run CSS-Media-Queries-Analysis.js to find savings
  • 若渲染阻塞CSS>14KB → 建议内联关键CSS
  • 若存在阻塞样式表但无内联CSS → 建议提取关键CSS
  • 若总CSS>50KB → 运行CSS-Media-Queries-Analysis.js查找精简空间

After Back-Forward-Cache.js

执行Back-Forward-Cache.js后

  • If bfcache blocked → Provide specific remediation based on blocking reasons
  • If bfcache eligible → Confirm optimization is working
  • 若bfcache被阻塞 → 根据阻塞原因提供具体修复建议
  • 若符合bfcache条件 → 确认优化生效

After Client-Side-Redirect-Detection.js

执行Client-Side-Redirect-Detection.js后

  • If client-side redirects detected → Recommend server-side redirects
  • If redirect chain found → Suggest eliminating intermediate hops
  • 若检测到客户端重定向 → 建议使用服务器端重定向
  • 若发现重定向链 → 建议消除中间跳转

References

参考资料

  • references/snippets.md
    — Descriptions and thresholds for each script
  • references/schema.md
    — Return value schema for interpreting script output
  • references/snippets.md
    — 各脚本的说明和阈值
  • references/schema.md
    — 脚本返回值的解析 schema