Giters

WilliamDASILVA / Front-End-Performance-Checklist

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

Home Page:https://frontendchecklist.io(bientôt)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


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

About

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

https://frontendchecklist.io(bientôt)

License:MIT License