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:

Network-Bandwidth-Connection-Quality.js - Analyze network bandwidth, effective connection type, RTT, downlink, save-data mode

当用户询问网络性能、连接质量或自适应加载相关问题时：

Network-Bandwidth-Connection-Quality.js - 分析网络带宽、有效连接类型、RTT、下行速率和数据节省模式

Adaptive Loading Strategy

自适应加载策略

When implementing adaptive loading or the user asks "how to optimize for slow connections":

Network-Bandwidth-Connection-Quality.js - Detect connection quality
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)
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)

当实施自适应加载或用户询问“如何针对慢速连接进行优化”时：

Network-Bandwidth-Connection-Quality.js - 检测连接质量
关联webperf-loading技能：
- TTFB.js（测量慢速连接下的服务器响应）
- Find-render-blocking-resources.js（识别需要延迟加载的重型资源）
- Resource-Hints-Validation.js（优化慢速网络下的预连接）
关联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:

Network-Bandwidth-Connection-Quality.js - Check if save-data is enabled
If save-data is enabled, recommend:
- Reducing image quality
- Disabling autoplay videos
- Deferring non-critical resources
- Using low-res thumbnails

当用户询问数据节省或数据节省功能相关问题时：

Network-Bandwidth-Connection-Quality.js - 检查是否启用了数据节省模式
如果已启用数据节省模式，推荐：
- 降低图片画质
- 禁用视频自动播放
- 延迟加载非关键资源
- 使用低分辨率缩略图

Mobile/Slow Connection Optimization

移动端/慢速连接优化

When the user asks "optimize for mobile" or "slow connection users":

Network-Bandwidth-Connection-Quality.js - Assess connection type
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)

当用户询问“针对移动端优化”或“针对慢速连接用户优化”时：

Network-Bandwidth-Connection-Quality.js - 评估连接类型
关联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"

"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