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

compression

compression

【数据与研究】Use when auditing slow page loads, heavy assets, or rendering delays related to Enable text-based compression. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

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

技能说明

GitHub

name: compression description: "Use when auditing slow page loads, heavy assets, or rendering delays related to Enable text-based compression. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes." metadata: category: performance priority: high difficulty: beginner estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/performance/compression

Enable text-based compression

Compressed assets download faster, reducing the time to first paint and improving the overall perceived performance, especially on slower mobile networks.

Quick Reference

  • Use Gzip or Brotli to compress text resources (HTML, JS, CSS)
  • Brotli provides superior compression for modern browsers
  • Significantly reduces data transfer size and load times
  • Compression helps network cost, but it does not remove parse and execution cost from oversized bundles

Check

Verify that text-based resources are served with Content-Encoding: gzip or br headers.

Fix

Enable Gzip or Brotli compression in your web server (Nginx, Apache) or CDN settings.

Explain

Explain how text-based compression works and its impact on asset delivery speed.

Code Review

Review the routes, assets, and loading behavior that affect Enable text-based compression. 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/compression

我的收藏