Guide · Open source
How to use the Front-End Performance Checklist: a practical guide
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Front-End Performance Checklist is an open-source reference list of front-end web performance practices, covering HTML, CSS, fonts, images, JavaScript and performance tools. It is a list to read and check against your own projects, not a piece of software that scans or fixes a site. After this guide you will know how to get a copy, read each rule's priority and reasoning, and use the list to review a website.
Front-End Performance Checklistthedaviddias/Front-End-Performance-Checklist · ★ 17.4k · MIT Install options & downloads Quick start
- 1Clone the repository. Run the git clone command from the README to download the checklist to your machine.
- 2Read the How to use section. Learn how rules are written and what the low, medium and high priority markers mean.
- 3Pick a section to review. Start with HTML, since it holds high-priority rules on CSS and JavaScript loading order and iframes.
- 4Check your project against each rule. For each item, decide whether your project already follows it, does not apply, or needs work.
- 5Measure with a listed tool. Run a page through a tool such as PageSpeed Insights or WebPagetest before and after a change.
- 6Record the results for your team. Keep your checked items in a shared list so the review can be repeated.
Get a copy of the checklist
The project is hosted on GitHub. The README gives one install command, which clones the repository to your machine so you can read it locally. The source lists no prerequisites.
git clone https://github.com/thedaviddias/Front-End-Performance-ChecklistUnderstand how the rules are organised
The checklist is grouped into sections: How to use, HTML, CSS, Fonts, Images, JavaScript, Performance Tools and References. Each rule is a checkbox item with a short explanation of why it matters and how to apply it, plus links to tools, articles or videos for further reading.
Each rule carries one of three priority markers: low, medium or high. The README says every item is essential to a high performance score, but the markers help you decide what to tackle first. High-priority items are ones the README says you should not skip.
- Low: a low-priority item.
- Medium: you should not avoid tackling it.
- High: you cannot avoid following that rule and implementing the recommended corrections.
Check your HTML against the rules
Start with the HTML section. One high-priority rule says to put CSS tags before JavaScript tags, so that stylesheets in the head load before scripts. Another says to minimise the number of iframes and use them only when no other option exists. The minification rule asks that production HTML have comments, whitespace and new lines removed.
- Place link and style tags in the head before script tags.
- Minimise iframes.
- Minify production HTML files.
- Review prefetch, dns-prefetch and prerender hints, which are rated low priority.
<link rel="stylesheet" href="foo.css" />
<script src="jquery.js"></script>
<script src="foo.js"></script>Check your CSS, fonts, images and JavaScript
The CSS section's minification rule is rated high priority: production CSS should have comments, whitespace and new lines removed, and the README suggests running a minifier automatically during your build or deployment. The fonts, images and JavaScript sections follow the same pattern: each rule explains the reasoning, then the fix.
Work through one section at a time against your project and mark each rule as applied, not applicable, or still to do. Where a rule links to a tool, read the linked page before adopting it.
Measure with the performance tools listed
The Performance Tools section lists external services and utilities for testing and monitoring pages. The list includes PageSpeed Insights, WebPagetest, GTmetrix, Lighthouse and sitespeed.io, among others. These run tests on your site; the checklist itself does not. Use them to confirm whether a rule you applied actually changed how your page loads.
- PageSpeed Insights and Web.dev for page measurements.
- WebPagetest and GTmetrix for speed tests.
- Lighthouse for audits, and PWMetrics as a CLI option.
- Calibre and SpeedCurve for ongoing monitoring.
Use the references for deeper reading
The References section links to articles on the cost of JavaScript, performance budgets, runtime analysis in Chrome DevTools, and the HTTP Archive state of the web. Reading one or two of these before changing your build helps explain why a rule matters for your specific pages.
What people use it for
- A front-end developer reviewing a personal site's HTML and CSS against the listed rules.
- A team building a shared performance review checklist for pull requests.
- An auditor working through an existing website to find page load problems.
- A student reading the rules to learn what affects how fast a web page loads.
Frequently asked questions
Is the Front-End Performance Checklist a tool that scans my site?
No. The README describes it as a manual checklist of practices to read and check against your own projects. It does not scan, test or fix a website. For automated measurement, the README points to tools such as PageSpeed Insights and WebPagetest.
How do I install the Front-End Performance Checklist?
The README gives one command: git clone https://github.com/thedaviddias/Front-End-Performance-Checklist. It lists no prerequisites. After cloning, you read the checklist files locally.
What license is the Front-End Performance Checklist under?
The project is licensed under MIT, according to its listing. You can check the repository's license file for the full terms.
Does the checklist give numeric speed targets?
No. The README does not give specific numeric thresholds. It explains why each rule matters and how to apply it, so you will need to set your own targets.
What are alternatives to this checklist?
The source lists comparable projects: Front-End Checklist, web.dev performance guides and web-performance-resources. The README also links to the Front-End Design Checklist and to Progressive Tooling, a list of community-built tools.
Where should a beginner start with this checklist?
Start with the HTML section and its high-priority rules, such as loading CSS before JavaScript and minimising iframes. Then move to the CSS minification rule, which is also high priority, and read the linked explanations.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This checklist suits front-end developers, auditors, students and teams who want a structured, readable list of speed practices to review against their own projects. It is a poor fit if you want software that scans or fixes a site, or if you need fixed numeric performance targets, since the README provides neither.
Install options & downloads