├── .editorconfig
├── .github
    ├── FUNDING.yml
    ├── ISSUE_TEMPLATE.md
    ├── PULL_REQUEST_TEMPLATE.md
    └── workflows
    │   ├── links-checker.yml
    │   ├── readme-check.yml
    │   └── stale.yml
├── .gitignore
├── .markdownlint.json
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── images
    ├── css.png
    ├── fonts.png
    ├── html.png
    ├── images.png
    ├── javascript.png
    ├── logo-front-end-performance-checklist.jpg
    ├── priority
    │   ├── high.svg
    │   ├── low.svg
    │   └── medium.svg
    └── server-side.png
├── lychee.toml
├── package.json
└── pnpm-lock.yaml


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | open_collective: front-end-checklist
2 | github: thedaviddias
3 | thanks_dev: thedaviddias
4 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | <!-- Love front-end-checklist? Please consider supporting our collective:
2 | 👉  https://opencollective.com/front-end-checklist/donate -->


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!-- Love Front-End Checklist? Please consider supporting our collective:
 2 | 👉  https://opencollective.com/front-end-checklist/donate -->
 3 | 
 4 | **Fixes**: #
 5 | 
 6 | 🚨 Please review the [guidelines for contributing](../CONTRIBUTING.md) and our [code of conduct](../CODE_OF_CONDUCT.md) to this repository. 🚨
 7 | **Please complete these steps and check these boxes (by putting an x inside the brackets) before filing your PR:**
 8 | 
 9 | - [ ] Check the commit's or even all commits' message styles matches our requested structure.
10 | - [ ] Check your code additions will fail neither code linting checks nor unit test.
11 | 
12 | #### Short description of what this resolves:
13 | 
14 | 
15 | #### Proposed changes:
16 | 
17 | -
18 | -
19 | -
20 | 
21 | 👍 Thank you!
22 | 


--------------------------------------------------------------------------------
/.github/workflows/links-checker.yml:
--------------------------------------------------------------------------------
 1 | name: Links Checker
 2 | 
 3 | on:
 4 |   repository_dispatch:
 5 |   workflow_dispatch:
 6 |   schedule:
 7 |     - cron: '0 0 * * 1' # bi weekly on Monday
 8 | 
 9 | env:
10 |   HUSKY: 0
11 | 
12 | jobs:
13 |   links-checker:
14 |     runs-on: ubuntu-latest
15 |     name: Links Checker
16 |     permissions:
17 |       issues: write
18 | 
19 |     steps:
20 |       - uses: actions/checkout@v4
21 | 
22 |       - name: Link Checker
23 |         id: lychee
24 |         uses: lycheeverse/lychee-action@v2.0.2
25 |         with:
26 |           args: --config ./lychee.toml --verbose --no-progress README.md
27 |           fail: true
28 | 
29 |       - name: Create Issue From File
30 |         if: env.exit_code != 0
31 |         uses: peter-evans/create-issue-from-file@v5
32 |         with:
33 |           title: Link Checker Report
34 |           content-filepath: ./lychee-out.md
35 |           labels: report, automated issue
36 | 


--------------------------------------------------------------------------------
/.github/workflows/readme-check.yml:
--------------------------------------------------------------------------------
 1 | name: Readme Check
 2 | 
 3 | on:
 4 |   push:
 5 |     paths:
 6 |       - './README.md'
 7 |   pull_request:
 8 |     paths:
 9 |       - './README.md'
10 | 
11 | env:
12 |   HUSKY: 0
13 | 
14 | jobs:
15 |   readme-check:
16 |     runs-on: ubuntu-latest
17 |     name: Readme Check
18 | 
19 |     steps:
20 |       - uses: actions/checkout@v4
21 | 
22 |       - name: Setup Node.js
23 |         uses: actions/setup-node@v4
24 |         with:
25 |           node-version: '22'
26 | 
27 |       - name: Setup pnpm
28 |         uses: pnpm/action-setup@v4
29 |         with:
30 |           version: 9
31 | 
32 |       - name: Install dependencies
33 |         run: pnpm i
34 | 
35 |       - name: Check Markdown formatting
36 |         run: pnpm format:check
37 | 
38 |       - name: Lint Markdown
39 |         run: pnpm lint:md
40 | 
41 |       - name: Link Checker
42 |         uses: lycheeverse/lychee-action@v2.0.2
43 |         with:
44 |           args: --config ./lychee.toml --verbose --no-progress README.md
45 |           fail: true
46 | 


--------------------------------------------------------------------------------
/.github/workflows/stale.yml:
--------------------------------------------------------------------------------
 1 | name: 'Close stale issues and PRs'
 2 | 
 3 | on:
 4 |   schedule:
 5 |     - cron: '30 1 * * 6'
 6 |   workflow_dispatch:
 7 | 
 8 | permissions:
 9 |   issues: write
10 |   pull-requests: write
11 | 
12 | jobs:
13 |   stale:
14 |     runs-on: ubuntu-latest
15 | 
16 |     steps:
17 |       - uses: actions/stale@v8
18 |         with:
19 |           stale-issue-message: 'This issue has been automatically marked as stale because it has been open 40 days with no activity. Remove stale label or comment or this will be closed in 10 days. Thank you for your contributions!'
20 |           stale-pr-message: 'This PR has been automatically marked as stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 10 days.'
21 |           close-issue-message: 'This issue was closed because it has been stalled for 10 days with no activity. You can always contact the maintainers directly for more information.'
22 |           close-pr-message: 'This PR was closed because it has been stalled for 10 days with no activity. You can always contact the maintainers directly for more information.'
23 |           days-before-stale: 40
24 |           days-before-pr-stale: 45
25 |           days-before-close: 10
26 |           exempt-issue-assignees: 'thedaviddias'
27 |           exempt-pr-assignees: 'thedaviddias'
28 |           exempt-all-pr-assignees: true
29 |           stale-issue-label: 'stale'
30 |           stale-pr-label: 'stale'
31 |           exempt-pr-labels: 'keep-unstale,security,dependabot,wip,need-help'
32 |           exempt-issue-labels: 'keep-unstale,security'
33 |           close-issue-label: 'wontfix'
34 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | .lycheecache
4 | lychee-out.md
5 | 


--------------------------------------------------------------------------------
/.markdownlint.json:
--------------------------------------------------------------------------------
1 | {
2 |   "MD013": false,
3 |   "MD024": false,
4 |   "MD033": false
5 | }
6 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our Standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our Responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at thedaviddias@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 | 
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contribute
 2 | 
 3 | ## Introduction
 4 | 
 5 | First, thank you for considering contributing to the Front-End Performance Checklist! It's people like you that make the open source community such a great community! 😊
 6 | 
 7 | We welcome any type of contribution, not only code. You can help with
 8 | - **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)
 9 | - **Marketing**: writing blog posts, howto's, printing stickers, ...
