Awesome Open Source
Awesome Open Source


Front-End Performance Checklist


: " "

PRs Welcome Discord Licence MIT

How To Use Contributing Roadmap Product Hunt

Other Checklists:
Front-End Checklist Front-End Design Checklist

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

, "" "" : . , .

?

** ** . , , , .

** ** , / 3 :

  • Low **** .
  • Medium **** . .
  • High **** . , .

    :


HTML

html

  • [ ] HTML : medium HTML , , , .

    :

    , , HTML .

    :

     ,  NPM        .
    
  • [ ] CSS : high CSS .

    <!-- Not recommended -->
    <script src="jquery.js"></script>
    <script src="foo.js"></script>
    <link rel="stylesheet" href="foo.css"/>
    
    <!-- Recommended -->
    <link rel="stylesheet" href="foo.css"/>
    <script src="jquery.js"></script>
    <script src="foo.js"></script>
    

    :

    CSS .

    :

    <head> <link> <style> <script> .

  • [ ] iframe : high iframe , iframe .

  • [ ] Pre-load optimization with prefetch, dns-prefetch and prerender: low Popular browsers can use directive on <link> 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 <link> is in your <head> section.

back to top

CSS

css

back to top

Fonts

fonts

  • [ ] ** :** medium .

back to top

Images

images

  • [ ] ** vs /:** medium . ()

    :

    (SVG) , SVG . CSS .

back to top

JavaScript

javascript

back to top

Server

server-side

  • [ ] Your website is using HTTPS: high

    Why:

    HTTPS is not only for ecommerce websites, but for all websites that are exchanging data. Data shared by a user or data shared to an external entity. Modern browsers today limit functionalities for sites that are not secure. For example: geolocation, push notifications and service workers don't work if your instance is not using HTTPS. And today is much more easy to setup a project with an SSL certificate than it was before (and for free, thanks to Let's Encrypt).

  • [ ] HTTP : high .
  • [ ] CDN : medium CDN .
  • [ ] ** :** high Avoid having your website serving files coming from source using HTTP on your website which is using HTTPS for example. If your website is using HTTPS, external files should come from the same protocol.

  • [ ] ** :** high (404) .

  • [ ] ** HTTP :** high HTTP .
  • [ ] GZIP / Brotli : high Use a compression method such as Gzip or Brotli to reduce the size of your JavaScript files. With a smaller sizes file, users will be able to download the asset faster, resulting in improved performance.

back to top


Performances and JS Frameworks

Angular

React

Vue

Performances and CMS

WordPress

Articles

Plugins recommended

Vue

Performances and CMS

WordPress

Articles

Plugins recommended


Translations

   !   !

Contributing

** .**

Support

Gitter :

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,509,154)ย 
Html (417,816)ย 
Css (209,330)ย 
Hacktoberfest (37,737)ย 
Frontend (6,528)ย 
Performance (2,532)ย 
Web Development (2,006)ย 
List (1,934)ย 
Resources (1,378)ย 
Front End Development (661)ย 
Reference (506)ย 
Korean (425)ย 
Guidelines (316)ย 
Checklist (252)ย 
Performance Metrics (178)ย 
Related Projects
Advertising ๐Ÿ“ฆย 9
All Projects
Application Programming Interfaces ๐Ÿ“ฆย 120
Applications ๐Ÿ“ฆย 181
Artificial Intelligence ๐Ÿ“ฆย 72
Blockchain ๐Ÿ“ฆย 70
Build Tools ๐Ÿ“ฆย 111
Cloud Computing ๐Ÿ“ฆย 79
Code Quality ๐Ÿ“ฆย 28
Collaboration ๐Ÿ“ฆย 30
Command Line Interface ๐Ÿ“ฆย 48
Community ๐Ÿ“ฆย 81
Companies ๐Ÿ“ฆย 60
Compilers ๐Ÿ“ฆย 60
Computer Science ๐Ÿ“ฆย 74
Configuration Management ๐Ÿ“ฆย 39
Content Management ๐Ÿ“ฆย 167
Control Flow ๐Ÿ“ฆย 197
Data Formats ๐Ÿ“ฆย 77
Data Processing ๐Ÿ“ฆย 266
Data Storage ๐Ÿ“ฆย 132
Economics ๐Ÿ“ฆย 60
Frameworks ๐Ÿ“ฆย 198
Games ๐Ÿ“ฆย 122
Graphics ๐Ÿ“ฆย 103
Hardware ๐Ÿ“ฆย 148
Integrated Development Environments ๐Ÿ“ฆย 47
Learning Resources ๐Ÿ“ฆย 147
Legal ๐Ÿ“ฆย 28
Libraries ๐Ÿ“ฆย 119
Lists Of Projects ๐Ÿ“ฆย 21
Machine Learning ๐Ÿ“ฆย 336
Mapping ๐Ÿ“ฆย 61
Marketing ๐Ÿ“ฆย 15
Mathematics ๐Ÿ“ฆย 55
Media ๐Ÿ“ฆย 228
Messaging ๐Ÿ“ฆย 97
Networking ๐Ÿ“ฆย 304
Operating Systems ๐Ÿ“ฆย 84
Operations ๐Ÿ“ฆย 120
Package Managers ๐Ÿ“ฆย 52
Programming Languages ๐Ÿ“ฆย 229
Runtime Environments ๐Ÿ“ฆย 96
Science ๐Ÿ“ฆย 42
Security ๐Ÿ“ฆย 375
Social Media ๐Ÿ“ฆย 26
Software Architecture ๐Ÿ“ฆย 70
Software Development ๐Ÿ“ฆย 68
Software Performance ๐Ÿ“ฆย 57
Software Quality ๐Ÿ“ฆย 127
Text Editors ๐Ÿ“ฆย 45
Text Processing ๐Ÿ“ฆย 131
User Interface ๐Ÿ“ฆย 310
User Interface Components ๐Ÿ“ฆย 465
Version Control ๐Ÿ“ฆย 29
Virtualization ๐Ÿ“ฆย 68
Web Browsers ๐Ÿ“ฆย 38
Web Servers ๐Ÿ“ฆย 25
Web User Interface ๐Ÿ“ฆย 194