skip to Main Content

Comment compresser vos fichiers CSS, HTML et Javascript

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 554.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Lorsque vous réduisez les fichiers CSS, HTML et Javascript de votre site Web, vous pouvez gagner un temps précieux sur la vitesse de chargement des pages de votre site. Maintenant, nous ne parlons pas de réduire votre vitesse de chargement des pages de moitié ou quoi que ce soit, mais quand il s’agit de la vitesse de votre site Web, n’importe quel petit geste compte. La vitesse de chargement de votre site est non seulement importante pour les visiteurs novices, mais également pour le classement en mouvement des moteurs de recherche.

Le terme «minify» est un langage de programmation qui décrit le processus de suppression des caractères inutiles dans le code source. Ces caractères incluent les espaces, les sauts de ligne, les commentaires et les délimiteurs de bloc qui sont utiles pour nous, humains, mais inutiles pour les machines. Nous minifions les fichiers d’un site Web contenant du code CSS, HTML et Javascript afin que votre navigateur Web puisse les lire plus rapidement.

Voici un exemple de la minification CSS.

CSS avant la minification

/* Une exemple de fichier CSS
----------------------------------*/
.user-profile-card {
margin:0px;
background: #33E43
}
.user-profile-description {
border: 0;
position: absolute;
width: auto;
margin-top: 20px;
}

CSS après minification

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Évidemment, il ne s’agit que d’un petit exemple utilisant un extrait de code CSS, mais vous pouvez imaginer la quantité d’espace que cela économiserait lors de la réduction de milliers de lignes de code. Donc, si vous vouliez le faire manuellement, techniquement, vous le pourriez. Mais vous courriez un risque d’erreur élevé et perdriez inutilement un temps précieux de votre vie !

Suivez ces conseils et utilisez les outils à votre disposition.

Quelques outils pour effectuer la compression

Heureusement, il ne faut pas nécessairement être un développeur ou de connaître l’un des langages de programmation pour réduire la taille les fichiers de votre site. La minification est devenue une pratique courante dans le monde de la conception Web. Vous ne devriez donc pas être surpris d’apprendre qu’il existe de nombreux outils merveilleux (et gratuits) pour faire le travail à votre place.

Voici une liste d’outils utiles pour bien commencer. Étant donné que beaucoup d’entre eux peuvent réduire au minimum plusieurs types de code, j’ai inclus les options de type de code entre parenthèses.

    • cssminifier.com et javascript-minifier.com (CSS et JS) – Ces deux minifiers de Andrew Chilton sont simples à utiliser. Il vous suffit de coller votre code, puis de cliquer sur le bouton Réduire pour afficher le code réduit. Vous pouvez même télécharger le code de sortie sous forme de fichier pour plus de commodité.
    • htmlcompressor.com (HTML, CSS et JS) – Cet outil de compression / minification en ligne prend en charge les types de code HTML, CSS et JS. Il prend même en charge différentes combinaisons de types de code tels que CSS + PHP et JavaScript + PHP. Et vous pouvez même vérifier le code compressé pour des erreurs.
    • csscompressor.net (CSS uniquement) – Ce compresseur CSS en ligne est rapide, facile et gratuit à utiliser.
    • jscompress.com (JS uniquement) – Cet outil de compression JavaScript vous permet de compresser du code JavaScript par copier-coller, mais vous pouvez également télécharger plusieurs fichiers JavaScript à la fois. C’est idéal pour combiner des fichiers JavaScript dans un seul fichier pour une meilleure vitesse de chargement des pages.
    • Dan’s Tools – Dan’s Tools propose un minifier CSS et un minifier JavaScript . Les deux outils ont une interface utilisateur vraiment propre, facile à utiliser. Ils n’offrent aucune option avancée, mais il est parfait pour des objectifs de minification courants.
    • refresh-sf.com (HTML, CSS et JS) – Ce compresseur réduira les types de code JavaScript, CSS et HTML. Il inclut également toutes les options de compression pour chaque type de code si vous en avez besoin.
    • Closure Compiler (JS uniquement) – Closure Compiler fait partie de Closure Tools , une suite d’outils de Google Developers. Il vous permet de minifier votre Javascript avec d’autres optimisations utiles. Vous pouvez utiliser votre code Javascript en entrant l’URL de l’emplacement du fichier js, puis choisir comment vous voulez que le code soit optimisé et formaté. Par exemple, vous choisissez d’optimiser votre code pour Whitespace uniquement si vous le souhaitez. Une fois que vous avez cliqué sur le bouton de compilation, cela réduira le code (ou le compilera) à votre place, ainsi que votre code pour rechercher les erreurs éventuelles.
    • minifycode.com (HTML, CSS et JS) – Ce site propose des minifiers pour JavaScript , CSS et HTML avec une interface utilisateur simple et propre qui minimise votre code en un simple clic sur un bouton. Il comprend également un outil «d’embellisseur» pour décompresser le code minifié afin de le rendre plus lisible (l’opposé de la minification).

