Comment réduire les CSS, HTML et Javascript de votre site Web

Lorsque vous minimisez 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 la vitesse de chargement de votre page de moitié ou quoi que ce soit, mais en ce qui concerne la vitesse de votre site Web, un petit peu aide. La vitesse de chargement de votre site n'est pas seulement importante pour les nouveaux visiteurs, mais elle est également importante pour faire évoluer le classement des moteurs de recherche.

Le terme « minify » est un jargon de programmation qui décrit les processus de suppression des caractères inutiles dans le code source. Ces caractères incluent des espaces, des sauts de ligne, des commentaires et des délimiteurs de blocs qui sont utiles pour nous les humains mais inutiles pour les machines. Nous minimisons 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 ce à quoi ressemble la minification CSS.

CSS avant la minification

/* Layout helpers

----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

CSS après la minification

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

Évidemment, ce n'est qu'un petit exemple utilisant un extrait de code CSS, mais vous pouvez imaginer la quantité d'espace que cela permettrait d'économiser lors de la réduction de milliers de lignes de code. Donc, si vous vouliez le faire manuellement à la main, techniquement, vous le pouviez. Mais vous courriez un risque élevé d'erreur et vous gagneriez inutilement un temps précieux ou votre vie !

Suivez mes conseils et utilisez les outils à votre disposition.

Outils en ligne pour minimiser vos fichiers manuellement

Heureusement, vous n'avez pas besoin d'être un développeur ou de connaître l'un des langages de programmation pour minimiser les fichiers de votre site. La minification est devenue une pratique courante dans le monde de la conception Web, vous ne devriez donc pas vous surprendre d'apprendre qu'il existe de nombreux outils merveilleux (et gratuits) pour faire le travail à votre place.

Voici une liste de quelques outils utiles pour commencer. Étant donné que beaucoup d'entre eux peuvent réduire plus d'un type de code, j'ai inclus les options de type de code entre parenthèses.

• Closure Compiler (JS uniquement) – Closure Compiler fait partie de Closure Tools, une suite d'outils de Google Developers. Il vous permet de réduire votre Javascript ainsi que d'autres optimisations utiles. Vous pouvez extraire votre Javascript en saisissant l'URL de l'emplacement du fichier js, puis choisir comment vous souhaitez que le code soit optimisé et formaté. Par exemple, vous choisissez d'optimiser votre code pour les espaces blancs uniquement si vous le souhaitez. Une fois que vous avez cliqué sur le bouton de compilation, il minimise (ou compile) le code pour vous et vérifie également si votre code contient des erreurs.
• cssminifier.com et javascript-minifier.com (CSS et JS) – Ces deux minificateurs d'Andrew Chilton sont simples à utiliser. Collez simplement votre code, puis cliquez sur le bouton Minifier pour sortir le code minifié. Vous pouvez même télécharger le code de sortie sous forme de fichier pour plus de commodité.
• 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 le code JavaScript via Copier et Coller, mais vous pouvez également télécharger plusieurs fichiers JavaScript à la fois. C'est idéal pour combiner des fichiers JavaScript en un seul fichier pour une meilleure vitesse de chargement des pages.
• refresh-sf.com (HTML, CSS et JS) – Ce compresseur minimise les types de code JavaScript, CSS et HTML. Il comprend également toutes les options de compresseur pour chaque type de code si vous en avez besoin.
• 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 comme CSS + PHP et JavaScript + PHP. Et vous pouvez même vérifier le code compressé pour les erreurs.
• minifycode.com (HTML, CSS et JS) – Ce site propose des minificateurs pour JavaScript, CSS et HTML avec une interface utilisateur simple et propre qui minimise votre code d'un simple clic sur un bouton. Il comprend également un outil « embellisseur » pour décompresser le code minifié afin de le rendre facile à lire (essentiellement le contraire de la minification).
• Dan's Tools - Dan's Tools propose un minificateur CSS et un minificateur JavaScript. Les deux outils ont une interface utilisateur vraiment propre et facile à utiliser. Ils n'offrent aucune option avancée, mais ils sont parfaits à des fins de minification courantes.

Si vous recherchez des outils hors ligne pour réduire votre HTML CSS ou JavaScript localement, voici quelques options :

• Plus petit (HTML, CSS et JS)
• phpied.com/cssmin-js/ (CSS uniquement)
• yui.github.io/yuicompressor (JS et CSS)

Comment réduire les CSS, HTML et Javascript de votre site Web

Abonnez-vous à notre chaîne Youtube

Comment minifier votre minifiez votre 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 votre code source ou téléchargez le fichier de code source.
Optimiser les paramètres pour une sortie spécifique (si des options sont disponibles)
Cliquez sur un bouton pour réduire ou compresser le code.
Copiez la sortie du code minifié ou téléchargez le fichier de code minifié.

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

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

Allez sur minifycode.com et cliquez sur l'onglet CSS minifier. Collez ensuite le code CSS dans la zone de saisie et cliquez sur le bouton Minify CSS.

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

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

C'est ça!

Répétez le même processus pour réduire également les fichiers JavaScript et HTML de votre site.

Comment minifier HTML, CSS et JavaScript dans WordPress à l'aide de plugins

Le moyen le plus simple de réduire votre HTML, CSS et JavaScript dans WordPress est d'utiliser un plugin. Cela vous permet d'optimiser automatiquement les fichiers de votre site WordPress pour réduire les temps de chargement des pages en quelques clics.

Il existe de nombreux plugins qui feront le travail, mais je mentionnerai brièvement quelques points remarquables.

Optimisation automatique (GRATUIT)

Autoptimize est probablement le plugin minify le plus populaire. Il est populaire parce qu'il est facile à utiliser et plein de puissantes fonctionnalités de performance. Il peut agréger (combiner des scripts), minifier et mettre en cache votre code. En prime, vous disposez d'options supplémentaires pour optimiser les polices Google, les images et plus encore.

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

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.

Vous pouvez également cliquer sur le bouton Afficher les paramètres avancés en haut de la page pour personnaliser davantage la façon dont vous souhaitez que votre code soit optimisé.

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

Fast Velocity Minify (GRATUIT)

Fast Velocity Minify est un autre plugin WordPress populaire, gratuit et puissant qui fait plus que simplement minifier. Il minimise et combine vos CSS et Javascript pour réduire les requêtes HTTP vers votre serveur, à la hauteur de son nom pour vous offrir des temps de chargement de page rapides. Des options d'optimisation supplémentaires sont disponibles, mais les paramètres par défaut fonctionnent parfaitement pour la plupart des sites.

Pour utiliser le plugin, installez-le et activez-le d'abord depuis votre tableau de bord WordPress en accédant à Plugins > Ajouter un nouveau. Recherchez ensuite « minification rapide de la vitesse » et une fois qu'il apparaît dans les résultats de la recherche, cliquez pour l'installer et l'activer.

Une fois le plugin activé, vos fichiers seront automatiquement réduits et optimisés pour de meilleures performances. C'était facile!

Accédez à la page des paramètres du plugin (Paramètres> Fast Velocity Minify) pour voir toutes les options disponibles. Sous l'onglet Statut, vous pouvez voir une liste utile de vos fichiers JavaScript et CSS qui ont été traités.

Sous l'onglet Paramètres, vous pouvez personnaliser la façon dont vos fichiers sont optimisés. Étant donné que la minification de HTML, CSS et JavaScript est déjà active, vous pouvez utiliser ces paramètres pour ajuster les options par défaut ou désactiver la minification pour certains types de code. Il existe même des options pour optimiser les polices Google et Font Awesome.

C'est ça!

Cache total W3 (GRATUIT)

W3 Total Cache est un excellent plugin de mise en cache qui inclut la possibilité de réduire votre HTML, JS et CSS.

Cache le plus rapide WP (GRATUIT)

WP Fastest Cache – Ce plugin de mise en cache WordPress GRATUIT est extrêmement populaire avec des critiques élevées. Le plugin effectue diverses optimisations de performances, notamment en combinant et en minimisant votre HTML CSS et JavaScript pour de meilleures performances.

Une fois le plugin installé, cliquez simplement sur l'onglet WP Fastest Cache dans la barre latérale du tableau de bord WordPress (celle avec l'incroyable icône de guépard). Sous l'onglet Paramètres, vous trouverez des options pour combiner et réduire les fichiers HTML et CSS. Bien que la minimisation de JavaScript ne soit disponible que dans la version pro.

Dernières pensées

Si vous voulez des temps de chargement de page plus rapides et de meilleurs scores de performances, vous voudrez réduire 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. Et pour vous, utilisateurs de WordPress, il existe de puissants plugins disponibles pour réduire automatiquement ces fichiers en quelques clics. Les plugins ci-dessus ne sont que quelques-uns des excellents plugins qui gèrent la minification parmi d'autres optimisations de performances. En fait, vous disposez peut-être déjà d'un plugin de type performance dont la minification est déjà disponible. Par exemple, de nombreux plugins de mise en cache incluent l'option de minification. J'espère que cet article vous aidera à décider quelle est la meilleure option pour vous.

J'ai hâte de vous entendre dans les commentaires ci-dessous.

À votre santé!