README.md

July 28, 2018 · View on GitHub


Front-End Performance Checklist

  Front-End Performance Checklist  

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

Une simple rĂšgle: "Design et code avec la performance en tĂȘte"

      PRs Welcome         Gitter           Licence MIT  

  Comment l'utiliser ‱ Contribuer ‱ Product Hunt

Autres checklists:
🗂 Front-End Checklist ‱ 💎 Front-End Design Checklist

Sommaire

  1. HTML
  2. CSS
  3. Polices de caractĂšre
  4. Images
  5. JavaScript
  6. Server (en cours)
  7. Frameworks JS (en cours)

Introduction

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

Comment l'utiliser?

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.

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:

  • Low signifie que l'item a une prioritĂ© ou impact faible sur votre projet.
  • Medium signifie que l'item a une prioritĂ© ou impact moyen sur votre projet. Vous ne devriez pas ignorer cet item.
  • 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.

Outils de performance

Liste d'outils que vous pouvez utiliser pour tester et surveiller votre site ou application:

Références

HTML

html

  • Minifier HTML: medium Le code HTML est minifiĂ©, les commentaires, espaces blancs et les nouvelles lignes sont enlevĂ©es sur les fichiers de production.

    Pourquoi:

    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.

    Comment:

    ⁃ La plupart des frameworks ont des plugins qui facilitent la minification des pages. Vous pouvez utiliser quelques modules NPM qui feront le travail automatiquement.

  • Enlever les commentaires inutiles: low Assurez-vous que les commentaires soient enlevĂ©s de vos pages.

    Pourquoi:

    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.

    Comment:

    ⁃ La plupart du temps, les commentaires peuvent ĂȘtre retirĂ©s en utilisant un plugin pour minifier le code HTML.

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

    <!-- Avant HTML5 -->
<script type="text/javascript">
    // Javascript code
</script>

<!-- Aujourd'hui -->
<script>
    // Javascript code
</script>

    Pourquoi:

    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.

    Comment:

    ⁃ Assurez-vous que tous vos <link> et <script> tags n'aient pas d'attribut type.

  • Placez les tags CSS toujours avant les tags JavaScript: high Assurez-vous que votre CSS est toujours chargĂ© avant le code JavaScript.

    <!-- Non recommandé -->
<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>

<!-- Recommandé -->
<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>

    Pourquoi:

    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.

    Comment:

    ⁃ Assurez-vous que <link> et <style> dans votre balise <head> est toujours avant <script>.

  • Minimisez le nombre d'iframes: high Utilisez des iframes uniquement si vous n'avez pas d'autres moyens techniques. Essayez d'Ă©viter le plus possible les iframes.

⬆ Retour au sommaire

CSS

css

  • Minification: high Tous les fichiers CSS doivent ĂȘtre minifiĂ©s, commentaires, espaces blancs et les nouvelles lignes sont supprimĂ©es des fichiers de production.

    Pourquoi:

    Quand les fichiers CSS sont minifiés, le contenu est chargé plus rapidement et moins de donnés est envoyé au client. C'est important de toujours minifier les fichiers CSS en production. C'est bénéfique pour l'utilisateur tout comme n'importe quel business qui veut un faible usage en bande passante et un usage de ressources moins important.

    Comment:

    ⁃ Utilisez des outils pour minifier vos fichiers automatiquement avant et pendant le processus de build & de déploiement.

  • ConcatĂ©nation: medium Les fichiers CSS sont concatĂ©nĂ©s en un seul fichier. (Pas toujours valide pour HTTP/2)

    
<!-- Non recommandé -->
<script src="foo.js"></script>
<script src="ajax.js"></script>

<!-- Recommandé -->
<script src="combined.js"></script>

    Pourquoi:

    Si vous utilisez toujours HTTP/1, vous devriez quand mĂȘme contactĂ©ner vos fichiers, c'est moins le cas si vous utilisez HTTP/2 (des tests doivent ĂȘtre faits).

    Comment:

    ⁃ Utilisez un outil en ligne ou un plugin avant ou pendant le processus de build ou déploiement pour concaténer vos fichiers. ⁃ Assurez-vous bien évidemment que la concaténation ne casse rien dans votre projet.

  • Non-bloquant: high Les fichiers CSS doivent ĂȘtre non bloquant pour ne pas empĂȘcher le DOM de mettre trop de temps Ă  se charger.

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    Pourquoi:

    Les fichiers CSS peuvent bloquer le chargement de la page et délayer le rendu de celle-ci. L'utilisation de preload peut charger les fichiers CSS avant que le navigateur ne commence à afficher le contenu de votre page.

    Comment:

    ⁃ Vous devez ajouter un attribut rel avec la valeur preload et ajouter as="style" sur l'element <link>.

  • Taille des classes CSS: low La longueur des classes peut avoir (un tout petit) impact sur votre HTML et vos fichiers CSS.

    Pourquoi:

    MĂȘme si les impacts sur les performances sont discutables, prendre une dĂ©cision sur une nomenclature sur votre projet peut avoir un impact sur la maintenabilitĂ© de vos fichiers de style. Si vous utilisez BEM, dans certains cas, vous pouvez vous retrouver avec des classes qui ont plus de caractĂšres qu'elles ont en besoin. C'est toujours important de bien choisir les noms et les namespaces.

    Comment:

    ⁃ En imposant une limite dans le nombre de caractÚres serait intéressant pour certaines personnes, mais en s'assurant de diviser votre site en composants peut aider à réduire le nombre de classes (et de déclarations), ainsi que la longueur des classes.

  • CSS non utilisĂ©: medium Enlever tous les sĂ©lecteurs CSS non utilisĂ©s.

    Pourquoi:

    Enlever tous les sélecteurs CSS non utilisés peut réduire la taille de vos fichiers et réduire le temps de chargement de vos assets.

    Comment:

    ⁃ ⚠ Toujours vĂ©rifier si votre framework CSS que vous utilisez n'a pas dĂ©jĂ  une classe qui fait la mĂȘme chose.

  • CSS intĂ©grĂ© ou inline: high Evitez d'utiliser du CSS integrĂ© ou inline dans votre <body> (Non valide pour HTTP/2)

    Pourquoi:

    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.

    Comment:

    ⁃ Utilisez toujours un fichier de style externe ou intégrez le CSS dans le <head> (et suivez les autres rÚgles de performance)

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

    Pourquoi:

    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)

    Comment:

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

