Front-End Performance Checklist
A long, categorized checklist of front-end web performance rules with links to tools and articles.
- Stars
- 17.4k
- Forks
- 1.3k
- Licence
- MIT
- Language
- —
- Last update
- 24 days ago
- Type
- Learning resource
What it is
This is a reference checklist of front-end web performance practices, covering HTML, CSS, fonts, images, JavaScript and performance tools. Each rule explains why it matters and how to apply it, with a priority marker and links to further reading. It is a list to read and check against your own projects, not a piece of software you install.
- Work through the HTML section to check stylesheet and script loading order
- Use the listed performance tools such as PageSpeed Insights or WebPagetest to measure a page
- Follow the CSS minification guidance and the linked tools to reduce file sizes in a build
- Use the priority markers to decide which rules to tackle first
Great for
- Front-end developers who want a structured list of speed practices to review
- Developers auditing an existing website for page load problems
- Students learning what affects how fast web pages load
- Teams building a shared performance review checklist
Not ideal for
- People looking for an automated tool that scans or fixes their site, since the README describes a manual checklist
- Readers wanting a single fixed set of numeric targets, since the README does not give specific thresholds
How to get it
- 1
Clone and build from source
Clone the repository
git clone https://github.com/thedaviddias/Front-End-Performance-Checklist - 2
Run it
- Open the README.md in the cloned folder or on GitHub
- Read the How to use section to understand the priority levels
- Go through the HTML and CSS sections and check each item against your site
- Use the linked performance tools to measure your pages and compare results
- 3
Get the most out of it
- Start with items marked high priority, as the README describes them as things you cannot avoid
- Pair the checklist with the listed tools such as Lighthouse or WebPagetest to measure before and after changes
- Use the linked references, such as the Cost of JavaScript article, for deeper explanations
- Check the related Front-End Checklist repositories the author links to for broader coverage
Downloads
Strengths
- Covers many areas of front-end performance in one place
- Each rule explains the reasoning as well as the fix
- Links to a large set of tools and articles for deeper reading
Trade-offs
- It is a manual list, so it does not check your site automatically
- Some linked resources are dated, such as the 2018 and 2021 references
- The README is truncated here, so coverage of later sections is not verified in this entry
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| Front-End-Performance-Checklist (this) | 17.4k | Learning resource | beginner | 24 days ago | Front-end developers who want a structured list of speed practices to review |
| Front-End-Checklist | 74.6k | Curated list | beginner | 6 days ago | Developers doing a pre-launch review of a website or web app |
| front-end-interview-handbook | 44k | Learning resource | beginner | 1 months ago | Engineers preparing for front end job interviews |
| TW-Elements | 13.2k | Library | intermediate | 7 months ago | Developers already using Tailwind CSS who want prebuilt interactive components |
| fe-interview | 26.3k | Learning resource | beginner | 1.0 years ago | Front-end developers preparing for job interviews |
| Project-Ideas-And-Resources | 17.1k | Curated list | beginner | 20 days ago | Beginners who want a practice project to build |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.