10 | - **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ...
11 | - **Code**: take a look at the [open issues](https://github.com/thedaviddias/Front-End-Performance-Checklist/issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them.
12 | 
13 | ## Your First Contribution
14 | 
15 | Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
16 | 
17 | ## Submitting code
18 | 
19 | Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests.
20 | 
21 | ## Code review process
22 | 
23 | The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge.
24 | It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you?
25 | 
26 | ## Questions
27 | 
28 | If you have any questions, create an [issue](issue) (protip: do a quick search first to see if someone else didn't ask the same question before!).
29 | You can also reach us at thedaviddias@gmail.com.
30 | 
31 | <!-- This `CONTRIBUTING.md` is based on @nayafia's template https://github.com/nayafia/contributing-template -->
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018-2024 David Dias
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🎮 Front-End Performance Checklist
  2 | 
  3 | The only Front-End Performance Checklist that runs faster than the others!
  4 | 
  5 | Performance is a huge subject, but it's not always a "back-end" or an "admin" topic: 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).
  6 | 
  7 | > One simple rule: "Design and code with performance in mind"
  8 | 
  9 | **Other Checklists:**
 10 | 
 11 | - [🗂 Front-End Checklist](https://github.com/thedaviddias/Front-End-Checklist#front-end-checklist)
 12 | - [💎 Front-End Design Checklist](https://github.com/thedaviddias/Front-End-Design-Checklist#front-end-design-checklist)
 13 | 
 14 | > [!TIP]
 15 | > ⭐️ I've recently launched [UX Patterns for Devs](https://git.new/uxpatterns) and a [curated list for indie developers](https://git.new/indiedevtoolkit), feel free to check it out! ⭐️
 16 | 
 17 | ## 📚 Table of Contents
 18 | 
 19 | - [How to use?](#how-to-use)
 20 | - [HTML](#html)
 21 | - [CSS](#css)
 22 | - [Fonts](#fonts)
 23 | - [Images](#images)
 24 | - [JavaScript](#javascript)
 25 | - [Performance Tools](#performance-tools)
 26 | - [References](#references)
 27 | 
 28 | ## How to use?
 29 | 
 30 | 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.
 31 | 
 32 | 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:
 33 | 
 34 | - ![Low][low] means that the item has a **low** priority.
 35 | - ![Medium][medium] means that the item has a **medium** priority. You shouldn't avoid tackling that item.
 36 | - ![High][high] means that the item has a **high** priority. You can't avoid following that rule and implement the corrections recommended.
 37 | 
 38 | ### Performance tools
 39 | 
 40 | List of the tools you can use to test or monitor your website or application:
 41 | 
 42 | - 🛠 [WebPagetest - Website Performance and Optimization Test](https://www.webpagetest.org/)
 43 | - 🛠 ☆ [Dareboost: Website Speed Test and Website Analysis](https://www.dareboost.com/) (use the coupon WPCDD20 for -20%)
 44 | - 🛠 [Treo: Page Speed Monitoring](https://treo.sh/?ref=perfchecklist)
 45 | - 🛠 [GTmetrix | Website Speed and Performance Optimization](https://gtmetrix.com/)
 46 | - 🛠 [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
 47 | - 🛠 [Web.dev](https://web.dev/measure)
 48 | - 🛠 [Pingdom Website Speed Test](https://tools.pingdom.com)
 49 | - 📖 [Make the Web Faster | Google Developers](https://developers.google.com/speed/)
 50 | - 🛠 [Sitespeed.io - Welcome to the wonderful world of Web Performance](https://www.sitespeed.io/)
 51 | - 🛠 [Calibre](https://calibreapp.com/)
 52 | - 🛠 [Website Speed Test | Check Web Performance &raquo; Dotcom-Tools](https://www.dotcom-tools.com/website-speed-test.aspx)
 53 | - 🛠 [Website and Server Uptime Monitoring - Pingdom](https://www.pingdom.com/product/uptime-monitoring/) ([Free Signup Link](https://www.pingdom.com/free))
 54 | - 🛠 [Uptime Robot](https://uptimerobot.com)
 55 | - 🛠 [SpeedCurve: Monitor front-end performance](https://speedcurve.com)
 56 | - 🛠 [PWMetrics - CLI tool and lib to gather performance metrics](https://github.com/paulirish/pwmetrics)
 57 | - 🛠 [Lighthouse - Google](https://developers.google.com/web/tools/lighthouse/#devtools)
 58 | - 🛠 [Checkbot browser extension - Checks for web performance best practices](https://www.checkbot.io/)
 59 | - 🛠 [Yellow Lab Tools | Online test to help speeding up heavy web pages](https://yellowlab.tools/)
 60 | - 🛠 [Speedrank - Web Performance Monitoring](https://speedrank.app/)
 61 | - 🛠 [DebugBear - Monitor website performance and Lighthouse scores](https://www.debugbear.com/)
 62 | - 🛠 [Gravity CI - Check your build artifacts sizes on every pull request.](https://gravity.ci/)
 63 | - 🛠 [Exthouse - Analyze the impact of a browser extension on web performance](https://github.com/treosh/exthouse)
 64 | - 🛠 [LogRocket - Measure front-end performance in production apps](https://logrocket.com)
 65 | 
 66 | ### References
 67 | 
 68 | - 📖 [The Cost Of JavaScript](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4)
 69 | - [AddyOsmani.com - Start Performance Budgeting](https://addyosmani.com/blog/performance-budgets/)
 70 | - 📖 [Get Started With Analyzing Runtime Performance  |  Google Developers](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/)
 71 | - 📖 [State of the Web | 2018_01_01](https://httparchive.org/reports/state-of-the-web?start=2018_01_01)
 72 | - 📖 [Page Weight Doesn't Matter](https://www.speedshop.co/2015/11/05/page-weight-doesnt-matter.html)
 73 | - 📖 [Front-End Performance Checklist 2021 [PDF, Apple Pages, MS Word]](https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/)
 74 | - 📖 [Designing for Performance Weighing Aesthetics and Speed - By Lara Callender Hogan [eBook, Print]](http://designingforperformance.com/index.html)
 75 | - 📖 [fabkrum/web-performance-resources: Up to date collection of valuable web performance resources](https://github.com/fabkrum/web-performance-resources)
 76 | - 📖 [Checkbot - Web Speed Best Practices](https://www.checkbot.io/guide/speed/)
 77 | - 🛠 [Progressive Tooling - A list of community-built, third-party tools that can be used to improve page performance](https://progressivetooling.com/)
 78 | 
 79 | ## HTML
 80 | 
 81 | ![html]
 82 | 
 83 | - [ ] **Minified HTML:** ![medium] The HTML code is minified, comments, white spaces and new lines are removed from production files.
 84 | 
 85 |   _Why:_
 86 | 
 87 |   > 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.
 88 | 
 89 |   _How:_
 90 | 
 91 |   > 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.
 92 | 
 93 |   - 🛠 [HTML minifier | Minify Code](http://minifycode.com/html-minifier/)
 94 |   - 🛠 [Online HTML Compressor](http://refresh-sf.com)
 95 |   - 📖 [Experimenting with HTML minifier — Perfection Kills](http://perfectionkills.com/experimenting-with-html-minifier/#use_short_doctype)
 96 | 
 97 | - [ ] **Place CSS tags always before JavaScript tags:** ![high] Ensure that your CSS is always loaded before having JavaScript code.
 98 | 
 99 |   ```html
100 |   <!-- Not recommended -->
101 |   <script src="jquery.js"></script>
102 |   <script src="foo.js"></script>
103 |   <link rel="stylesheet" href="foo.css" />
104 | 
105 |   <!-- Recommended -->
106 |   <link rel="stylesheet" href="foo.css" />
107 |   <script src="jquery.js"></script>
108 |   <script src="foo.js"></script>
109 |   ```
110 | 
111 |   _Why:_
112 | 
113 |   > Having your CSS tags before any JavaScript enables better, parallel download which speed up browser rendering time.
114 | 
115 |   _How:_
116 | 
117 |   > ⁃ Ensure that `<link>` and `<style>` in your `<head>` are always before your `<script>`.
118 | 
119 | - [ ] **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.
120 | 
121 | - [ ] **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.
122 | 
123 |   _Why:_
124 | 
125 |   > 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.
126 | 
127 |   _How:_
128 | 
129 |   > ⁃ Ensure that `<link>` is in your `<head>` section.
130 | 
131 |   - 📖 [What Is Prefetching and Why Use It](https://www.keycdn.com/support/prefetching)
132 |   - 📖 [Prefetching, preloading, prebrowsing](https://css-tricks.com/prefetching-preloading-prebrowsing/)
133 |   - 📖 [What is Preload, Prefetch, and Preconnect](https://www.keycdn.com/blog/resource-hints)
134 | 
135 | **[⬆ back to top](#-table-of-contents)**
136 | 
137 | ## CSS
138 | 
139 | ![css]
140 | 
141 | - [ ] **Minification:** ![high] All CSS files are minified, comments, white spaces and new lines are removed from production files.
142 | 
143 |   _Why:_
144 | 
145 |   > When CSS files are minified, the content is loaded faster and less data is sent to the client. It's important to always minify CSS files in production. It is beneficial for the user as it is for any business who wants to lower bandwidth costs and lower resource usage.
146 | 
147 |   _How:_
148 | 
149 |   > ⁃ Use tools to minify your files automatically before or during your build or your deployment.
150 | 
151 |   - 🛠 [cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano](https://cssnano.github.io/cssnano/)
152 |   - 🛠 [CSS minifier](https://goonlinetools.com/css-minifier/)
153 |   - 🛠 [@neutrinojs/style-minify - npm](https://www.npmjs.com/package/@neutrinojs/style-minify)
154 |   - 🛠 [Online CSS Compressor](http://refresh-sf.com)
155 | 
156 | - [ ] **Concatenation:** ![medium] CSS files are concatenated in a single file _(Not always valid for HTTP/2)_.
157 | 
158 |   ```html
159 |   <!-- Not recommended -->
160 |   <link rel="stylesheet" href="foo.css" />
161 |   <link rel="stylesheet" href="bar.css" />
162 | 
163 |   <!-- Recommended -->
164 |   <link rel="stylesheet" href="foobar.css" />
165 |   ```
166 | 
167 |   _Why:_
168 | 
169 |   > If you are still using HTTP/1, you may need to still concatenate your files, it's less true if your server use HTTP/2 (tests should be made).
170 | 
171 |   _How:_
172 | 
173 |   > ⁃ Use online tool or any plugin before or during your build or your deployment to concatenate your files. <br>
174 |   > ⁃ Ensure, of course, that concatenation does not break your project.
175 | 
176 |   - 📖 [HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)](https://hpbn.co/optimizing-application-delivery/#optimizing-for-http2)
177 |   - 📖 [Performance Best Practices in the HTTP/2 Era](https://deliciousbrains.com/performance-best-practices-http2/)
178 | 
179 | - [ ] **Non-blocking:** ![high] CSS files need to be non-blocking to prevent the DOM from taking time to load.
180 | 
181 |   ```html
182 |   <link
183 |     rel="preload"
184 |     href="global.min.css"
185 |     as="style"
186 |     onload="this.rel='stylesheet'"
187 |   />
188 |   <noscript><link rel="stylesheet" href="global.min.css" /></noscript>
189 |   ```
190 | 
191 |   _Why:_
192 | 
193 |   > CSS files can block the page load and delay the rendering of your page. Using `preload` can actually load the CSS files before the browser starts showing the content of the page.
194 | 
195 |   _How:_
196 | 
197 |   > ⁃ You need to add the `rel` attribute with the `preload` value and add `as="style"` on the `<link>` element.
198 | 
199 |   - 🛠 [loadCSS by filament group](https://github.com/filamentgroup/loadCSS)
200 |   - 📖 [Example of preload CSS using loadCSS](https://gist.github.com/thedaviddias/c24763b82b9991e53928e66a0bafc9bf)
201 |   - 📖 [Preloading content with rel="preload"](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content)
202 |   - 📖 [Preload: What Is It Good For? — Smashing Magazine](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/)
203 | 
204 | - [ ] **Unused CSS:** ![medium] Remove unused CSS selectors.
205 | 
206 |   _Why:_
207 | 
208 |   > Removing unused CSS selectors can reduce the size of your files and then speed up the load of your assets.
209 | 
210 |   _How:_
211 | 
212 |   > ⁃ ⚠️ Always check if the framework CSS you want to use don't already has a reset / normalize code included. Sometimes you may not need everything that is inside your reset / normalize file.
213 | 
214 |   - 🛠 [UnCSS Online](https://uncss-online.com/)
215 |   - 🛠 [PurifyCSS](https://github.com/purifycss/purifycss)
216 |   - 🛠 [PurgeCSS](https://github.com/FullHuman/purgecss)
217 |   - 🛠 [Chrome DevTools Coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage)
218 | 
219 | - [ ] **CSS Critical:** ![high] The CSS critical (or "above the fold") collects all the CSS used to render the visible portion of the page. It is embedded before your principal CSS call and between `<style></style>` in a single line (minified if possible).
220 | 
221 |   _Why:_
222 | 
223 |   > Inlining critical CSS help to speed up the rendering of the web pages reducing the number of requests to the server.
224 | 
225 |   _How:_
226 | 
227 |   > Generate the CSS critical with online tools or using a plugin like the one that Addy Osmani developed.
228 | 
229 |   - 📖 [Understanding Critical CSS](https://www.smashingmagazine.com/2015/08/understanding-critical-css/)
230 |   - 🛠 [Critical by Addy Osmani on GitHub](https://github.com/addyosmani/critical) automates this.
231 |   - 📖 [Inlining critical CSS for better web performance | Go Make Things](https://gomakethings.com/inlining-critical-css-for-better-web-performance/)
232 |     - 🛠 [Critical Path CSS Generator - Prioritize above the fold content :: SiteLocity](https://www.sitelocity.com/critical-path-css-generator)
233 |     - 📖 [Reduce the size of the above-the-fold content](https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent)
234 | 
235 | - [ ] **Embedded or inline CSS:** ![high] Avoid using embed or inline CSS inside your `<body>` \_(Not valid for HTTP/2)
236 | 
237 |   _Why:_
238 | 
239 |   > One of the first reason it's because it's a good practice to **separate content from design**. It also helps you have a more maintainable code and keep your site accessible. But regarding performance, it's simply because it decreases the file-size of your HTML pages and the load time.
240 | 
241 |   _How:_
242 | 
243 |   > Always use external stylesheets or embed CSS in your `<head>` (and follow the others CSS performance rules)
244 | 
245 | - [ ] **Analyse stylesheets complexity:** ![high] Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.
246 | 
247 |   _Why:_
248 | 
249 |   > Sometimes you may have redundancies or validation errors in your CSS, analysing your CSS files and removed these complexities can help you to speed up your CSS files (because your browser will read them faster)
250 | 
251 |   _How:_
252 | 
253 |   > Your CSS should be organized, using a CSS preprocessor can help you with that. Some online tools listed below can also help you analysing and correct your code.
254 | 
255 |   - 🛠 [TestMyCSS | Optimize and Check CSS Performance](http://www.testmycss.com/)
256 |   - 🛠 [CSS Stats](https://cssstats.com/)
257 |   - 🛠 [macbre/analyze-css: CSS selectors complexity and performance analyzer](https://github.com/macbre/analyze-css)
258 |   - 🛠 [Project Wallace](https://www.projectwallace.com/) is like CSS Stats but stores stats over time so you can track your changes
259 | 
260 | **[⬆ back to top](#-table-of-contents)**
261 | 
262 | ## Fonts
263 | 
264 | ![fonts]
265 | 
266 | - 📖 [A Book Apart, Webfont Handbook](https://abookapart.com/products/webfont-handbook)
267 | 
268 | - [ ] **Webfont formats:** ![medium] You are using WOFF2 on your web project or application.
269 | 
270 |   _Why:_
271 | 
272 |   > According to Google, the WOFF 2.0 Web Font compression format offers 30% average gain over WOFF 1.0. It's then good to use WOFF 2.0, WOFF 1.0 as a fallback and TTF.
273 | 
274 |   _How:_
275 | 
276 |   > Check before buying your new font that the provider gives you the WOFF2 format. If you are using a free font, you can always use Font Squirrel to generate all the formats you need.
277 | 
278 |   - 📖 [WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2](https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a)
279 |   - 🛠 [Create Your Own @font-face Kits » Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator)
280 |   - 🛠 [IcoMoon App - Icon Font, SVG, PDF & PNG Generator](https://icomoon.io/app/)
281 |   - 📖 [Using @font-face | CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/?ref=frontendchecklist)
282 |   - 📖 [Can I use... WOFF2](https://caniuse.com/woff2)
283 | 
284 | - [ ] **Use `preconnect` to load your fonts faster:** ![medium]
285 | 
286 |   ```html
287 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
288 |   ```
289 | 
290 |   _Why:_
291 | 
292 |   > When you arrived on a website, your device needs to find out where your site lives and which server it needs to connect with. Your browser had to contact a DNS server and wait for the lookup complete before fetching the resource (fonts, CSS files...). Prefetches and preconnects allow the browser to lookup the DNS information and start establishing a TCP connection to the server hosting the font file. This provides a performance boost because by the time the browser gets around to parsing the css file with the font information and discovering it needs to request a font file from the server, it will already have pre-resolved the DNS information and have an open connection to the server ready in its connection pool.
293 | 
294 |   _How:_
295 | 
296 |   > ⁃ Before prefetching your webfonts, use webpagetest to evaluate your website <br>
297 |   > ⁃ Look for teal colored DNS lookups and note the host that are being requested <br>
298 |   > ⁃ Prefetch your webfonts in your `<head>` and add eventually these hostnames that you should prefetch too
299 | 
300 |   - 📖 [Faster Google Fonts with Preconnect - CDN Planet](https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/)
301 |   - 📖 [Make Your Site Faster with Preconnect Hints | Viget](https://www.viget.com/articles/make-your-site-faster-with-preconnect-hints/)
302 |   - 📖 [Ultimate Guide to Browser Hints: Preload, Prefetch, and Preconnect - MachMetrics Speed Blog](https://www.machmetrics.com/speed-blog/guide-to-browser-hints-preload-preconnect-prefetch/)
303 |   - 📖 [A Comprehensive Guide to Font Loading Strategies—zachleat.com](https://www.zachleat.com/web/comprehensive-webfonts/#font-face)
304 |   - 🛠 [typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.](https://github.com/typekit/webfontloader)
305 | 
306 | - [ ] **Webfont size:** ![medium] Webfont sizes don't exceed 300kb (all variants included)
307 | 
308 | - 📖 [Font Bytes - Page Weight](https://httparchive.org/reports/page-weight#bytesFont)
309 | 
310 | - [ ] **Prevent Flash or Invisible Text:** ![medium] Avoid transparent text until the Webfont is loaded
311 | 
312 | - 📖 [`font-display` for the Masses](https://css-tricks.com/font-display-masses/)
313 | - 📖 [CSS font-display: The Future of Font Rendering on the Web](https://www.sitepoint.com/css-font-display-future-font-rendering-web/)
314 | 
315 | **[⬆ back to top](#-table-of-contents)**
316 | 
317 | ## Images
318 | 
319 | ![images]
320 | 
321 | - 📖 [Image Bytes in 2018](https://httparchive.org/reports/page-weight#bytesImg)
322 | 
323 | - [ ] **Images optimization:** ![high] Your images are optimized, compressed without direct impact to the end user.
324 | 
325 |   _Why:_
326 | 
327 |   > Optimized images load faster in your browser and consume less data.
328 | 
329 |   _How:_
330 | 
331 |   > ⁃ Try using CSS3 effects when it's possible (instead of a small image) <br>
332 |   > ⁃ When it's possible, use fonts instead of text encoded in your images <br>
333 |   > ⁃ Use SVG <br>
334 |   > ⁃ Use a tool and specify a level compression under 85.
335 | 
336 |   - 📖 [Image Optimization | Web Fundamentals | Google Developers](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization)
337 |   - 📖 [Essential Image Optimization - An eBook by Addy Osmani](https://images.guide/)
338 |   - 🛠 [TinyJPG – Compress JPEG images intelligently](https://tinyjpg.com/)
339 |   - 🛠 [Kraken.io - Online Image Optimizer](https://kraken.io/web-interface)
340 |   - 🛠 [Compressor.io - optimize and compress JPEG photos and PNG images](https://compressor.io/compress)
341 |   - 🛠 [Cloudinary - Image Analysis Tool](https://webspeedtest.cloudinary.com)
342 |   - 🛠 [ImageEngine - Image Webpage Loading Test](https://demo.imgeng.in)
343 |   - 🛠 [SVGOMG - Optimize SVG vector graphics files](https://jakearchibald.github.io/svgomg/)
344 | 
345 | - [ ] **Images format:** ![high] Choose your image format appropriately.
346 | 
347 |   _Why:_
348 | 
349 |   > To ensure that your images don't slow your website, choose the format that will correspond to your image. If it's a photo, JPEG is most of the time more appropriate than PNG or GIF. But don't forget to look a the nex-gen formats which can reduce the size of your files. Each image format has pros and cons, it's important to know these to make the best choice possible.
350 | 
351 |   _How:_
352 | 
353 |   > ⁃ Use [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to identify which images can eventually use **next-gen formats** (like JPEG 2000m JPEG XR or WebP) <br>
354 |   > ⁃ Compare different formats, sometimes using PNG8 is better than PNG16, sometimes it's not.
355 | 
356 |   - 📖 [Serve Images in Next-Gen Formats  |  Tools for Web Developers  |  Google Developers](https://developers.google.com/web/tools/lighthouse/audits/webp)
357 |   - 📖 [What Is the Right Image Format for Your Website? — SitePoint](https://www.sitepoint.com/what-is-the-right-image-format-for-your-website/)
358 |   - 📖 [PNG8 - The Clear Winner — SitePoint](https://www.sitepoint.com/png8-the-clear-winner/)
359 |   - 📖 [8-bit vs 16-bit - What Color Depth You Should Use And Why It Matters - DIY Photography](https://www.diyphotography.net/8-bit-vs-16-bit-color-depth-use-matters/)
360 | 
361 | - [ ] **Use vector image vs raster/bitmap:** ![medium] Prefer using vector image rather than bitmap images (when possible).
362 | 
363 |   _Why:_
364 | 
365 |   > Vector images (SVG) tend to be smaller than images and SVG's are responsive and scale perfectly. These images can be animated and modified by CSS.
366 | 
367 | - [ ] **Images dimensions:** ![medium] Set `width` and `height` attributes on `<img>` if the final rendered image size is known.
368 | 
369 |   _Why:_
370 | 
371 |   > If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
372 | 
373 | - [ ] **Avoid using Base64 images:** ![medium] You could eventually convert tiny images to base64 but it's actually not the best practice.
374 | 
375 |   - 📖 [Base64 Encoding & Performance, Part 1 and 2 by Harry Roberts](https://csswizardry.com/2017/02/base64-encoding-and-performance/)
376 |   - 📖 [A closer look at Base64 image performance – The Page Not Found Blog](http://www.andygup.net/a-closer-look-at-base64-image-performance/)
377 |   - 📖 [When to base64 encode images (and when not to) | David Calhoun](https://www.davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/)
378 | 
379 | - [ ] **Lazy loading:** ![medium] Offscreen images are loaded lazily (A noscript fallback is always provided).
380 | 
381 |   _Why:_
382 | 
383 |   > It will improve the response time of the current page and then avoid loading unnecessary images that the user may not need.
384 | 
385 |   _How:_
386 | 
387 |   > ⁃ Use [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to identify how many **images are offscreen**. <br>
388 |   > ⁃ Use a JavaScript plugin like the following to lazyload your images. Make sure you target offscreen images only. <br>
389 |   > ⁃ Also make sure to lazyload alternative images shown at mouseover or upon other user actions.
390 | 
391 |   - 🛠 [verlok/lazyload: GitHub](https://github.com/verlok/lazyload)
392 |   - 🛠 [aFarkas/lazysizes: GitHub](https://github.com/aFarkas/lazysizes/)
393 |   - 🛠 [mfranzke/loading-attribute-polyfill: GitHub](https://github.com/mfranzke/loading-attribute-polyfill/)
394 |   - 📖 [Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/)
395 |   - 📖 [5 Brilliant Ways to Lazy Load Images For Faster Page Loads - Dynamic Drive Blog](http://blog.dynamicdrive.com/5-brilliant-ways-to-lazy-load-images-for-faster-page-loads/)
396 | 
397 | - [ ] **Responsive images:** ![medium] Ensure to serve images that are close to your display size.
398 | 
399 |   _Why:_
400 | 
401 |   > Small devices don't need images bigger than their viewport. It's recommended to have multiple versions of one image on different sizes.
402 | 
403 |   _How:_
404 | 
405 |   > ⁃ Create different image sizes for the devices you want to target. <br>
406 |   > ⁃ Use `srcset` and `picture` to deliver multiple variants of each image.
407 | 
408 |   - 📖 [Responsive images - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
409 | 
410 | **[⬆ back to top](#-table-of-contents)**
411 | 
412 | ## JavaScript
413 | 
414 | ![javascript]
415 | 
416 | - [ ] **JS Minification:** ![high] All JavaScript files are minified, comments, white spaces and new lines are removed from production files _(still valid if using HTTP/2)_.
417 | 
418 |   _Why:_
419 | 
420 |   > Removing all unnecessary spaces, comments and break will reduce the size of your JavaScript files and speed up your site's page load times and obviously lighten the download for your user.
421 | 
422 |   _How:_
423 | 
424 |   > ⁃ Use the tools suggested below to minify your files automatically before or during your build or your deployment.
425 | 
426 |   - 🛠 [uglify-js - npm](https://www.npmjs.com/package/uglify-js)
427 |   - 🛠 [Online JavaScript Compressor](http://refresh-sf.com)
428 | 
429 | - [ ] **No JavaScript inside:** ![medium] _(Only valid for website)_ Avoid having multiple JavaScript codes embedded in the middle of your body. Regroup your JavaScript code inside external files or eventually in the `<head>` or at the end of your page (before `</body>`).
430 | 
431 |   _Why:_
432 | 
433 |   > Placing JavaScript embedded code directly in your `<body>` can slow down your page because it loads while the DOM is being built. The best option is to use external files with `async` or `defer` to avoid blocking the DOM. Another option is to place some scripts inside your `<head>`. Most of the time analytics code or small script that need to load before the DOM gets to main processing.
434 | 
435 |   _How:_
436 | 
437 |   > Ensure that all your files are loaded using `async` or `defer` and decide wisely the code that you will need to inject in your `<head>`.
438 | 
439 |   - 📖 [11 Tips to Optimize JavaScript and Improve Website Loading Speeds](https://www.upwork.com/hiring/development/11-tips-to-optimize-javascript-and-improve-website-loading-speeds/)
440 | 
441 | - [ ] **Non-blocking JavaScript:** ![high] JavaScript files are loaded asynchronously using `async` or deferred using `defer` attribute.
442 | 
443 |   ```html
444 |   <!-- Defer Attribute -->
445 |   <script defer src="foo.js"></script>
446 | 
447 |   <!-- Async Attribute -->
448 |   <script async src="foo.js"></script>
449 |   ```
450 | 
451 |   _Why:_
452 | 
453 |   > JavaScript blocks the normal parsing of the HTML document, so when the parser reaches a `<script>` tag (particularly is inside the `<head>`), it stops to fetch and run it. Adding `async` or `defer` are highly recommended if your scripts are placed in the top of your page but less valuable if just before your `</body>` tag. But it's a good practice to always use these attributes to avoid any performance issue.
454 | 
455 |   _How:_
456 | 
457 |   > ⁃ Add `async` (if the script don't rely on other scripts) or `defer` (if the script relies upon or relied upon by an async script) as an attribute to your script tag. <br>
458 |   > ⁃ If you have small scripts, maybe use inline script place above async scripts.
459 | 
460 |   - 📖 [Remove Render-Blocking JavaScript](https://developers.google.com/speed/docs/insights/BlockingJS)
461 | 
462 | - [ ] **Optimized and updated JS libraries:** ![medium] All JavaScript libraries used in your project are necessary (prefer Vanilla JavaScript for simple functionalities), updated to their latest version and don't overwhelm your JavaScript with unnecessary methods.
463 | 
464 |   _Why:_
465 | 
466 |   > Most of the time, new versions come with optimization and security fix. You should use the most optimized code to speed up your project and ensure that you'll not slow down your website or app without outdated plugin.
467 | 
468 |   _How:_
469 | 
470 |   > If your project use NPM packages, [npm-check](https://www.npmjs.com/package/npm-check) is a pretty interesting library to upgrade / update your libraries.
471 |   > [Greenkeeper](https://greenkeeper.io/) can automatically look for your dependencies and suggest an update every time a new version is out.
472 | 
473 |   - 📖 [You may not need jQuery](http://youmightnotneedjquery.com/)
474 |   - 📖 [Vanilla JavaScript for building powerful web applications](https://plainjs.com/)
475 | 
476 | - [ ] **Check dependencies size limit:** ![low] Ensure to use wisely external libraries, most of the time, you can use a lighter library for a same functionality.
477 | 
478 |   _Why:_
479 | 
480 |   > You may be tempted to use one of the 745 000 packages you can find on [npm](https://www.npmjs.com/), but you need to choose the best package for your needs. For example, MomentJS is an awesome library but with a lot of methods you may never use, that's why Day.js was created. It's just 2kB vs 16.4kB gz for Moment.
481 | 
482 |   _How:_
483 | 
484 |   > Always compare and choose the best and lighter library for your needs. You can also use tools like [npm trends](http://www.npmtrends.com/) to compare NPM package downloads counts or [Bundlephobia](https://bundlephobia.com/) to know the size of your dependencies.
485 | 
486 |   - 🛠 [ai/size-limit: Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error.](https://github.com/ai/size-limit)
487 |   - 🛠 [webpack-bundle-analyzer - npm](https://www.npmjs.com/package/webpack-bundle-analyzer)
488 |   - 🛠 [js-dependency-viewer - npm](https://www.npmjs.com/package/js-dependency-viewer)
489 |   - 📖 [Size Limit: Make the Web lighter — Martian Chronicles, Evil Martians’ team blog](https://evilmartians.com/chronicles/size-limit-make-the-web-lighter)
490 | 
491 | - [ ] **JavaScript Profiling:** ![medium] Check for performance problems in your JavaScript files (and CSS too).
492 | 
493 |   _Why:_
494 | 
495 |   > JavaScript complexity can slow down runtime performance. Identifying these possible issues are essential to offer the smoothest user experience.
496 | 
497 |   _How:_
498 | 
499 |   > Use the Timeline tool in the Chrome Developer Tool to evaluate scripts events and found the one that may take too much time.
500 | 
501 |   - 📖 [Speed Up JavaScript Execution  |  Tools for Web Developers  |  Google Developers](https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution)
502 |   - 📖 [JavaScript Profiling With The Chrome Developer Tools — Smashing Magazine](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
503 |   - 📖 [How to Record Heap Snapshots  |  Tools for Web Developers  |  Google Developers](https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots)
504 |   - 📖 [Chapter 22 - Profiling the Frontend - Blackfire](https://blackfire.io/docs/book/22-frontend-profiling)
505 |   - 📖 [30 Tips To Improve Javascript Performance](http://www.monitis.com/blog/30-tips-to-improve-javascript-performance/)
506 | 
507 | - [ ] **Use of Service Workers:** ![medium] You are using Service Workers in your PWA to cache data or execute possible heavy tasks without impacting the user experience of your application.
508 | 
509 |   - 📖 [Service Workers: an Introduction  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/primers/service-workers/)
510 |   - 📖 [Measuring the Real-world Performance Impact of Service Workers  |  Web  |  Google Developers](https://developers.google.com/web/showcase/2016/service-worker-perf)
511 |   - 📖 [What Are Service Workers and How They Help Improve Performance](https://www.keycdn.com/blog/service-workers/)
512 |   - 📹 [How does a service worker work? - YouTube](https://www.youtube.com/watch?v=__xAtWgfzvc)
513 | 
514 | **[⬆ back to top](#-table-of-contents)**
515 | 
516 | ## Server
517 | 
518 | ![server-side]
519 | 
520 | - [ ] **Your website is using HTTPS:** ![high]
521 | 
522 |   _Why:_
523 | 
524 |   > 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](https://letsencrypt.org/)).
525 | 
526 | - 📖 [Why Use HTTPS? | Cloudflare](https://www.cloudflare.com/learning/security/why-use-https/)
527 | - 📖 [Enabling HTTPS Without Sacrificing Your Web Performance - Moz](https://moz.com/blog/enabling-https-without-sacrificing-web-performance)
528 | - 📖 [How HTTPS Affects Website Performance](https://wp-rocket.me/blog/https-affects-website-performance/)
529 | - 📖 [HTTP versus HTTPS versus HTTP2 - The real story | Tune The Web](https://www.tunetheweb.com/blog/http-versus-https-versus-http2/)
530 | 
531 | - [ ] **Page weight < 1500 KB (ideally < 500 KB):** ![high] Reduce the size of your page + resources as much as you can.
532 | 
533 |   _Why:_
534 | 
535 |   > Ideally you should try to target < 500 KB but the state of web shows that the median of Kilobytes is around 1500 KB (even on mobile). Depending on your target users, network connection, devices, it's important to reduce as much as possible your total Kilobytes to have the best user experience possible.
536 | 
537 |   _How:_
538 | 
539 |   > ⁃ All the rules inside the Front-End Performance Checklist will help you to reduce as much as possible your resources and your code.
540 | 
541 |   - 📖 [Page Weight](https://httparchive.org/reports/page-weight#bytesTotal)
542 |   - 🛠 [What Does My Site Cost?](https://whatdoesmysitecost.com/)
543 |   - 🛠 [web - Measure full page size in Chrome DevTools - Stack Overflow](https://stackoverflow.com/questions/38239980/measure-full-page-size-in-chrome-devtools)
544 | 
545 | - [ ] **Page load times < 3 seconds:** ![high] Reduce as much as possible your page load times to quickly deliver your content to your users.
546 | 
547 |   _Why:_
548 | 
549 |   > Faster your website or app is, less you have probability of bounce increases, in other terms you have less chances to lose your user or future client. Enough researches on the subject prove that point.
550 | 
551 |   _How:_
552 | 
553 |   > Use online tools like [Page Speed Insight](https://developers.google.com/speed/pagespeed/insights/) or [WebPageTest](https://www.webpagetest.org/) to analyze what could be slowing you down and use the Front-End Performance Checklist to improve your load times.
554 | 
555 |   - 🛠 [Compare your mobile site speed](https://www.thinkwithgoogle.com/feature/mobile/)
556 |   - 🛠 [Test Your Mobile Website Speed and Performance - Think With Google](https://testmysite.thinkwithgoogle.com/intl/en-us)
557 |   - 📖 [Average Page Load Times for 2018 - How does yours compare? - MachMetrics Speed Blog](https://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/)
558 | 
559 | - [ ] **Time To First Byte < 1.3 seconds:** ![high] Reduce as much as you can the time your browser waits before receiving data.
560 | 
561 | - [ ] **Cookie size:** ![medium] If you are using cookies, be sure each cookie doesn't exceed 4096 bytes and your domain name doesn't have more than 20 cookies.
562 | 
563 |   _Why:_
564 | 
565 |   > Cookies are exchanged in the HTTP headers between web servers and browsers. It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.
566 | 
567 |   _How:_
568 | 
569 |   > Eliminate unnecessary cookies.
570 | 
571 |   - 📖 [Cookie specification: RFC 6265](https://tools.ietf.org/html/rfc6265)
572 |   - 📖 [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)
573 |   - 🛠 [Browser Cookie Limits](http://browsercookielimits.squawky.net/)
574 |   - 📖 [Website Performance: Cookies Don't Taste So Good - Monitis Blog](http://www.monitis.com/blog/website-performance-cookies-dont-taste-so-good/)
575 |   - 📖 [Google's Web Performance Best Practices #3: Minimize Request Overhead - GlobalDots Blog](https://www.globaldots.com/googles-web-performance-best-practices-3-minimize-request-overhead/)
576 | 
577 | - [ ] **Minimizing HTTP requests:** ![high] Always ensure that every file requested are essential for your website or application.
578 | 
579 | - [ ] **Use a CDN to deliver your assets:** ![medium] Use a CDN to deliver faster your content over the world.
580 | 
581 | - 📖 [10 Tips to Optimize CDN Performance - CDN Planet](https://www.cdnplanet.com/blog/10-tips-optimize-cdn-performance/)
582 | - 📖 [HTTP Caching  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching)
583 | 
584 | - [ ] **Serve files from the same protocol:** ![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.
585 | 
586 | - [ ] **Serve reachable files:** ![high] Avoid requesting unreachable files (404).
587 | 
588 | - [ ] **Set HTTP cache headers properly:** ![high] Set HTTP headers to avoid expensive number of roundtrips between your browser and the server.
589 | 
590 | - [ ] **GZIP / Brotli compression is enabled:** ![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.
591 | 
592 | - 📖 [Learn more about Brotli Compression](https://www.brotli.pro/)
593 | - 📖 [Can I use... Brotli](https://caniuse.com/brotli)
594 | 
595 | **[⬆ back to top](#-table-of-contents)**
596 | 
597 | ## Performances and JS Frameworks
598 | 
599 | ### Angular
600 | 
601 | - 📖 [Angular Performance Checklist](https://github.com/mgechev/angular-performance-checklist)
602 | 
603 | ### React
604 | 
605 | - 📖 [Optimizing Performance - React](https://reactjs.org/docs/optimizing-performance.html)
606 | - 📖 [React image manipulation | Cloudinary](https://cloudinary.com/documentation/react_image_manipulation)
607 | - 📖 [Debugging React performance with React 16 and Chrome Devtools.](https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad)
608 | - 📖 [Build Performant - React](https://web.dev/react/)
609 | 
610 | ### Vue
611 | 
612 | - 📖 [Vue - Useful Links|Style Guide and Performance](https://learn-vuejs.github.io/vue-patterns/useful-links/)
613 | 
614 | ## Performances and CMS
615 | 
616 | ### WordPress
617 | 
618 | - 🛠 [Test Your Website Speed | WordPress Hosting by @WPEngine](https://wpengine.com/speed-tool/)
619 | 
620 | #### Articles
621 | 
622 | - 📖 [19 Tips to Speed Up WordPress Performance (Updated)](https://www.wpbeginner.com/wordpress-performance-speed/)
623 | - 📖 [Speed Up Your WordPress - How to Save Images Optimized for Web](https://www.wpbeginner.com/beginners-guide/speed-wordpress-save-images-optimized-web/)
624 | 
625 | #### Plugins recommended
626 | 
627 | - 🛠 [Caching Plugin for WordPress - Speed up your website with WP Rocket](https://wp-rocket.me/)
628 | - 🛠 [WP-Sweep | WordPress.org](https://wordpress.org/plugins/wp-sweep/)
629 | - 🛠 [Imagify Image Optimizer | WordPress.org](https://wordpress.org/plugins/imagify/)
630 | 
631 | ## Translations
632 | 
633 | The Front-End Performance Checklist wants to also be available in other languages! Don't hesitate to submit your contribution!
634 | 
635 | - 🇵🇹 Portuguese: [fernandofawkes/Front-End-Performance-Checklist](https://github.com/fernandofawkes/Front-End-Performance-Checklist)
636 | - 🇨🇳 Chinese: [JohnsenZhou/Front-End-Performance-Checklist](https://github.com/JohnsenZhou/Front-End-Performance-Checklist)
637 | - 🇷🇺 Russian: [lex111/Front-End-Performance-Checklist](https://github.com/lex111/Front-End-Performance-Checklist)
638 | - 🇫🇷 French: [WilliamDASILVA/Front-End-Performance-Checklist](https://github.com/WilliamDASILVA/Front-End-Performance-Checklist)
639 | - 🇰🇷 Korean: [ParkSB/Front-End-Performance-Checklist](https://github.com/ParkSB/Front-End-Performance-Checklist)
640 | - 🇪🇸 Spanish: [dagerzuga/Front-End-Performance-Checklist](https://github.com/dagerzuga/Front-End-Performance-Checklist)
641 | - 🇻🇳 Vietnamese : [huynhan147/Front-End-Performance-Checklist](https://github.com/huynhan147/FrontEnd-Performance-Checklist)
642 | - 🇯🇵 Japanese: [GameWith/Front-End-Performance-Checklist](https://github.com/GameWith/Front-End-Performance-Checklist)
643 | - 🇵🇱 Polish: [mbiesiad/Front-End-Performance-Checklist](https://github.com/mbiesiad/Front-End-Performance-Checklist)
644 | - 🇮🇷 Persian: [ms-fadaei/Front-End-Performance-Checklist](https://github.com/ms-fadaei/Front-End-Performance-Checklist)
645 | - 🇮🇹 Italian: [marbio/Front-End-Performance-Checklist](https://github.com/marbio/Front-End-Performance-Checklist)
646 | 
647 | ## Contributing
648 | 
649 | **Open an issue or a pull request to suggest changes or additions.**
650 | 
651 | ## Support
652 | 
653 | If you have any question or suggestion, don't hesitate to use Discord or Twitter:
654 | 
655 | - [Chat on Discord](https://ddias.link/discord)
656 | - [X (formerly Twitter)](https://ddias.link/x)
657 | 
658 | ## Contributors
659 | 
660 | This project exists thanks to all the people who contribute. [[Contribute]](https://github.com/thedaviddias/Front-End-Performance-Checklist/tree/main/CONTRIBUTING.md).
661 | <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist/graphs/contributors">
662 | <img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" alt="Contributors" />
663 | </a>
664 | 
665 | ## Backers
666 | 
667 | Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/front-end-checklist#backer)]
668 | 
669 | <a href="https://opencollective.com/front-end-checklist#backers" target="_blank"><img src="https://opencollective.com/front-end-checklist/backers.svg?width=890" alt="Backers"></a>
670 | 
671 | ## Sponsors
672 | 
673 | Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/front-end-checklist#sponsor)]
674 | 
675 | <a href="https://opencollective.com/front-end-checklist" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/1/avatar.svg" alt="Sponsors" /></a>
676 | 
677 | ## License
678 | 
679 | [MIT](https://github.com/thedaviddias/Front-End-Performance-Checklist/tree/main/LICENSE)
680 | 
681 | All icons are provided by [Icons8](https://icons8.com/)
682 | 
683 | **[⬆ back to top](#-table-of-contents)**
684 | 
685 | [html]: https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/refs/heads/main//images/html.png
686 | [css]: https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/refs/heads/main//images/css.png
687 | [fonts]: https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/refs/heads/main//images/fonts.png
688 | [images]: https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/refs/heads/main//images/images.png
689 | [javascript]: https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/refs/heads/main//images/javascript.png
690 | [server-side]: https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/refs/heads/main//images/server-side.png
691 | [low]: https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/refs/heads/main//images/priority/low.svg
692 | [medium]: https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/refs/heads/main//images/priority/medium.svg
693 | [high]: https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/refs/heads/main//images/priority/high.svg
694 | 


--------------------------------------------------------------------------------
/images/css.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/20ea2caa09420e240f5b00520c8112669ff774fb/images/css.png


--------------------------------------------------------------------------------
/images/fonts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/20ea2caa09420e240f5b00520c8112669ff774fb/images/fonts.png


--------------------------------------------------------------------------------
/images/html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/20ea2caa09420e240f5b00520c8112669ff774fb/images/html.png


--------------------------------------------------------------------------------
/images/images.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/20ea2caa09420e240f5b00520c8112669ff774fb/images/images.png


--------------------------------------------------------------------------------
/images/javascript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/20ea2caa09420e240f5b00520c8112669ff774fb/images/javascript.png


--------------------------------------------------------------------------------
/images/logo-front-end-performance-checklist.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/20ea2caa09420e240f5b00520c8112669ff774fb/images/logo-front-end-performance-checklist.jpg


--------------------------------------------------------------------------------
/images/priority/high.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.041 21.041" role="img" width="10" height="10">
2 |   <title>High priority</title>
3 |   <path fill="#d0021b" d="M20.51 0H.524a.469.469 0 00-.468.469v20.104c0 .255.211.468.468.468H20.51a.474.474 0 00.476-.468V.469A.472.472 0 0020.51 0z"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/images/priority/low.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" width="10" height="10">
2 |   <title>Low priority</title>
3 |   <path fill="#417505" d="M256 0C114.837 0 0 114.837 0 256s114.837 256 256 256 256-114.837 256-256S397.163 0 256 0z"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/images/priority/medium.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.02 60.02" role="img" width="10" height="10">
2 |   <title>Medium priority</title>
3 |   <path fill="#e08b00" d="M30.895.54c-.34-.678-1.449-.678-1.789 0l-29 58A1 1 0 001 59.988h58.02a1 1 0 00.795-1.608L30.895.54z"/>
4 | </svg>


--------------------------------------------------------------------------------
/images/server-side.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/20ea2caa09420e240f5b00520c8112669ff774fb/images/server-side.png


--------------------------------------------------------------------------------
/lychee.toml:
--------------------------------------------------------------------------------
 1 | #############################  Display  #############################
 2 | verbose = "info"
 3 | output = "./lychee-out.md"
 4 | 
 5 | #############################  Cache  ###############################
 6 | cache = true
 7 | max_cache_age = "2d"
 8 | 
 9 | #############################  Runtime  #############################
10 | max_concurrency = 14
11 | 
12 | #############################  Requests  ############################
13 | user_agent = "curl/7.83.1"
14 | timeout = 20
15 | accept = ["200", "429", "403"]
16 | scheme = ["https"]
17 | 
18 | #############################  Exclusions  ##########################
19 | base = "https://github.com/thedaviddias/Front-End-Performance-Checklist/"
20 | exclude = ["https://caniuse.com"]
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "front-end-performance-checklist",
 3 |   "version": "1.0.0",
 4 |   "description": "The only Front-End Performance Checklist that runs faster than the others.",
 5 |   "scripts": {
 6 |     "format:check": "prettier --check README.md",
 7 |     "format:fix": "prettier --write README.md && markdownlint README.md",
 8 |     "prepare": "husky || true"
 9 |   },
10 |   "keywords": [],
11 |   "author": "David Dias (https://thedaviddias.com/)",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "husky": "^9.1.6",
15 |     "markdownlint-cli": "^0.42.0",
16 |     "prettier": "^3.3.3"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
  1 | lockfileVersion: '9.0'
  2 | 
  3 | settings:
  4 |   autoInstallPeers: true
  5 |   excludeLinksFromLockfile: false
  6 | 
  7 | importers:
  8 | 
  9 |   .:
 10 |     devDependencies:
 11 |       husky:
 12 |         specifier: ^9.1.6
 13 |         version: 9.1.6
 14 |       markdownlint-cli:
 15 |         specifier: ^0.42.0
 16 |         version: 0.42.0
 17 |       prettier:
 18 |         specifier: ^3.3.3
 19 |         version: 3.3.3
 20 | 
 21 | packages:
 22 | 
 23 |   '@isaacs/cliui@8.0.2':
 24 |     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
 25 |     engines: {node: '>=12'}
 26 | 
 27 |   ansi-regex@5.0.1:
 28 |     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
 29 |     engines: {node: '>=8'}
 30 | 
 31 |   ansi-regex@6.1.0:
 32 |     resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
 33 |     engines: {node: '>=12'}
 34 | 
 35 |   ansi-styles@4.3.0:
 36 |     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
 37 |     engines: {node: '>=8'}
 38 | 
 39 |   ansi-styles@6.2.1:
 40 |     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
 41 |     engines: {node: '>=12'}
 42 | 
 43 |   argparse@2.0.1:
 44 |     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 45 | 
 46 |   balanced-match@1.0.2:
 47 |     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 48 | 
 49 |   brace-expansion@2.0.1:
 50 |     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 51 | 
 52 |   color-convert@2.0.1:
 53 |     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
 54 |     engines: {node: '>=7.0.0'}
 55 | 
 56 |   color-name@1.1.4:
 57 |     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 58 | 
 59 |   commander@12.1.0:
 60 |     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
 61 |     engines: {node: '>=18'}
 62 | 
 63 |   cross-spawn@7.0.3:
 64 |     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
 65 |     engines: {node: '>= 8'}
 66 | 
 67 |   deep-extend@0.6.0:
 68 |     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
 69 |     engines: {node: '>=4.0.0'}
 70 | 
 71 |   eastasianwidth@0.2.0:
 72 |     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 73 | 
 74 |   emoji-regex@8.0.0:
 75 |     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 76 | 
 77 |   emoji-regex@9.2.2:
 78 |     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 79 | 
 80 |   entities@4.5.0:
 81 |     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
 82 |     engines: {node: '>=0.12'}
 83 | 
 84 |   foreground-child@3.3.0:
 85 |     resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
 86 |     engines: {node: '>=14'}
 87 | 
 88 |   get-stdin@9.0.0:
 89 |     resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==}
 90 |     engines: {node: '>=12'}
 91 | 
 92 |   glob@11.0.0:
 93 |     resolution: {integrity: sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==}
 94 |     engines: {node: 20 || >=22}
 95 |     hasBin: true
 96 | 
 97 |   husky@9.1.6:
 98 |     resolution: {integrity: sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A==}
 99 |     engines: {node: '>=18'}
100 |     hasBin: true
101 | 
102 |   ignore@6.0.2:
103 |     resolution: {integrity: sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==}
104 |     engines: {node: '>= 4'}
105 | 
106 |   ini@4.1.3:
107 |     resolution: {integrity: sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==}
108 |     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
109 | 
110 |   is-fullwidth-code-point@3.0.0:
111 |     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
112 |     engines: {node: '>=8'}
113 | 
114 |   isexe@2.0.0:
115 |     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
116 | 
117 |   jackspeak@4.0.2:
118 |     resolution: {integrity: sha512-bZsjR/iRjl1Nk1UkjGpAzLNfQtzuijhn2g+pbZb98HQ1Gk8vM9hfbxeMBP+M2/UUdwj0RqGG3mlvk2MsAqwvEw==}
119 |     engines: {node: 20 || >=22}
120 | 
121 |   js-yaml@4.1.0:
122 |     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
123 |     hasBin: true
124 | 
125 |   jsonc-parser@3.3.1:
126 |     resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
127 | 
128 |   jsonpointer@5.0.1:
129 |     resolution: {integrity: sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==}
130 |     engines: {node: '>=0.10.0'}
131 | 
132 |   linkify-it@5.0.0:
133 |     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
134 | 
135 |   lru-cache@11.0.1:
136 |     resolution: {integrity: sha512-CgeuL5uom6j/ZVrg7G/+1IXqRY8JXX4Hghfy5YE0EhoYQWvndP1kufu58cmZLNIDKnRhZrXfdS9urVWx98AipQ==}
137 |     engines: {node: 20 || >=22}
138 | 
139 |   markdown-it@14.1.0:
140 |     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
141 |     hasBin: true
142 | 
143 |   markdownlint-cli@0.42.0:
144 |     resolution: {integrity: sha512-AjkzhhZa3TmEGi/CE2Wpmny69x1IrzqK2gPB0k8SmNMRgnSAJfyEO5FgZdWTHtJ6Nrdv5FWt5c4C5pkG6Dk30A==}
145 |     engines: {node: '>=18'}
146 |     hasBin: true
147 | 
148 |   markdownlint-micromark@0.1.10:
149 |     resolution: {integrity: sha512-no5ZfdqAdWGxftCLlySHSgddEjyW4kui4z7amQcGsSKfYC5v/ou+8mIQVyg9KQMeEZLNtz9OPDTj7nnTnoR4FQ==}
150 |     engines: {node: '>=18'}
151 | 
152 |   markdownlint@0.35.0:
153 |     resolution: {integrity: sha512-wgp8yesWjFBL7bycA3hxwHRdsZGJhjhyP1dSxKVKrza0EPFYtn+mHtkVy6dvP1kGSjovyG5B8yNP6Frj0UFUJg==}
154 |     engines: {node: '>=18'}
155 | 
156 |   mdurl@2.0.0:
157 |     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
158 | 
159 |   minimatch@10.0.1:
160 |     resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
161 |     engines: {node: 20 || >=22}
162 | 
163 |   minimist@1.2.8:
164 |     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
165 | 
166 |   minipass@7.1.2:
167 |     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
168 |     engines: {node: '>=16 || 14 >=14.17'}
169 | 
170 |   package-json-from-dist@1.0.1:
171 |     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
172 | 
173 |   path-key@3.1.1:
174 |     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
175 |     engines: {node: '>=8'}
176 | 
177 |   path-scurry@2.0.0:
178 |     resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
179 |     engines: {node: 20 || >=22}
180 | 
181 |   prettier@3.3.3:
182 |     resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
183 |     engines: {node: '>=14'}
184 |     hasBin: true
185 | 
186 |   punycode.js@2.3.1:
187 |     resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
188 |     engines: {node: '>=6'}
189 | 
190 |   run-con@1.3.2:
191 |     resolution: {integrity: sha512-CcfE+mYiTcKEzg0IqS08+efdnH0oJ3zV0wSUFBNrMHMuxCtXvBCLzCJHatwuXDcu/RlhjTziTo/a1ruQik6/Yg==}
192 |     hasBin: true
193 | 
194 |   shebang-command@2.0.0:
195 |     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
196 |     engines: {node: '>=8'}
197 | 
198 |   shebang-regex@3.0.0:
199 |     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
200 |     engines: {node: '>=8'}
201 | 
202 |   signal-exit@4.1.0:
203 |     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
204 |     engines: {node: '>=14'}
205 | 
206 |   smol-toml@1.3.0:
207 |     resolution: {integrity: sha512-tWpi2TsODPScmi48b/OQZGi2lgUmBCHy6SZrhi/FdnnHiU1GwebbCfuQuxsC3nHaLwtYeJGPrDZDIeodDOc4pA==}
208 |     engines: {node: '>= 18'}
209 | 
210 |   string-width@4.2.3:
211 |     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
212 |     engines: {node: '>=8'}
213 | 
214 |   string-width@5.1.2:
215 |     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
216 |     engines: {node: '>=12'}
217 | 
218 |   strip-ansi@6.0.1:
219 |     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
220 |     engines: {node: '>=8'}
221 | 
222 |   strip-ansi@7.1.0:
223 |     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
224 |     engines: {node: '>=12'}
225 | 
226 |   strip-json-comments@3.1.1:
227 |     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
228 |     engines: {node: '>=8'}
229 | 
230 |   uc.micro@2.1.0:
231 |     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
232 | 
233 |   which@2.0.2:
234 |     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
235 |     engines: {node: '>= 8'}
236 |     hasBin: true
237 | 
238 |   wrap-ansi@7.0.0:
239 |     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
240 |     engines: {node: '>=10'}
241 | 
242 |   wrap-ansi@8.1.0:
243 |     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
244 |     engines: {node: '>=12'}
245 | 
246 | snapshots:
247 | 
248 |   '@isaacs/cliui@8.0.2':
249 |     dependencies:
250 |       string-width: 5.1.2
251 |       string-width-cjs: string-width@4.2.3
252 |       strip-ansi: 7.1.0
253 |       strip-ansi-cjs: strip-ansi@6.0.1
254 |       wrap-ansi: 8.1.0
255 |       wrap-ansi-cjs: wrap-ansi@7.0.0
256 | 
257 |   ansi-regex@5.0.1: {}
258 | 
259 |   ansi-regex@6.1.0: {}
260 | 
261 |   ansi-styles@4.3.0:
262 |     dependencies:
263 |       color-convert: 2.0.1
264 | 
265 |   ansi-styles@6.2.1: {}
266 | 
267 |   argparse@2.0.1: {}
268 | 
269 |   balanced-match@1.0.2: {}
270 | 
271 |   brace-expansion@2.0.1:
272 |     dependencies:
273 |       balanced-match: 1.0.2
274 | 
275 |   color-convert@2.0.1:
276 |     dependencies:
277 |       color-name: 1.1.4
278 | 
279 |   color-name@1.1.4: {}
280 | 
281 |   commander@12.1.0: {}
282 | 
283 |   cross-spawn@7.0.3:
284 |     dependencies:
285 |       path-key: 3.1.1
286 |       shebang-command: 2.0.0
287 |       which: 2.0.2
288 | 
289 |   deep-extend@0.6.0: {}
290 | 
291 |   eastasianwidth@0.2.0: {}
292 | 
293 |   emoji-regex@8.0.0: {}
294 | 
295 |   emoji-regex@9.2.2: {}
296 | 
297 |   entities@4.5.0: {}
298 | 
299 |   foreground-child@3.3.0:
300 |     dependencies:
301 |       cross-spawn: 7.0.3
302 |       signal-exit: 4.1.0
303 | 
304 |   get-stdin@9.0.0: {}
305 | 
306 |   glob@11.0.0:
307 |     dependencies:
308 |       foreground-child: 3.3.0
309 |       jackspeak: 4.0.2
310 |       minimatch: 10.0.1
311 |       minipass: 7.1.2
312 |       package-json-from-dist: 1.0.1
313 |       path-scurry: 2.0.0
314 | 
315 |   husky@9.1.6: {}
316 | 
317 |   ignore@6.0.2: {}
318 | 
319 |   ini@4.1.3: {}
320 | 
321 |   is-fullwidth-code-point@3.0.0: {}
322 | 
323 |   isexe@2.0.0: {}
324 | 
325 |   jackspeak@4.0.2:
326 |     dependencies:
327 |       '@isaacs/cliui': 8.0.2
328 | 
329 |   js-yaml@4.1.0:
330 |     dependencies:
331 |       argparse: 2.0.1
332 | 
333 |   jsonc-parser@3.3.1: {}
334 | 
335 |   jsonpointer@5.0.1: {}
336 | 
337 |   linkify-it@5.0.0:
338 |     dependencies:
339 |       uc.micro: 2.1.0
340 | 
341 |   lru-cache@11.0.1: {}
342 | 
343 |   markdown-it@14.1.0:
344 |     dependencies:
345 |       argparse: 2.0.1
346 |       entities: 4.5.0
347 |       linkify-it: 5.0.0
348 |       mdurl: 2.0.0
349 |       punycode.js: 2.3.1
350 |       uc.micro: 2.1.0
351 | 
352 |   markdownlint-cli@0.42.0:
353 |     dependencies:
354 |       commander: 12.1.0
355 |       get-stdin: 9.0.0
356 |       glob: 11.0.0
357 |       ignore: 6.0.2
358 |       js-yaml: 4.1.0
359 |       jsonc-parser: 3.3.1
360 |       jsonpointer: 5.0.1
361 |       markdownlint: 0.35.0
362 |       minimatch: 10.0.1
363 |       run-con: 1.3.2
364 |       smol-toml: 1.3.0
365 | 
366 |   markdownlint-micromark@0.1.10: {}
367 | 
368 |   markdownlint@0.35.0:
369 |     dependencies:
370 |       markdown-it: 14.1.0
371 |       markdownlint-micromark: 0.1.10
372 | 
373 |   mdurl@2.0.0: {}
374 | 
375 |   minimatch@10.0.1:
376 |     dependencies:
377 |       brace-expansion: 2.0.1
378 | 
379 |   minimist@1.2.8: {}
380 | 
381 |   minipass@7.1.2: {}
382 | 
383 |   package-json-from-dist@1.0.1: {}
384 | 
385 |   path-key@3.1.1: {}
386 | 
387 |   path-scurry@2.0.0:
388 |     dependencies:
389 |       lru-cache: 11.0.1
390 |       minipass: 7.1.2
391 | 
392 |   prettier@3.3.3: {}
393 | 
394 |   punycode.js@2.3.1: {}
395 | 
396 |   run-con@1.3.2:
397 |     dependencies:
398 |       deep-extend: 0.6.0
399 |       ini: 4.1.3
400 |       minimist: 1.2.8
401 |       strip-json-comments: 3.1.1
402 | 
403 |   shebang-command@2.0.0:
404 |     dependencies:
405 |       shebang-regex: 3.0.0
406 | 
407 |   shebang-regex@3.0.0: {}
408 | 
409 |   signal-exit@4.1.0: {}
410 | 
411 |   smol-toml@1.3.0: {}
412 | 
413 |   string-width@4.2.3:
414 |     dependencies:
415 |       emoji-regex: 8.0.0
416 |       is-fullwidth-code-point: 3.0.0
417 |       strip-ansi: 6.0.1
418 | 
419 |   string-width@5.1.2:
420 |     dependencies:
421 |       eastasianwidth: 0.2.0
422 |       emoji-regex: 9.2.2
423 |       strip-ansi: 7.1.0
424 | 
425 |   strip-ansi@6.0.1:
426 |     dependencies:
427 |       ansi-regex: 5.0.1
428 | 
429 |   strip-ansi@7.1.0:
430 |     dependencies:
431 |       ansi-regex: 6.1.0
432 | 
433 |   strip-json-comments@3.1.1: {}
434 | 
435 |   uc.micro@2.1.0: {}
436 | 
437 |   which@2.0.2:
438 |     dependencies:
439 |       isexe: 2.0.0
440 | 
441 |   wrap-ansi@7.0.0:
442 |     dependencies:
443 |       ansi-styles: 4.3.0
444 |       string-width: 4.2.3
445 |       strip-ansi: 6.0.1
446 | 
447 |   wrap-ansi@8.1.0:
448 |     dependencies:
449 |       ansi-styles: 6.2.1
450 |       string-width: 5.1.2
451 |       strip-ansi: 7.1.0
452 | 


--------------------------------------------------------------------------------