Front-End-Performance-Checklist README

The project's README from github.com/thedaviddias/Front-End-Performance-Checklist. As one markdown file: README.md.

🎮 Front-End Performance Checklist

The only Front-End Performance Checklist that runs faster than the others!

Performance is a huge subject, but it's not always a "back-end" or an "admin" topic: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional).

One simple rule: "Design and code with performance in mind"

Other Checklists:

[!TIP] ⭐️ I've recently launched UX Patterns for Devs and a curated list for indie developers, feel free to check it out! ⭐️

📚 Table of Contents

How to use?

For each rule, you will have a paragraph explaining why this rule is important and how you can fix it. For more deep information, you should find links that will point to 🛠 tools, 📖 articles or 📹 medias that can complete the checklist.

All items in the Front-End Performance Checklist are essentials to achieve the highest performance score but you would find an indicator to help you to eventually prioritised some rules amount others. There are 3 levels of priority:

Performance tools

List of the tools you can use to test or monitor your website or application:

References

HTML

![html]

⬆ back to top

CSS

![css]

⬆ back to top

Fonts

![fonts]

⬆ back to top

Images

![images]

Front-End-Performance-Checklist (thedaviddias/Front-End-Performance-Checklist)

Searching Database…

17.4K ·GitHub
Front-End-Performance-Checklist
这是什么东西?这是一份面向前端开发者的详尽性能清单:无论做个人项目还是工作项目,建网站时都应该检查、至少要了解这些事项。
它是要安装的工具,还是一份文档?是一份文档——一个放在 README 里的大型清单。它分为几个部分:HTML、CSS、字体、图片和 JavaScript,另外还附有性能工具列表和更多参考资料。
我该怎么使用它?逐条来:每一项都解释了为什么重要、怎么解决,想深入了解时还有工具和文章的链接。然后你把这些规则应用到自己的项目上。
所有规则都同样重要吗,还是有优先级顺序?每条规则都带有三个标记之一:Low(锦上添花)、Medium(最好不要回避)和 High(必须遵守),这样你就知道先修什么。
我主要是后端开发者,这清单对我有用吗?它是写给前端开发者的,作者的观点是性能同样是前端的职责——不只是后端或运维的事。
它推荐哪些工具来测量性能?Performance Tools 部分链接了几十个工具:Lighthouse、PageSpeed Insights、GTmetrix、WebPagetest、Sitespeed.io、SpeedCurve、DebugBear、Yellow Lab Tools 等等——既可做一次性测试,也可做持续监控。
哪些规则被标记为 High 优先级?HTML、CSS 和 Images 部分中的例子:在 JavaScript 之前加载 CSS、避免内联 CSS、分析样式表的复杂度、优化图片以及选择合适的图片格式。
它也讲网页字体吗?是的——有一个专门的 Fonts 部分:使用 WOFF2、网页字体连同各种字重变体总共控制在 300kb 以内、用 preconnect 加快字体加载,并防止字体加载前出现文字闪烁。
同一作者还有其他类似的清单吗?有——README 链接了 Front-End Checklist 和 Front-End Design Checklist,作者还提到了面向开发者的 UX Patterns for Devs 网站。
What are similar projects?Front-End-Checklist, awesome-angular, front-end-interview-handbook, react-redux-links, awesome-guidelines, CppCoreGuidelines, naming-cheatsheet, react-bits
Which topics is it in?front-end-development, checklist, guidelines, lists, optimization, best-practices, reference, css, guide, html, web-development, curated-list
Creator
thedaviddias
Size
0.4 MB
Stars
17.4K
Updated
CommitMar 23
Age
8y
Commits · 90 Days