Back to Details

webperf-resources

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

WebPerf: Resources & Network

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/Network-Bandwidth-Connection-Quality.js
    — Network Bandwidth & Connection Quality
  • scripts/Network-Bandwidth-Connection-Quality.js
    — 网络带宽与连接质量

Common Workflows

常见工作流

Network Quality Assessment

网络质量评估

When the user asks about network performance, connection quality, or adaptive loading:
  1. Network-Bandwidth-Connection-Quality.js - Analyze network bandwidth, effective connection type, RTT, downlink, save-data mode
当用户询问网络性能、连接质量或自适应加载相关问题时：
  1. Network-Bandwidth-Connection-Quality.js - 分析网络带宽、有效连接类型、RTT、下行速率和数据节省模式

Adaptive Loading Strategy

自适应加载策略

When implementing adaptive loading or the user asks "how to optimize for slow connections":
  1. Network-Bandwidth-Connection-Quality.js - Detect connection quality
  2. Cross-reference with webperf-loading skill:
    • TTFB.js (measure server response on slow connections)
    • Find-render-blocking-resources.js (identify heavy resources to defer)
    • Resource-Hints-Validation.js (optimize preconnect for slow networks)
  3. Cross-reference with webperf-media skill:
    • Image-Element-Audit.js (implement responsive images based on connection)
    • Video-Element-Audit.js (adjust video quality based on connection)
当实施自适应加载或用户询问“如何针对慢速连接进行优化”时：
  1. Network-Bandwidth-Connection-Quality.js - 检测连接质量
  2. 关联webperf-loading技能：
    • TTFB.js（测量慢速连接下的服务器响应）
    • Find-render-blocking-resources.js（识别需要延迟加载的重型资源）
    • Resource-Hints-Validation.js（优化慢速网络下的预连接）
  3. 关联webperf-media技能：
    • Image-Element-Audit.js（根据连接状态实现响应式图片）
    • Video-Element-Audit.js（根据连接状态调整视频画质）

Save-Data Mode Detection

数据节省模式检测

When the user asks about save-data or data-saving features:
  1. Network-Bandwidth-Connection-Quality.js - Check if save-data is enabled
  2. If save-data is enabled, recommend:
    • Reducing image quality
    • Disabling autoplay videos
    • Deferring non-critical resources
    • Using low-res thumbnails
当用户询问数据节省或数据节省功能相关问题时：
  1. Network-Bandwidth-Connection-Quality.js - 检查是否启用了数据节省模式
  2. 如果已启用数据节省模式，推荐：
    • 降低图片画质
    • 禁用视频自动播放
    • 延迟加载非关键资源
    • 使用低分辨率缩略图

Mobile/Slow Connection Optimization

移动端/慢速连接优化

When the user asks "optimize for mobile" or "slow connection users":
  1. Network-Bandwidth-Connection-Quality.js - Assess connection type
  2. Cross-reference with webperf-loading skill:
    • TTFB.js (critical for slow connections)
    • Find-render-blocking-resources.js (minimize blocking on slow networks)
    • Critical-CSS-Detection.js (inline critical CSS to reduce RTT)
    • Prefetch-Resource-Validation.js (avoid excessive prefetch on slow connections)
当用户询问“针对移动端优化”或“针对慢速连接用户优化”时：
  1. Network-Bandwidth-Connection-Quality.js - 评估连接类型
  2. 关联webperf-loading技能：
    • TTFB.js（对慢速连接至关重要）
    • Find-render-blocking-resources.js（在慢速网络下最小化阻塞）
    • Critical-CSS-Detection.js（内联关键CSS以减少RTT）
    • Prefetch-Resource-Validation.js（在慢速连接下避免过度预获取）

Decision Tree

决策树

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

After Network-Bandwidth-Connection-Quality.js

