界面已本地化;技能介绍与说明文档按所选语言由 AI 自动翻译,代码、命令、路径和专业术语保留原文,以原作者文档为准。
探索技能
数据与研究 · SKILL.md

critical-request-chains

critical-request-chains

【数据与研究】Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize critical request chains. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

独立 GitHub 快照 · 自动分类 · 以原作者文档为准

技能说明

GitHub

name: critical-request-chains description: "Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize critical request chains. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes." metadata: category: performance priority: high difficulty: advanced estimatedTime: "20" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/critical-request-chains

Minimize critical request chains

Long chains of dependent requests delay the initial rendering of the page, as each resource must wait for its parent to be fetched and processed.

Quick Reference

  • Reduce the depth of dependent resource requests
  • Inline critical CSS to avoid extra network roundtrips
  • Use preload hints for essential assets found deep in the chain

Check

Identify long chains of dependent requests that block the critical rendering path using Lighthouse or WebPageTest.

Fix

Flatten the request chain by inlining critical resources or using preload hints for essential assets.

Explain

Explain how critical request chains impact the Time to First Paint and how to optimize the rendering path.

Code Review

Review the routes, assets, and loading behavior that affect Minimize critical request chains. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.


For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/performance/critical-request-chains

我的收藏