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

thedaviddias
12.7K Stars 944 Forks MIT License 205 Commits 10 Opened issues

Description

๐ŸŽฎ 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 โ€ข Roadmap โ€ข Product Hunt

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

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

Table of Contents

  1. HTML
  2. CSS
  3. Fonts
  4. Images
  5. JavaScript
  6. Server (in progress)
  7. JS Frameworks (in progress)

Introduction

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:

References


HTML

html

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

    Why:

    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.

    How:

    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.

    
    
    
    
    
    
    

    Why:

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

    How:

    โƒ Ensure that

      and 
     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.
    
    

    Why:

    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.

    How:

    โƒ Ensure that

     is in your 
     section.
    

โฌ† back to top

CSS

css

โฌ† back to top

Fonts

fonts

โฌ† back to top

Images

images

โฌ† back to top

JavaScript

javascript

โฌ† back to top

Server

server-side

โฌ† back to top


Performances and JS Frameworks

Angular

React

Vue

Performances and CMS

WordPress

Articles

Plugins recommended


Translations

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

Contributing

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

Support

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

Author

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

Contributors

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

Backers

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

Sponsors

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

License

MIT

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.