Repolode
提交项目
thedaviddias

thedaviddias/Front-End-Performance-Checklist

一份涵盖 HTML、CSS、字体、图片、JavaScript 和服务端的前端性能检查清单，每条规则附原因、做法和相关工具。

在 GitHub 查看
Star
17,381
Fork
1,255
未关闭 Issue
1
最近提交
9天前

这是什么？

前端性能检查清单是一份详尽的性能规则列表，前端开发者可以据此检查自己的网站和应用。每条规则说明为什么重要、如何修复，多数条目还附有相关工具或文章链接。

清单按领域分为 HTML、CSS、字体、图片、JavaScript 和服务端交付等章节，并包含常见框架和 WordPress 的专门部分。每条规则标注低、中、高三档优先级，便于先处理重点问题。涉及的主题包括代码压缩、阻塞渲染的资源、关键 CSS、Webfont 格式、懒加载、响应式图片、Service Worker、HTTPS、缓存头和压缩等。

仓库还整理了 WebPageTest、PageSpeed Insights、Lighthouse、Sitespeed.io 等性能测试与监控工具，并列出了多种语言的译本。

核心功能

  • 01将 HTML、CSS、字体、图片、JavaScript 和服务端交付的规则汇总在一份清单中。
  • 02每条规则说明原因以及具体的修复方法。
  • 03条目按低、中、高三档标注优先级。
  • 04附带 WebPageTest、Lighthouse、PageSpeed Insights 等测试工具链接。
  • 05包含 React、Angular、Vue 和 WordPress 相关的性能章节。

适用场景

  • 上线前审查网站或 Web 应用，查找性能问题。
  • 向前端开发者介绍常见的性能最佳实践。
  • 在团队的开发流程中加入性能审查环节。
  • 查找用于测量和长期监控页面速度的工具。

标签

#performance#web-performance#frontend#checklist#html#css#javascript#web-development#front-end-developer-tool#front-end-development

常见问题

Front-End-Performance-Checklist 是什么？
一份涵盖 HTML、CSS、字体、图片、JavaScript 和服务端的前端性能检查清单，每条规则附原因、做法和相关工具。 前端性能检查清单是一份详尽的性能规则列表，前端开发者可以据此检查自己的网站和应用。每条规则说明为什么重要、如何修复，多数条目还附有相关工具或文章链接。
Front-End-Performance-Checklist 可以免费使用吗？用的什么许可证？
Front-End-Performance-Checklist 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
Front-End-Performance-Checklist 还在维护吗？
活跃维护中。Front-End-Performance-Checklist 最近一次提交是在 2026年10月13日。
Front-End-Performance-Checklist 适合用来做什么？
上线前审查网站或 Web 应用，查找性能问题。 向前端开发者介绍常见的性能最佳实践。 在团队的开发流程中加入性能审查环节。 查找用于测量和长期监控页面速度的工具。
在哪里获取 Front-End-Performance-Checklist？
源代码和安装说明在 GitHub 上：https://github.com/thedaviddias/Front-End-Performance-Checklist

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目