Cet article vous présentera un sujet appelé Minify In et en cours vous donne également une démonstration pratique détaillée. Les pointeurs suivants seront traités dans cet article,
- Qu'est-ce que la minification?
- Pourquoi la minification est-elle nécessaire?
- Comment réduisez-vous le code CSS, JS, HTML?
- Quand devriez-vous faire ça?
- Avantages de la minification?
Comme son nom l'indique assez bien, la minification consiste à minimiser la taille d'un fichier. Dans une base de code, nous avons la liberté de réduire les fichiers HTML, CSS ou Javascript. Ici, nous allons discuter de la réduction d'un fichier CSS.
Lorsqu'un développeur code, il s'assure que le code est dans le meilleur format lisible pour simplifier tout processus de modifications ultérieures. Ainsi, les noms des variables sont dans un format facilement compréhensible et prennent beaucoup de caractères. Ensuite, ils ajoutent également une bonne quantité d'espacement vide pour le rendre suffisamment lisible.
Mais dans l'ensemble du processus, nous avons tendance à desserrer les chaînes que la taille de notre fichier augmente, ce qui augmente le temps de chargement du site Web. Surtout avec les sites Web qui ont un grand nombre de fonctionnalités et d'add-ons, une base de code plus longue ne fait qu'empirer le site Web.
Google a de toute façon un format restreint pour classer les sites Web sur sa page de recherche en fonction de l'expérience utilisateur optimale que les sites Web offrent. Plus votre site se charge, mieux votre site Web se classe sur la page de recherche.
Avec tant d'enjeux, vous ne voulez pas que vos utilisateurs souffrent du mauvais temps de chargement du site et passent au suivant. Par conséquent, la minification du code est extrêmement importante.
En fait, lors de la construction d'un site Web, nous savons ce qui se compose de la base de code maximale?
Tout est question de CSS, HTML et Javascript. La concurrence d'aujourd'hui pour rendre votre site Web visuellement attrayant insiste beaucoup sur le fichier CSS et sans nous en rendre compte, nous tirons parti de notre site Web avec un code lourd.
Entrées, minification ..
Passer à cet article sur Minify CSS
Quel est minification ?
La minification vous permet de réduire votre code à une taille de fichier minimale qui n’affecte pas le code tout en réduisant la taille du fichier. Au cours du processus, vous pouvez supprimer l’espacement et les caractères inutiles qui n’affectent nulle part l’originalité de votre site Web. Quelques éléments à éviter dans le code sont:
- Caractères d'espaces blancs
- Caractères de nouvelle ligne
- Délimiteurs de bloc
- commentaires
- Raccourcir les noms de variables
Ces facteurs ne sont pas impliqués dans le fonctionnement de votre site Web, mais simplement pour alourdir le fichier et augmenter le temps de chargement du site Web.
La lisibilité du code est entièrement exclusive de ce que la machine comprend. Le navigateur Web n’a pas besoin d’espacement supplémentaire entre les caractères pour comprendre et s’exécuter. Alors, essayez de les réduire et de réduire le code CSS et HTML.
Prenons un exemple:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Réduisez mon CSS
Presque une différence de 48% dans le fichier original et minifié. Réduit de 178 octets. Après la minification
#myContent {font-family: Arialfont-size: 90%}Bonjour le monde!
Passer à cet article sur Minify CSS
Pourquoi est-ce minification nécessaire?
Pour améliorer le temps de chargement du site Web. Personne n'aime attendre qu'un site Web se charge selon sa convenance. Avec autant d'options disponibles, les gens ont tendance à passer à une autre. Il est donc préférable de réduire la taille du fichier.
Passer à cet article sur Minify CSS
Comment tu minifier CSS, JS, code HTML?
Pour réduire au minimum, il existe un nombre incalculable d'outils disponibles en ligne qui peuvent vous aider à réduire la base de code. Vous pouvez également choisir de le faire manuellement, mais pour une base de code plus grande, il est conseillé d'utiliser l'un des outils suivants pour réduire votre fichier CSS:
CSSminifier.com: Un outil extrêmement simple à utiliser. Copiez simplement le code sur le côté gauche, générez le fichier minifié et téléchargez-le. Le fichier minifié aura une extension .min.
Votre fichier CSS minifié aura l'extension demo.min.css.
Smallseotools.com: copiez votre code ou téléchargez votre fichier de code. Il réduira votre code et vous permettra de le copier ou de le télécharger.
Autoptimize: Il s'agit d'un plugin que vous pouvez ajouter à vos outils WordPress. En tant que plugin, vous pouvez choisir de réduire votre code CSS sur place.
Il est plus facile pour un développeur de comprendre quand le fichier est minifié et quand il ne l'est pas. Un fichier minifié aura une extension .min.
Passer à cet article sur Minify CSS
Quand devriez-vous faire ça?
La minification doit être principalement effectuée lorsque vous avez écrit le code et que vous devez l'envoyer sur le serveur pour obtenir une réponse. Une fois les fichiers minifiés, les versions minifiées sont utilisées pour les distribuer aux utilisateurs.
Bénéfices de minification ?
Réduction de la taille du fichier: en supprimant l'espacement supplémentaire, en réduisant les noms de variables et en supprimant les commentaires, la taille du fichier est presque réduite de 30 à 60%. Chargement plus rapide: avec moins de données à envoyer sur le réseau, le site Web se charge plus rapidement qu'auparavant. Réduction du coût de la bande passante: lorsque les données inutiles sont supprimées, la bande passante nécessaire est bien moindre, tout comme le coût.
Choses dont il faut se rappeler:
Avant même de tenter une minification, assurez-vous que votre code ne dépasse pas les limites. Le flux ne doit pas être interrompu et la fonctionnalité doit rester sans visage. Vous devez vérifier que même après la minification, votre code fonctionne de la même manière.
En fait, comme meilleure pratique, vous pouvez toujours garder un modèle prêt. Apportez vos modifications dans le modèle intégré, ce qui vous fera gagner un temps précieux.
Est-ce similaire à la compression?
Eh bien, fortement NON. la minification est différente de la compression. La compression permet à un fichier minifié de réduire davantage mais n'affecte pas le style et la structure du code.
Le fichier est minifié, puis compressé sous forme de zip et envoyé sur le réseau lorsqu'un client demande à accéder au site Web. Le fichier est ensuite décompressé et utilisé.
Exemples:
Avant la minification:
Portefeuille
- Accueil
Après la minification:
Portefeuille
- Accueil
Le code est certainement plus difficile à lire et à comprendre pour un humain, mais il est tout aussi plausible pour une machine à rendre. Une machine ne se soucie pas vraiment de la beauté du code et de l'espacement, elle comprend l'essentiel et fonctionne en conséquence.
comment définir le chemin de classe en java à l'aide de l'invite de commande
Assez impressionné par la technique de minification?
Alors essayez par vous-même. Réduisez le fardeau de votre fichier et laissez votre site Web circuler librement pour tous les utilisateurs!
Cela nous amène à la fin de cet article sur Minify In CSS.
Si vous souhaitez en savoir plus sur le développement Web, consultez le par Edureka. La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3).
Si vous êtes toujours intéressé Si vous avez des questions, vous pouvez les poster dans la section commentaires de ce blog «Minify In CSS», et nous vous répondrons dans les plus brefs délais.