├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md └── images ├── css.png ├── fonts.png ├── html.png ├── images.png ├── javascript.png ├── logo-front-end-performance-checklist.jpg └── server-side.png /.github/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 | 32 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WilliamDASILVA/Front-End-Performance-Checklist/ef1ac1db01954a3c6b5e7622cf4240f658bb71fa/.github/ISSUE_TEMPLATE.md -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | **Fixes**: # 2 | 3 | 🚨 Please review the [guidelines for contributing](CONTRIBUTING.md) and our [code of conduct](../CODE_OF_CONDUCT.md) to this repository. 🚨 4 | **Please complete these steps and check these boxes (by putting an x inside the brackets) before filing your PR:** 5 | 6 | - [ ] Check the commit's or even all commits' message styles matches our requested structure. 7 | - [ ] Check your code additions will fail neither code linting checks nor unit test. 8 | 9 | #### Short description of what this resolves: 10 | 11 | 12 | #### Proposed changes: 13 | 14 | - 15 | - 16 | - 17 | 18 | 👍 Thank you! 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | .DS_Store 64 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 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 |

2 |
3 | Front-End Performance Checklist 4 |
5 |
6 |   Front-End Performance Checklist 7 |  
8 |

9 | 10 |

🎮 La seule checklist de performance Front-end qui tourne plus rapidement que les autres.

11 |

Une simple règle: "Design et code avec la performance en tête"

12 | 13 |

14 |   15 |     PRs Welcome 16 |   17 |   18 |     Gitter 19 |   20 |     21 |     Licence MIT 22 |   23 |

24 | 25 |

26 |   Comment l'utiliser • Contribuer • Product Hunt 27 |

28 |

29 | Autres checklists: 30 |
31 | 🗂 Front-End Checklist • 💎 Front-End Design Checklist 32 |