运行Network-Bandwidth-Connection-Quality.js后

  • If effectiveType is "slow-2g" or "2g" → Very slow connection, recommend:
    1. Run webperf-loading:Critical-CSS-Detection.js (inline critical CSS)
    2. Run webperf-media:Image-Element-Audit.js (implement aggressive lazy loading)
    3. Run webperf-loading:Prefetch-Resource-Validation.js (remove prefetch to save bandwidth)
    4. Run webperf-core-web-vitals:LCP.js (LCP is heavily impacted by slow connections)
    5. Recommend minimal resource strategy
  • If effectiveType is "3g" → Moderate connection, recommend:
    1. Run webperf-loading:Find-render-blocking-resources.js (minimize blocking)
    2. Run webperf-media:Image-Element-Audit.js (responsive images)
    3. Run webperf-loading:Resource-Hints-Validation.js (optimize preconnect)
    4. Run webperf-core-web-vitals:INP.js (high latency can impact interaction responsiveness)
    5. Implement adaptive image quality
  • If effectiveType is "4g" or better → Good connection, recommend:
    1. Standard optimization practices
    2. Consider strategic prefetch for navigation
    3. Higher quality media is acceptable
  • If save-data is enabled → User explicitly wants to save data, recommend:
    1. Reduce image quality aggressively
    2. Disable autoplay videos
    3. Defer non-critical resources
    4. Remove prefetch/preload hints
    5. Show "high quality" toggle option
  • If RTT > 300ms → High latency, recommend:
    1. Run webperf-loading:TTFB.js (latency impacts TTFB)
    2. Run webperf-loading:TTFB-Sub-Parts.js (break down latency components)
    3. Run webperf-loading:Resource-Hints-Validation.js (preconnect critical for high RTT)
    4. Run webperf-loading:Service-Worker-Analysis.js (caching is critical for high latency)
    5. Minimize number of origins
    6. Use HTTP/2 or HTTP/3 for multiplexing
  • If downlink < 1 Mbps → Very limited bandwidth, recommend:
    1. Run webperf-media:Image-Element-Audit.js (aggressive compression)
    2. Run webperf-media:Video-Element-Audit.js (disable autoplay)
    3. Run webperf-loading:Prefetch-Resource-Validation.js (remove prefetch)
    4. Implement bandwidth-aware loading
  • If downlink > 10 Mbps → Good bandwidth, consider:
    • Higher quality media
    • Strategic prefetch
    • Preloading next-page resources
  • 如果effectiveType为"slow-2g"或"2g" → 连接非常慢，推荐：
    1. 运行webperf-loading:Critical-CSS-Detection.js（内联关键CSS）
    2. 运行webperf-media:Image-Element-Audit.js（实施激进的懒加载）
    3. 运行webperf-loading:Prefetch-Resource-Validation.js（移除预获取以节省带宽）
    4. 运行webperf-core-web-vitals:LCP.js（慢速连接对LCP影响极大）
    5. 推荐极简资源策略
  • 如果effectiveType为"3g" → 连接速度中等，推荐：
    1. 运行webperf-loading:Find-render-blocking-resources.js（最小化阻塞）
    2. 运行webperf-media:Image-Element-Audit.js（响应式图片）
    3. 运行webperf-loading:Resource-Hints-Validation.js（优化预连接）
    4. 运行webperf-core-web-vitals:INP.js（高延迟会影响交互响应速度）
    5. 实施自适应图片画质
  • 如果effectiveType为"4g"或更好 → 连接良好，推荐：
    1. 标准优化实践
    2. 考虑针对导航进行战略性预获取
    3. 可使用更高画质的媒体资源
  • 如果save-data已启用 → 用户明确希望节省数据，推荐：
    1. 大幅降低图片画质
    2. 完全禁用视频自动播放
    3. 延迟加载非关键资源
    4. 移除预获取/预加载提示
    5. 提供“高画质”切换选项
  • 如果RTT > 300ms → 高延迟，推荐：
    1. 运行webperf-loading:TTFB.js（延迟会影响TTFB）
    2. 运行webperf-loading:TTFB-Sub-Parts.js（拆分延迟组件）
    3. 运行webperf-loading:Resource-Hints-Validation.js（预连接对高延迟至关重要）
    4. 运行webperf-loading:Service-Worker-Analysis.js（缓存对高延迟场景至关重要）
    5. 减少源站数量
    6. 使用HTTP/2或HTTP/3实现多路复用
  • 如果downlink < 1 Mbps → 带宽非常有限，推荐：
    1. 运行webperf-media:Image-Element-Audit.js（激进压缩）
    2. 运行webperf-media:Video-Element-Audit.js（禁用自动播放）
    3. 运行webperf-loading:Prefetch-Resource-Validation.js（移除预获取）
    4. 实施感知带宽的加载策略
  • 如果downlink > 10 Mbps → 带宽良好，可考虑：
    • 更高画质的媒体资源
    • 战略性预获取
    • 预加载下一页资源

Adaptive Loading Implementation Guide

自适应加载实施指南

Based on Network Information API results, implement these strategies:
For slow-2g / 2g (< 50 Kbps): (
effectiveType: "slow-2g"
or 
"2g"
)
  • Serve low-res images (quality: 30-40)
  • Disable autoplay videos
  • Remove all prefetch hints
  • Inline all critical CSS
  • Defer all non-critical JavaScript
  • Use system fonts (no webfonts)
  • Aggressive lazy loading (load on scroll + buffer)
