Need help with Front-End-Performance-Checklist?
Click the โ€œchatโ€ button below for chat support from the developer who created it, or find similar developers for support.

About the developer

13.6K Stars 986 Forks MIT License 216 Commits 11 Opened issues


๐ŸŽฎ The only Front-End Performance Checklist that runs faster than the others

Services available


Need anything else?

Contributors list

Front-End Performance Checklist

  Front-End Performance Checklist  

๐ŸŽฎ The only Front-End Performance Checklist that runs faster than the others.

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

      PRs Welcome         Discord           Licence MIT  

  How To Use โ€ข Contributing โ€ข Product Hunt

๐Ÿ‡จ๐Ÿ‡ณ ๐Ÿ‡ซ๐Ÿ‡ท ๐Ÿ‡ฐ๐Ÿ‡ท ๐Ÿ‡ต๐Ÿ‡น ๐Ÿ‡ท๐Ÿ‡บ ๐Ÿ‡ฏ๐Ÿ‡ต ๐Ÿ‡ฎ๐Ÿ‡ท

Other Checklists:
๐Ÿ—‚ Front-End Checklist โ€ข ๐Ÿ’Ž Front-End Design Checklist


Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: 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).

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:

  • Low means that the item has a low priority.
  • Medium means that the item has a medium priority. You shouldn't avoid tackling that item.
  • High means that the item has a high priority. You can't avoid following that rule and implement the corrections recommended.

Performance tools

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




  • [ ] Minified HTML: medium The HTML code is minified, comments, white spaces and new lines are removed from production files.


    Removing all unnecessary spaces, comments and attributes will reduce the size of your HTML and speed up your site's page load times and obviously lighten the download for your user.


    Most of the frameworks have plugins to facilitate the minification of the webpages. You can use a bunch of NPM modules that can do the job for you automatically.

  • [ ] Place CSS tags always before JavaScript tags: high Ensure that your CSS is always loaded before having JavaScript code.



    Having your CSS tags before any JavaScript enables better, parallel download which speed up browser rendering time.


    โƒ Ensure that

     in your 
     are always before your 
  • [ ] Minimize the number of iframes: high Use iframes only if you don't have any other technical possibility. Try to avoid iframes as much as you can.

  • [ ] Pre-load optimization with prefetch, dns-prefetch and prerender: low Popular browsers can use directive on

     tag and "rel" attribute with certain keywords to pre-load specific URLs.


    Prefetching allows a browser to silently fetch the necessary resources needed to display content that a user might access in the near future. The browser is able to store these resources in its cache and speed up the way web pages load when they are using different domains for page resources. When a web page has finished loading and the idle time has passed, the browser begins downloading other resources. When a user go in a particular link (already prefetched), the content will be instantly served.


    โƒ Ensure that

     is in your 

โฌ† back to top



โฌ† back to top



โฌ† back to top



โฌ† back to top



โฌ† back to top



โฌ† back to top

Performances and JS Frameworks




Performances and CMS



Plugins recommended


The Front-End Performance Checklist wants to also be available in other languages! Don't hesitate to submit your contribution!


Open an issue or a pull request to suggest changes or additions.


If you have any question or suggestion, don't hesitate to use Discord or Twitter:


**Build with โค๏ธ by David Dias


This project exists thanks to all the people who contribute. [Contribute].


Thank you to all our backers! ๐Ÿ™ [Become a backer]


Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]



All icons are provided by Icons8

โฌ† back to top

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.