33 | 34 | ## Sommaire 35 | 36 | 1. **[HTML](#html)** 37 | 2. **[CSS](#css)** 38 | 3. **[Polices de caractère](#fonts)** 39 | 4. **[Images](#images)** 40 | 5. **[JavaScript](#javascript)** 41 | 6. **[Server](#server) (en cours)** 42 | 7. **[Frameworks JS](#js-frameworks) (en cours)** 43 | 44 | ## Introduction 45 | 46 | La performance est un grand sujet, mais pas toujours un sujet "back-end" ou "admin": c'est également une responsabilité front-end. La Front-End Performance Checklist est une liste non exhaustive d'élément qui doit être vérifiée, ou au moins pris en compte, en tant que développeur front-end et appliqué à vos projets (personnels ou professionnels). 47 | 48 | ### Comment l'utiliser? 49 | 50 | Pour chaque règle, vous aurez un paragraphe expliquant *pourquoi* cette règle est importante et *comment* vous pouvez la corriger. Pour plus d'informations, vous trouverez des liens qui pointent vers des 🛠 outils, 📖 articles ou 📹 videos qui peuvent compléter cette checklist. 51 | 52 | Tous les items dans la **Front-End Performance Checklist** sont essentiels pour atteindre le plus haut score de performance mais vous trouvez un indicateur pour vous aider à éventuellement prioriser quelques règles plutôt que d'autres. Il y a 3 niveaux de priorités / impact: 53 | 54 | * ![Low][low] signifie que l'item a une priorité ou impact **faible** sur votre projet. 55 | * ![Medium][medium] signifie que l'item a une priorité ou impact **moyen** sur votre projet. Vous ne devriez pas ignorer cet item. 56 | * ![High][high] signifie que l'item a un **très grand** impact sur votre projet. Vous ne pouvez pas passer à côté de cette règle et devriez apporter les corrections au plus vite. 57 | 58 | ### Outils de performance 59 | 60 | Liste d'outils que vous pouvez utiliser pour tester et surveiller votre site ou application: 61 | 62 | * 🛠 [WebPagetest - Website Performance and Optimization Test](https://www.webpagetest.org/) 63 | * 🛠 ☆ [Dareboost: Website Speed Test and Website Analysis](https://www.dareboost.com/) (utilisez le coupon WPCDD20 pour -20%) 64 | * 🛠 [GTmetrix | Website Speed and Performance Optimization](https://gtmetrix.com/) 65 | * 🛠 [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) 66 | * 🛠 [Pingdom Website Speed Test](https://tools.pingdom.com) 67 | * 📖 [Pagespeed - The tool and optimization guide](https://varvy.com/pagespeed/) 68 | * 📖 [Make the Web Faster | Google Developers](https://developers.google.com/speed/) 69 | * 🛠 [Sitespeed.io - Welcome to the wonderful world of Web Performance](https://www.sitespeed.io/) 70 | * 🛠 [Calibre](https://calibreapp.com/) 71 | * 🛠 [Website and Server Uptime Monitoring - Pingdom](https://www.pingdom.com/product/uptime-monitoring/) ([Free Signup Link](https://www.pingdom.com/free)) 72 | * 🛠 [Uptime Robot](https://uptimerobot.com) 73 | 74 | ### Références 75 | 76 | * 📖 [The Cost Of JavaScript - YouTube](https://www.youtube.com/watch?v=_bzqF05xsC4) 77 | * 📖 [Get Started With Analyzing Runtime Performance  |  Google Developers](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/) 78 | * 📖 [State of the Web | 2018_01_01](https://httparchive.org/reports/state-of-the-web?start=2018_01_01) 79 | * 📖 [Page Weight Doesn't Matter](https://www.speedshop.co/2015/11/05/page-weight-doesnt-matter.html) 80 | --- 81 | 82 | ## HTML 83 | 84 | ![html] 85 | 86 | - [ ] **Minifier HTML:** ![medium] Le code HTML est minifié, les commentaires, espaces blancs et les nouvelles lignes sont enlevées sur les fichiers de production. 87 | 88 | *Pourquoi:* 89 | > Enlever tous les espaces, commentaires et sauts de lignes non nécessaires vont réduire la taille de votre HTML et diminuer le temps de chargement de votre page, et bien évidemment réduire le temps de download à vos utilisateurs. 90 | 91 | *Comment:* 92 | > ⁃ La plupart des frameworks ont des plugins qui facilitent la minification des pages. Vous pouvez utiliser quelques modules NPM qui feront le travail automatiquement. 93 | 94 | * 🛠 [HTML minifier | Minify Code](http://minifycode.com/html-minifier/) 95 | * 📖 [Experimenting with HTML minifier — Perfection Kills](http://perfectionkills.com/experimenting-with-html-minifier/#use_short_doctype) 96 | 97 | - [ ] **Enlever les commentaires inutiles:** ![low] Assurez-vous que les commentaires soient enlevés de vos pages. 98 | 99 | *Pourquoi:* 100 | > Les commentaires ne sont pas très utiles aux utilisateurs, alors ils devraient être enlevés des fichiers de production. Le seul cas où vous voudriez garder les commentaires serait de garder l'origine d'une librairie. 101 | 102 | *Comment:* 103 | > ⁃ La plupart du temps, les commentaires peuvent être retirés en utilisant un plugin pour minifier le code HTML. 104 | 105 | * 🛠 [remove-html-comments - npm](https://www.npmjs.com/package/remove-html-comments) 106 | 107 | - [ ] **Enlever les attributs inutiles:** ![low] Les attributs type comme `type="text/javascript"` ou `type="text/css"` ne sont plus nécessaires et devraient être enlevés. 108 | 109 | ```html 110 | 111 | 114 | 115 | 116 | 119 | ``` 120 | 121 | *Pourquoi:* 122 | > L'attribut type n'est plus nécessaire car l'HTML5 considère text/css et text/javascript par défaut. Le code non utilisé devrait être enlevé comme ils ajoutent du poids inutilement à vos pages. 123 | 124 | *Comment:* 125 | > ⁃ Assurez-vous que tous vos `` et ` 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | ``` 142 | 143 | *Pourquoi:* 144 | > Avoir les tags CSS qui se chargent avant le JavaScript permet d'avoir un téléchargement en parallèle qui augmente le temps de rendu. 145 | 146 | *Comment:* 147 | > ⁃ Assurez-vous que `` et `` dans une seule ligne (minifié si possible). 234 | 235 | *Pourquoi:* 236 | > L'ajout d'un CSS critique en une ligne aide à augmenter la vitesse de rendu de vos pages en réduisant le nombre de requêtes serveur. 237 | 238 | *Comment:* 239 | > ⁃ Générez le CSS critique avec des outils en ligne ou des plugins comme celui qu'Addy Osmani à développé 240 | 241 | * 📖 [Understanding Critical CSS](https://www.smashingmagazine.com/2015/08/understanding-critical-css/) 242 | * 🛠 [Critical by Addy Osmani on GitHub](https://github.com/addyosmani/critical) automates this. 243 | * 📖 [Inlining critical CSS for better web performance | Go Make Things](https://gomakethings.com/inlining-critical-css-for-better-web-performance/) 244 | * 🛠 [Critical Path CSS Generator - Prioritize above the fold content :: SiteLocity](https://www.sitelocity.com/critical-path-css-generator) 245 | 246 | - [ ] **CSS intégré ou inline:** ![high] Evitez d'utiliser du CSS integré ou inline dans votre `` *(Non valide pour HTTP/2)* 247 | 248 | *Pourquoi:* 249 | > L'une des premières raisons c'est qu'il s'agit d'une bonne pratique de **séparer le contenu du design**. Ça aide également à avoir une meilleure maintenabilité du code et garde votre site accessible. Mais question performance, cela décroît la taille de votre fichier HTML et réduit le temps de chargement. 250 | 251 | *Comment:* 252 | > ⁃ Utilisez toujours un fichier de style externe ou intégrez le CSS dans le `` (et suivez les autres règles de performance) 253 | 254 | * 📖 [Observe CSS Best Practices: Avoid CSS Inline Styles](https://www.lifewire.com/avoid-inline-styles-for-css-3466846) 255 | 256 | - [ ] **Analysez la compléxité de votre style:** ![high] Analyser votre style peut vous aider à détecter des problèmes, redondances et des doublons dans vos sélecteurs CSS. 257 | 258 | *Pourquoi:* 259 | > Quelquesfois vous avez des redondances ou des erreurs de validation dans votre CSS, analysez vos fichiers CSS et enlevez ces complexifications peuvent vous aider à accélérer vos fichiers CSS (car votre navigateur va les lire plus rapidement) 260 | 261 | *Comment:* 262 | > ⁃ Votre CSS doit être organisé, utiliser un préprocesseur CSS peut vous aider avec ça. Quelques outils en ligne listés en dessous peuvent également vous aider à analyser votre code. 263 | 264 | * 🛠 [TestMyCSS | Optimize and Check CSS Performance](http://www.testmycss.com/) 265 | * 📖 [CSS Stats](https://cssstats.com/) 266 | * 🛠 [macbre/analyze-css: CSS selectors complexity and performance analyzer](https://github.com/macbre/analyze-css) 267 | 268 | **[⬆ Retour au sommaire](#table-of-contents)** 269 | 270 | ## Polices de caractère 271 | 272 | ![fonts] 273 | 274 | * 📖 [A Book Apart, Webfont Handbook](https://abookapart.com/products/webfont-handbook) 275 | 276 | - [ ] **Webfont formats:** ![medium] Vous utilisez WOFF2 dans votre projet ou application. 277 | 278 | *Pourquoi:* 279 | > Selon Google, le format de compression WOFF 2.0 Web Font offre un gain moyen de 30% comparé à WOFF 1.0. C'est alors bien d'utiliser WOFF 2.0, WOFF 1.0 en fallback puis TTF. 280 | 281 | *Comment:* 282 | > ⁃ Vérifiez avant d'acheter une nouvelle police de caracètre que le fournisseur vous donne le format WOFF2. Si vous utilisez une police de caractère gratuite, vous pouvez toujours utiliser Font Squirrel pour générer les autres formats. 283 | 284 | * 📖 [WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2](https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a) 285 | * 🛠 [Create Your Own @font-face Kits » Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator) 286 | * 🛠 [IcoMoon App - Icon Font, SVG, PDF & PNG Generator](https://icomoon.io/app/) 287 | * 📖 [Using @font-face | CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/?ref=frontendchecklist) 288 | * 📖 [Can I use... WOFF2](https://caniuse.com/#feat=woff2) 289 | 290 | - [ ] **Utilisez `preconnect` pour charger vos polices de caractère plus rapidement:** ![medium] 291 | 292 | ```html 293 | 294 | ``` 295 | 296 | *Pourquoi:* 297 | > Quand vous arrivez sur un site web, votre appareil a besoin de savoir où votre site se trouve et dans quel serveur il a besoin de se connecter. Votre navigateur contacte alors un serveur DNS et attends pour son retour avant de charger les ressources (fonts, fichiers CSS...). 298 | 299 | *Comment:* 300 | > ⁃ Avant de pré-charger vos webfonts, utilisez webpagetest pour évalier votre site internet. 301 | ⁃ Recherchez les recherches DNS couleur sarcelle et notez l'hôte qui est demandé. 302 | ⁃ Prefetch vos webfonts dans votre `` et ajoutez éventuellement ces noms d'hôtes que vous devriez préférez aussi. 303 | 304 | * 📖 [Faster Google Fonts with Preconnect - CDN Planet](https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/) 305 | * 📖 [Make Your Site Faster with Preconnect Hints | Viget](https://www.viget.com/articles/make-your-site-faster-with-preconnect-hints/) 306 | * 📖 [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/) 307 | * 📖 [A Comprehensive Guide to Font Loading Strategies—zachleat.com](https://www.zachleat.com/web/comprehensive-webfonts/#font-face) 308 | 309 | - [ ] **Webfont size:** ![medium] Les tailles Webfont ne dépassent pas 300kb (toutes les variantes incluses) 310 | 311 | * 📖 [Font Bytes - Page Weight](https://httparchive.org/reports/page-weight#bytesFont) 312 | 313 | - [ ] **Empêche le Flash de Texte Invisible:** ![medium] Évitez le texte transparent jusqu'à ce que Webfont soit chargé 314 | 315 | * 📖 [`font-display` for the Masses](https://css-tricks.com/font-display-masses/) 316 | * 📖 [CSS font-display: The Future of Font Rendering on the Web](https://www.sitepoint.com/css-font-display-future-font-rendering-web/) 317 | 318 | **[⬆ Retour au sommaire](#table-of-contents)** 319 | 320 | ## Images 321 | 322 | ![images] 323 | 324 | * 📖 [Image Bytes in 2018](https://httparchive.org/reports/page-weight#bytesImg) 325 | 326 | * [ ] **Optimisation des images:** ![high] Vos images sont optimisées, compressées sans impact direct pour l'utilisateur final. 327 | 328 | *Pourquoi:* 329 | > Les images optimisées se chargent plus rapidement dans votre navigateur et consomment moins de données. 330 | 331 | *Comment:* 332 | > ⁃ Essayez d'utiliser les effets CSS3 quand c'est possible (au lieu d'une petite image) 333 | ⁃ Lorsque cela est possible, utilisez des polices au lieu du texte codé dans vos images 334 | ⁃ Utilisez SVG 335 | ⁃Utilisez un outil et spécifiez une compression de niveau inférieure à 85. 336 | 337 | * 📖 [Image Optimization | Web Fundamentals | Google Developers](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization) 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 | 343 | 344 | * [ ] **Format d'images:** ![high] Choisissez votre format d'image de manière appropriée. 345 | 346 | *Pourquoi:* 347 | > Pour vous assurer que vos images ne ralentissent pas votre site Web, choisissez le format qui s'adapte au besoin que vous en faîtes 348 | 349 | *Comment:* 350 | > ⁃ Utilisez [Lighthouse](https://developers.google.com/web/tools/lighthouse/) pour identifier quelles images peuvent éventuellement utiliser **les formats next-gen** (comme JPEG 2000m JPEG XR ou WebP) 351 | ⁃ Comparez les différents formats, parfois l'utilisation de PNG8 est mieux que PNG16, parfois ce n'est pas le cas. 352 | 353 | * 📖 [Serve Images in Next-Gen Formats  |  Tools for Web Developers  |  Google Developers](https://developers.google.com/web/tools/lighthouse/audits/webp) 354 | * 📖 [What Is the Right Image Format for Your Website? — SitePoint](https://www.sitepoint.com/what-is-the-right-image-format-for-your-website/) 355 | * 📖 [PNG8 - The Clear Winner — SitePoint](https://www.sitepoint.com/png8-the-clear-winner/) 356 | * 📖 [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/) 357 | 358 | - [ ] **UtiliseZ l'image vectorielle vs bitmap:** ![medium] Préférez utiliser une image vectorielle plutôt que des images bitmap (si possible). 359 | 360 | *Pourquoi:* 361 | > Les images vectorielles (SVG) ont tendance à être plus petites que les images et les SVG sont sensibles et s'adaptent parfaitement. Ces images peuvent être animées et modifiées par CSS. 362 | 363 | * [ ] **Dimensions des images:** ![medium] Définissez les attributs `width` et` height` sur l'élément `` si la taille finale de l'image rendue est connue. 364 | 365 | *Pourquoi:* 366 | > Si la hauteur et la largeur sont définies, l'espace requis pour l'image est réservé lorsque la page est chargée. Toutefois, sans ces attributs, le navigateur ne connaît pas la taille de l'image et ne peut pas lui réserver l'espace approprié. L'effet sera que la mise en page changera pendant le chargement (pendant le chargement des images). 367 | 368 | * [ ] **Évitez d'utiliser des images Base64:** ![medium] Vous pourriez éventuellement convertir des images minuscules en base64 mais ce n'est pas la meilleure pratique. 369 | 370 | * 📖 [Base64 Encoding & Performance, Part 1 and 2 by Harry Roberts](https://csswizardry.com/2017/02/base64-encoding-and-performance/) 371 | * 📖 [A closer look at Base64 image performance – The Page Not Found Blog](http://www.andygup.net/a-closer-look-at-base64-image-performance/) 372 | * 📖 [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/) 373 | * 📖 [Base64 encoding images for faster pages | Performance and seo factors](https://varvy.com/pagespeed/base64-images.html) 374 | 375 | * [ ] **Lazy loading:** ![medium] Images sont lazyloaded (Un noscript fallback est toujours fourni). 376 | 377 | *Pourquoi:* 378 | > Cela améliorera le temps de réponse de la page en cours et évitera de charger des images inutiles dont l'utilisateur n'a pas besoin. 379 | 380 | *Comment:* 381 | > ⁃ Utilisez [Lighthouse](https://developers.google.com/web/tools/lighthouse/) pour identifier le nombre d'images **hors écran**. 382 | ⁃ Utilisez un plugin JavaScript comme pour lazyload vos images. 383 | 384 | * 🛠 [verlok/lazyload: Github](https://github.com/verlok/lazyload) 385 | * 🛠 [aFarkas/lazysizes: Github](https://github.com/aFarkas/lazysizes/) 386 | * 📖 [Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/) 387 | * 📖 [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/) 388 | 389 | * [ ] **Responsive images:** ![medium] Assurez-vous de diffuser des images proches de votre taille d'affichage. 390 | 391 | *Pourquoi:* 392 | > Les petits appareils n'ont pas besoin d'images plus grandes que leur fenêtre d'affichage. Il est recommandé d'avoir plusieurs versions d'une image sur différentes tailles. 393 | 394 | *Comment:* 395 | > ⁃ Créez différentes tailles d'image pour les appareils que vous souhaitez cibler. 396 | ⁃ Utilisez `srcset` et` picture` pour fournir plusieurs variantes de chaque image. 397 | 398 | * 📖 [Responsive images - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 399 | 400 | **[⬆ Retour au sommaire](#table-of-contents)** 401 | 402 | ## JavaScript 403 | 404 | ![javascript] 405 | 406 | - [ ] **JS Minification:** ![high] Tous les fichiers JavaScript sont minifiés, les commentaires, les espaces blancs et les nouvelles lignes sont supprimés des fichiers de production *(toujours valide si vous utilisez HTTP / 2)*. 407 | 408 | *Pourquoi:* 409 | > La suppression de tous les espaces, commentaires et ruptures inutiles réduira la taille de vos fichiers JavaScript et accélérera le chargement des pages de votre site et, de toute évidence, allégera le téléchargement pour votre utilisateur. 410 | 411 | *Comment:* 412 | > ⁃ Utilisez les outils suggérés ci-dessous pour réduire automatiquement vos fichiers avant ou pendant votre build ou votre déploiement. 413 | 414 | * 📖 [uglify-js - npm](https://www.npmjs.com/package/uglify-js) 415 | * 📖 [Short read: How is HTTP/2 different? Should we still minify and concatenate?](https://scaleyourcode.com/blog/article/28) 416 | 417 | * [ ] **Pas de JavaScript à l'intérieur:** ![medium] * (Valable uniquement pour le site Web) * Évitez d'avoir plusieurs codes JavaScript intégrés au milieu de votre corps. Regroupe votre code JavaScript dans des fichiers externes ou éventuellement dans le `` ou à la fin de votre page (avant ``). 418 | 419 | *Pourquoi:* 420 | > Placer du code incorporé JavaScript directement dans votre `` peut ralentir votre page car elle se charge pendant la construction du DOM. La meilleure option est d'utiliser des fichiers externes avec `async` ou` defer` pour éviter de bloquer le DOM. Une autre option consiste à placer des scripts dans votre ``. La plupart du temps, le code d'analyse ou le petit script qui doit être chargé avant que le DOM arrive au traitement principal. 421 | 422 | *Comment:* 423 | > ⁃ Assurez-vous que tous vos fichiers sont chargés en utilisant `async` ou` defer` et décidez sagement du code que vous devrez injecter dans votre ``. 424 | 425 | * 📖 [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/) 426 | 427 | * [ ] **JavaScript non bloquant:** ![high] Les fichiers JavaScript sont chargés de manière asynchrone en utilisant `async` ou différés en utilisant l'attribut` defer`. 428 | 429 | ```html 430 | 431 |