For 3g (50-700 Kbps): (
effectiveType: "3g"
)
  • Serve medium-res images (quality: 60-70)
  • Disable autoplay videos
  • Limited prefetch (critical only)
  • Inline critical CSS only
  • Defer non-critical JavaScript
  • Preload 1-2 critical fonts
  • Standard lazy loading
For 4g+ (> 700 Kbps): (
effectiveType: "4g"
)
  • Serve high-res images (quality: 80-90)
  • Allow autoplay videos (muted)
  • Strategic prefetch for navigation
  • Standard CSS loading and JavaScript loading
  • Preload critical fonts
  • Standard lazy loading
For save-data mode: (
navigator.connection.saveData === true
)
  • Override connection type, treat as worse than actual
  • Show "Load high quality" toggle
  • Disable autoplay entirely
  • Minimal images, minimal quality
  • No prefetch, no preload (except critical)
根据Network Information API的结果，实施以下策略：
针对slow-2g / 2g（< 50 Kbps）： (
effectiveType: "slow-2g"
或
"2g"
)
  • 提供低分辨率图片（画质：30-40）
  • 禁用视频自动播放
  • 移除所有预获取提示
  • 内联所有关键CSS
  • 延迟加载所有非关键JavaScript
  • 使用系统字体（不使用Web字体）
  • 激进懒加载（滚动时加载+缓冲）
针对3g（50-700 Kbps）： (
effectiveType: "3g"
)
  • 提供中等分辨率图片（画质：60-70）
  • 禁用视频自动播放
  • 有限预获取（仅针对关键资源）
  • 仅内联关键CSS
  • 延迟加载非关键JavaScript
  • 预加载1-2种关键字体
  • 标准懒加载
针对4g+（> 700 Kbps）： (
effectiveType: "4g"
)
  • 提供高分辨率图片（画质：80-90）
  • 允许视频自动播放（静音状态）
  • 针对导航进行战略性预获取
  • 标准CSS和JavaScript加载方式
  • 预加载关键字体
  • 标准懒加载
针对数据节省模式： (
navigator.connection.saveData === true
)
  • 覆盖连接类型，按比实际更差的状态处理
  • 显示“加载高画质”切换按钮
  • 完全禁用自动播放
  • 最少的图片数量、最低的画质
  • 不进行预获取、预加载（关键资源除外）

Performance Budget by Connection Type

按连接类型划分的性能预算

Adjust performance budgets based on connection quality:
slow-2g / 2g:
  • Total page weight: < 500KB
  • Images: < 200KB total
  • JavaScript: < 100KB total
  • No videos
3g:
  • Total page weight: < 1.5MB
  • Images: < 800KB total
  • JavaScript: < 300KB total
  • Videos: < 3MB (only if critical)
4g+:
  • Total page weight: < 3MB
  • Images: < 2MB total
  • JavaScript: < 1MB total
  • Videos: < 10MB
根据连接质量调整性能预算：
slow-2g / 2g：
  • 页面总大小：< 500KB
  • 图片总大小：< 200KB
  • JavaScript总大小：< 100KB
  • 不包含视频
3g：
  • 页面总大小：< 1.5MB
  • 图片总大小：< 800KB
  • JavaScript总大小：< 300KB
  • 视频大小：< 3MB（仅关键视频）
4g+：
  • 页面总大小：< 3MB
  • 图片总大小：< 2MB
  • JavaScript总大小：< 1MB
  • 视频大小：< 10MB

Network Information API Limitations

Network Information API限制

Be aware of API limitations and fallbacks:
API not available:
  • Safari does not support Network Information API
  • Fallback: Use TTFB as proxy for connection quality
  • Fallback: Device detection (mobile = assume slow)
  • Fallback: User preference toggle
API values are estimates:
  • effectiveType is based on recent observations
  • Values can change during session
  • Re-check periodically for long sessions
Privacy considerations:
  • Some browsers limit precision for privacy
  • Values may be rounded or capped
  • Consider user privacy when making decisions
请注意API的限制和回退方案：
API不可用：
  • Safari不支持Network Information API
  • 回退方案：使用TTFB作为连接质量的代理指标
  • 回退方案：设备检测（移动端=假设连接较慢）
  • 回退方案：用户偏好切换
API值为估算值：
  • effectiveType基于近期观测结果
  • 会话期间值可能发生变化
  • 长会话中需定期重新检查
隐私注意事项：
  • 部分浏览器为保护隐私限制精度
  • 值可能被四舍五入或限制上限
  • 制定决策时需考虑用户隐私

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