⬆ Retour au sommaire

Polices de caractĂšre

fonts

  • EmpĂȘche le Flash de Texte Invisible: medium Évitez le texte transparent jusqu'Ă  ce que Webfont soit chargĂ©

⬆ Retour au sommaire

Images

images

  • UtiliseZ l'image vectorielle vs bitmap: medium PrĂ©fĂ©rez utiliser une image vectorielle plutĂŽt que des images bitmap (si possible).

    Pourquoi:

    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.

⬆ Retour au sommaire

JavaScript

javascript

  • 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).

    Pourquoi:

    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.

    Comment:

    ⁃ Utilisez les outils suggérés ci-dessous pour réduire automatiquement vos fichiers avant ou pendant votre build ou votre déploiement.

  • 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 <head> ou Ă  la fin de votre page (avant </ body>).

    Pourquoi:

    Placer du code incorporĂ© JavaScript directement dans votre <body> 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 <head>. La plupart du temps, le code d'analyse ou le petit script qui doit ĂȘtre chargĂ© avant que le DOM arrive au traitement principal.

    Comment:

    ⁃ 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 <head>.

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

    <!-- Defer Attribute -->
<script defer src="foo.js">

<!-- Async Attribute -->
<script async src="foo.js">

    Pourquoi:

    JavaScript bloque l'analyse normale du document HTML, donc quand l'analyseur atteint une balise <script> (en particulier dans le <head>), il arrĂȘte de l'extraire et de l'exĂ©cuter. Ajouter async ou defer est fortement recommandĂ© si vos scripts sont placĂ©s en haut de votre page mais moins prĂ©cieux si vous ĂȘtes juste avant votre balise </ body>. Mais il est recommandĂ© de toujours utiliser ces attributs pour Ă©viter tout problĂšme de performance.

    Comment:

    ⁃ Ajoutez async (si le script ne repose pas sur d'autres scripts) ou defer (si le script s'appuie sur un script asynchrone ou sur lequel il s'appuie) comme attribut de votre balise de script. ⁃ Si vous avez de petits scripts, utilisez peut-ĂȘtre un script en ligne placĂ© au-dessus des scripts asynchrones.

  • BibliothĂšques JS optimisĂ©es et mises Ă  jour: medium Toutes les bibliothĂšques JavaScript utilisĂ©es dans votre projet sont nĂ©cessaires (prĂ©fĂ©rez le Javascript de Vanilla pour des fonctionnalitĂ©s simples), mises Ă  jour Ă  leur derniĂšre version et ne surchargez pas votre JavaScript avec des mĂ©thodes inutiles.

    Pourquoi:

    La plupart du temps, les nouvelles versions viennent avec l'optimisation et la correction de sécurité. Vous devriez utiliser le code le plus optimisé pour accélérer votre projet et vous assurer que vous ne ralentirez pas votre site ou votre application sans plugin obsolÚte.

    Comment:

    ⁃ Si votre projet utilise des paquets NPM, npm-check est une bibliothÚque assez intéressante pour mettre à jour vos bibliothÚques.

⬆ Retour au sommaire

Serveur

server-side

  • Minimiez le nombre de requĂȘte HTTP: high Assurez-vous toujours que chaque requĂȘte vers un fichier est essentiel pour votre site ou application.

  • Utilisez un CDN pour dĂ©livrer vos assets: medium Utilisez un CDN pour dĂ©livrer plus rapidement votre contenu Ă  travers le monde.

  • Servez des fichiers en utilisant le mĂȘme protocol: high Evitez d'utiliser des fichiers provenant de sources utilisant HTTP alors que votre site tourne en HTTPS.

  • Servez des fichiers existants: high Evitez de servir des fichiers qui n'existent pas (404).

  • Ajouter les headers HTTP de cache correctement: high Configurez les headers HTTP pour Ă©viter des aller-retours inutiles entre le serveur et le navigateur.

  • Compression GZIP compression est activĂ©: high

⬆ Retour au sommaire

Performances et Frameworks JS

Vue

React

Traductions

La Front-End Performance Checklist se veut Ă©galement d'ĂȘtre dĂ©clinĂ© dans d'autres langues! N'hĂ©sitez pas Ă  envoyer votre contribution!

Contribuer

Ouvrir une issue ou une pull request pour suggérer des changements ou ajouts.

Aide

Si vosu avez une question ou une suggestion, n'hésitez pas à utiliser Gitter, Twitter ou Facebook:

Auteur

Fait avec ❀ par David Dias chez @influitive 🇹🇩

Traduit par William DA SILVA đŸ‡«đŸ‡·

Contributeurs

Ce projet existe grùce à toute les personnes qui ont contribués. [Contribute].

License

MIT

Toute les icĂŽnes sont fournies par Icons8

⬆ Retour au sommaire