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
What is this?It's an exhaustive performance checklist for front-end developers: things you should check, or at least be aware of, when building a website — for personal and professional projects alike.
So is it a tool I install, or a document I read?A document — one big checklist living in the README. It's split into sections: HTML, CSS, Fonts, Images and JavaScript, plus a list of performance tools and further references.
How do I actually work through it?Rule by rule: every item explains why it matters and how to fix it, with links to tools and articles when you want to go deeper. You then apply the rules to your own project.
Are all rules equally important, or is there a priority order?Every rule carries one of three markers: Low (nice to have), Medium (you shouldn't avoid tackling it) and High (you can't avoid following it), so you know what to fix first.
I'm mostly a back-end developer — will I get anything out of it?It's written for front-end developers, and the author's premise is that performance is a front-end responsibility too — not only a back-end or admin topic.
Which tools does it recommend for measuring performance?The Performance Tools section links dozens: Lighthouse, PageSpeed Insights, GTmetrix, WebPagetest, Sitespeed.io, SpeedCurve, DebugBear, Yellow Lab Tools and more — for one-off tests or continuous monitoring.
Which rules are marked High priority?Examples from the HTML, CSS and Images sections: loading CSS before JavaScript, avoiding inline CSS, analysing stylesheet complexity, optimizing images and picking the right image format.
Does it cover web fonts too?Yes — a dedicated Fonts section: serve WOFF2, keep webfonts under 300kb with all variants, use preconnect to load them faster and prevent invisible text flashing before the font arrives.
Are there sibling checklists from the same author?Yes — the README links a Front-End Checklist and a Front-End Design Checklist, and the author also mentions his UX Patterns for Devs site for developers.
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