Si vous recherchez des outils hors ligne pour minimiser votre code HTML CSS ou JavaScript localement, voici quelques options:

Comment réduire votre taille Réduisez votre code HTML, CSS et JavaScript à l’aide d’un outil en ligne

Beaucoup de ces outils en ligne ont un processus similaire qui implique les étapes suivantes:

Collez dans votre code source ou téléchargez le fichier de code source.
Optimisez les paramètres pour une sortie spécifique (si des options sont disponibles)
Cliquez sur un bouton pour agrandir ou comprimer le code.
Copiez la sortie du code minifié ou téléchargez le fichier de code minifié.

Créez Facilement votre blog avec SiteGround

SiteGround vous permet de créer votre blog WordPress en quelques clics seulements. Nom de domaine gratuit, hébergement sécurisé, SSL, transfert et bien plus encore... [ Recommandé ]

Pour cet exemple, je vais utiliser les outils minify de minifycode.com.

Tout d’abord, localisez le fichier css (communément appelé style.css) dans les fichiers de votre site et ouvrez-le à l’aide d’un éditeur de page. Copiez ensuite tout le code CSS dans votre presse-papiers.

css style divi.jpg

Allez à minifycode.com et cliquez sur l’onglet CSS minifier. Ensuite, collez le code CSS dans la zone de saisie et cliquez sur le bouton Réduire le CSS.

minification css.jpg

Une fois le nouveau code minifié généré, copiez-le.

copier un code compressé.jpg

Revenez ensuite au fichier css de votre site Web et remplacez le code par la nouvelle version simplifiée.

C’est tout !

Répétez le même processus pour réduire également le (s) fichier (s) JavaScript et HTML de votre site.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Comment minimiser HTML, CSS et JavaScript sur WordPress à l’aide de plugins

Le moyen le plus simple de réduire au minimum votre code HTML, CSS et JavaScript dans WordPress consiste à utiliser un plugin. Cela vous permet d’optimiser automatiquement vos fichiers de site WordPress pour réduire le temps de chargement des pages en quelques clics de bouton.

Il y a beaucoup de plugins là-bas qui vont faire le travail, mais je vais mentionner brièvement quelques exemples.

Autoptimize (GRATUIT)

autooptimize wp.png
Autoptimize est probablement le plugin minify le plus populaire. Il est populaire car il est facile à utiliser et regorge de fonctionnalités performantes. Il peut regrouper (combiner des scripts), minimiser et mettre en cache votre code. En prime, vous disposez d’options supplémentaires pour optimiser Google Fonts, les images, etc.

Pour utiliser Autoptimize, vous pouvez télécharger, installer et activer le plug-in à partir du tableau de bord WordPress sous Plugin> Ajouter un nouveau.

autoptimize.jpg

Une fois le plugin activé, accédez à Paramètres> Optimisation automatique. Ensuite, sous l’onglet Paramètres principaux, cochez le code que vous souhaitez optimiser (HTML, CSS et / ou JavaScript) et cliquez sur Enregistrer les modifications.

optimization css.jpg

Vous pouvez également cliquer sur le bouton Afficher les paramètres avancés en haut de la page pour personnaliser davantage l’optimisation de votre code.

css options avancée.jpg

C’est à peu près ça ! Assez simple et puissant.

W3 Total Cache (GRATUIT)

v3 total cache.png
W3 Total Cache est un excellent plugin de mise en cache qui inclut la possibilité de réduire au minimum vos fichiers HTML, JS et CSS.

parametres generaux w3 total cache.jpg

Cache le plus rapide WP (GRATUIT)

wp fastest cache.png
WP Fastest Cache – Ces plugins de mise en cache WordPress GRATUITS sont extrêmement populaires avec des critiques élevées. Le plugin effectue diverses optimisations de performances, notamment la combinaison et la réduction de votre code HTML CSS et JavaScript pour de meilleures performances.

Une fois le plugin installé, cliquez simplement sur l’onglet Cache le plus rapide WP dans la barre latérale de WordPress Dashboard (celui avec l’icône étonnante Cheetah). Sous l’onglet Paramètres, vous trouverez des options pour combiner et réduire les fichiers HTML et CSS. Bien que minifier JavaScript ne soit disponible que dans la version pro.

wp fastest cache reglages.png

Pour se résumer

Si vous souhaitez rendre votre blog plus rapide et avoir une meilleure performance, vous devez réduire la taille vos fichiers HTML, CSS et Javascript. Avec tous les outils en ligne disponibles, vous pouvez facilement réduire votre code pour n’importe quel site Web. Pour ceux qui utilisent WordPress, vous avez à votre disposition de puissants plugins sont disponibles pour minifier ces fichiers automatiquement en quelques clics.

C’est tout pour ce tutoriel, j’espère que vous saurez désormais comment faire la réduction de vos fichiers CSS, HTML et JS.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
4 Partages
Partagez4
Tweetez
Enregistrer
WhatsApp