minify css html

How to Minify : réduire CSS, HTML et JavaScript

La réduction de HTML, CSS et JavaScript est l'un des nombreux petits leviers permettant d'optimiser la vitesse de chargement de ton site web. Si tu regardes aujourd'hui différentes pages sur le web, tu constateras rapidement qu'elles n'ont rien à voir avec les sites d'il y a 10 ans. Au début, un simple code HTML et un peu de texte suffisaient amplement. Aujourd'hui, les sites web se composent d'un code important, souvent à la fois HTML, CSS et JavaScript. Cela s'explique d'une part par l'étendue des fonctions disponibles pour les sites web, mais aussi par les designs et les modèles de plus en plus complets utilisés dans la conception de sites web. 

Il n'est donc pas rare que les fichiers HTML, CSS ou JavaScript atteignent rapidement des centaines de kilobytes. Pour traiter tout ce code dans les fichiers et pouvoir afficher le site web, le navigateur web envoie de nombreuses demandes (appelées requêtes HTTP) au serveur. 

WordPress, en particulier, n'est pas réputé pour fournir nativement des outils permettant d'optimiser le temps de chargement. C'est pourquoi tu devrais vérifier régulièrement les performances de ton site WordPress.

Plus le nombre de "requêtes" envoyées est élevé, plus le temps de chargement est long. Pour réduire au maximum le nombre de requêtes, et donc le temps de chargement du site, tu devrais comprimer les fichiers et les fusionner si nécessaire.

Que signifie minifier ?

La minification signifie que tous les éléments créés pour la lisibilité du code (c'est-à-dire les sauts de ligne, les espaces, les indentations, les points-virgules inutiles et les commentaires) sont retirés du fichier afin de réduire la taille du fichier. La transformation d'expressions complexes en expressions plus simples en fait également partie. Même les identificateurs de variables peuvent être raccourcis, en remplaçant par exemple la variable numberOfButtons par n. L'effet d'une minification varie bien sûr fortement en fonction du nombre de ces éléments intégrés lors de l'écriture du code, mais la taille du fichier est généralement réduite d'une valeur comprise entre 20 et 40 %, ce qui peut en tout cas être pertinent pour ton classement dans les moteurs de recherche. La minification est toujours judicieuse et entraîne rarement des problèmes.

Qu'est-ce que la compression ?

Le code est compressé en appliquant le codage gzip côté serveur. 

gzip chez Raidboxes

Sur Raidboxes , on utilise Brotli au lieu de gzip. Nous expliquons la différence dans notre article.

Dans ce cas, les chaînes qui sont déjà apparues au préalable sont remplacées par un pointeur. Ces pointeurs ont un contenu nettement moins important que la chaîne de caractères proprement dite. Car ici, il ne s'agit plus d'une chaîne pour le navigateur, mais d'un renvoi à la chaîne précédente. L'en-tête de la réponse HTTP contiendra alors "content-encoding : gzip". L'effet de la compression est extrême, tu peux ainsi réduire la taille du fichier jusqu'à environ 20 % de sa taille initiale.

Réduire les temps de chargement

Si tu as déjà utilisé un outil comme PageSpeed Insights de Google, vous connaissez certainement cette proposition d'optimisation : "Minifier CSS".

Cette mesure est recommandée par PageSpeed Insights lorsque les requêtes (requests) pour récupérer les fichiers CSS influencent fortement le temps de chargement du site. Tu trouveras une explication détaillée et des explications sur d'autres messages de l'outil dans l'article "Google Pagespeed - Les principaux messages d'erreur". 

J'aimerais te montrer comment la réduction des CSS peut influencer le temps de chargement de ton site web à l'aide d'un diagramme en cascade de mon blog bloggiraffe.de. Les exemples ne sont que de petits extraits, mais ils montrent déjà clairement comment le temps de chargement peut être réduit.

Exemple 1 - Non compressé :

How to Minify : réduire CSS, HTML et JavaScript

Exemple 2 - Compressé (réduit) :

How to Minify : réduire CSS, HTML et JavaScript

Déjà en récupérant le domaine principal, vous pouvez voir que j'ai pu réduire le temps de chargement de 1233 millisecondes à 860 millisecondes. De même, les temps de chargement des différents dossiers pourraient être réduits au minimum dans certains cas.

Que se passe-t-il lors de la fusion de fichiers CSS et JavaScript ? 

Comme nous l'avons déjà brièvement mentionné dans l'article, la fusion de fichiers CSS et JS consiste à regrouper des fichiers individuels en un seul fichier. 

Cela a pour conséquence que le navigateur - par le biais duquel tu appelles un certain site web - doit envoyer moins de demandes au serveur pour pouvoir afficher le site web et charger les scripts éventuellement nécessaires.

Fusionner des fichiers

Plus le nombre de "requêtes" envoyées est élevé, plus le temps de chargement est long. Pour réduire au maximum le nombre de requêtes et donc le temps de chargement du site, tu devrais fusionner les fichiers.

Un exemple quotidien pour comprendre

Imaginez que vous allez au supermarché et que vous avez 10 produits sur votre liste de courses. Mais ils se trouvent dans des allées et des rayons différents. 

Conséquence : il faut un temps incroyable pour trouver chaque produit et le mettre dans le panier. 

Solution : tu indiques au préalable au supermarché les produits dont tu as besoin. Celui-ci met tes produits à ta disposition dans un rayon, de sorte que tu n'as plus qu'à les mettre dans ton panier et à payer à la caisse. 

Résultat : en regroupant tous les produits dans un même rayon, tu ne dois faire qu'un seul trajet dans le supermarché et tu gagnes ainsi un temps incroyable. Il en va de même pour le regroupement des différents codes et scripts de ton site web. Pour que tu puisses voir comment cela fonctionne dans la pratique, je voudrais te montrer cela à l'aide de petits exemples. 

L'économie de données n'aide pas seulement à optimiser les performances.
En effet, une utilisation consciente des ressources contribue également à rendre ton site web plus durable. Pour en savoir plus, consulte les articles sur WordPress est-il écologique ? et Sustainable Web Design.

Dans certains setups - c'est-à-dire des combinaisons de plugins et de thèmes - la fusion de fichiers CSS et surtout de fichiers JavaScript peut malheureusement aussi entraîner des problèmes. La valeur LCP ou d'autres valeurs Web Vitals peuvent également être influencées de manière négative. Pour savoir si la fusion a un effet positif sur ton site ou si elle entraîne des problèmes, il suffit de faire des tests. Ne t'inquiète pas, tu peux annuler ce réglage à tout moment.

HTML

Le HTML (Hypertext Markup Language) est nécessaire à la structure de base d'un site web. Ainsi, les textes, les liens ou même les images sont produits par ce biais. 

Par exemple, un code HTML standard ressemble à ceci : 

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0">
    <title>HTML Code zur Komprimierung</title>
  </head>
  <body>
    <p>Dieser HMTL-Code soll komprimiert werden.</p>
  </body>
</html>

Minifié :

 <!doctype html><html><head><meta charset="utf-8"><meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0"><title>HTML Code zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></body></html>

CSS

Le CSS (Cascading Style Sheets) n'est pas un véritable langage de programmation. Toutefois, le langage dit de la feuille de style est utilisé pour modifier l'apparence des différents éléments du site web. 

Par exemple, un code CSS standard ressemble à ceci : 

 /* Add your CSS customizations below this line */

.post-content a:not([class*="button"]){
     color:#ff8c00;
}

.post-content a:not([class*="button"]):hover {
    text-decoration: underline;
    color: #ff8c00;
}

.widget-area a {
    color: #ff8c00;
}

.widget-area a:hover {
    text-decoration: underline;
    color: #ff8c00;
}

.main-navigation {
    font-size: 20px;
}

label.wp-comment-cookies-consent {
    float: none;
}

Minifié :

 /* Add your CSS customizations below this line */.post-content a:not([class*="button"]){ color:#ff8c00;}.post-content a:not([class*="button"]):hover { text-decoration: underline; color: #ff8c00;}.widget-area a { color: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.main-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;}

JavaScript

JavaScript est un langage de script pur, développé à l'origine pour l'édition de HTML dynamique dans les navigateurs web(wikipedia.org).

Un code JavaScript standard (wiki.selfhtml.org) ressemble à ceci, par exemple :

 function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);

Minifié :

 function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); 

À l'aide des exemples ci-dessus, tu peux très bien voir comment fonctionne la minification du code HTML, CSS et JavaScript. Les utilisateurs avancés et les professionnels peuvent aussi effectuer cette compression manuellement et utiliser pour cela un outil comme par exemple linkcode-generator.de. Des "plugins de minification" spéciaux ou des minificiels peuvent te décharger de ce travail. Cela permet non seulement de gagner du temps, mais fonctionne aussi de manière entièrement automatique.

4 plugins Minify pour WordPress

Dans la liste ci-dessous, j'ai répertorié cinq plugins de minification populaires qui te déchargent du travail de compression de HTML, CSS et JavaScript. 

Les plugins et le cache

Tu devrais vider le cache de ton site après avoir installé de nouveaux plug-ins ou effectué des modifications dans les paramètres.

#1 Autoptimize

Autoptimiser

Le plugin WordPress Autoptimize te permet d'optimiser facilement ton site web. En quelques manipulations, tu peux comprimer les fichiers HTML, CSS et JavaScript et ainsi accélérer le temps de chargement de ton site web. 

Autoptimize déplace par exemple les scripts dans le pied de page et retarde le chargement des fichiers, tels que HTML, CSS et JavaScript, ou de nombreux autres fichiers, comme les polices Google.

Autoptimize chez Raidboxes

Pendant longtemps, Autoptimize n'était pas compatible avec d'autres caches, entre autres avec le cache du serveur Raidboxes . Ce problème a été résolu entre-temps - Autoptimize peut à nouveau être utilisé sans problème avec Raidboxes .

Une fois que vous avez WordPress installé l'plugin in, vous trouverez plusieurs onglets dans les paramètres comme "JS, CSS, HTML", "Images" et "Outils". Les possibilités et options individuelles sont très bien décrites ici et sont également très faciles à comprendre pour les profanes.

Autoptimize WordPress

Dans l'onglet "JS, CSS & HTML", vous pouvez choisir entre différentes options d'optimisation pour les fichiers JavaScript, CSS et HTML. L'onglet "Images" vous permet d'optimiser automatiquement les images et de retarder le chargement des fichiers d'images. 

Sous l'option de menu "Outils", il est possible de procéder à d'autres optimisations automatiques, par exemple pour les polices Google, pour les emojis ainsi que pour le chargement de fichiers via des domaines tiers. 

Les fonctions les plus importantes d'Autoptimize

  • Minimisation / mise en cache des fichiers HTML, CSS et JavaScript
  • Optimisation de l'image
  • Supprimer les polices de Google
  • Supprimer les emojis
  • Synchroniser JavaScript
  • Compatible avec une variété de caches plugins

#2 WP Super Minify

WP Super Minify

Avec le plugin WP Super Minify permet de réduire la taille des fichiers CSS et JavaScript et de les enregistrer temporairement. Le chargement accéléré de ces fichiers est ensuite possible via Minify PHP Framework. 

La particularité de ce plugin est qu'il s'agit d'un logiciel open source. Le code source de l'outil est donc ouvert et peut être développé par tous.

Dans les paramètres de WP Super Minify, il n'y a pas beaucoup de possibilités de choix. On ne voit ici que les paramètres pour la compression de JavaScript et CSS.

WP Super Minify WordPress

Principales caractéristiques du WP Super Minify Plugins: 

  • Compression / réduction des fichiers CSS et JavaScript
  • Minifier le cadre du PSP

#3 Minifier la vitesse rapide

Fast Velocity Minify

Le plugin Fast Velocity Minify permet d'optimiser le temps de chargement pour les utilisateurs avancés. Il réduit d'une part les requêtes HTTP en fusionnant les fichiers CSS et JavaScript et minimise d'autre part les fichiers avec PHP Minify. 

Dans le backend de WordPress, tu trouveras après l'installation du plugin Minify de nombreuses possibilités de réglage qui peuvent certainement en dépasser certains. La bonne nouvelle, c'est que de nombreux paramètres par défaut sont déjà définis, de sorte qu'il suffit aux non-initiés d'activer le plugin. 

Pour les utilisateurs avancés, le plugin Fast Velocity Minify offre de nombreux gadgets et possibilités d'optimisation.

Fast Velocity Minify WordPress

En outre, ce Plugin propose également une version Pro. Dans cette version, des fonctions permettant d'exclure divers fichiers CSS et JavaScript sont disponibles. 

Les principales caractéristiques de Fast Velocity Minify

  • Compression / réduction des fichiers HTML, CSS et JavaScript
  • PHP Minify
  • Exclure les fichiers et les scripts
  • les fichiers de cache statiques
  • WP-CLI Soutien
  • Compatible avec une variété de caches plugins

#4 WP Vitesse de la lumière

WP Vitesse de la lumière

Ce plugin WP Vitesse de la lumière est également un plugin WordPress qui regroupe les fichiers HTML, CSS et JavaScript. Ce plugin performant dispose en outre d'une compression en cache et Gzip, d'un système de nettoyage de la base de données et également d'une optimisation htacces. 

Dans la version gratuite de WP Speed of Light, tu disposes de toutes les fonctionnalités standard pour l'optimisation de ton site web. Ainsi, tu peux choisir dans les paramètres du plug-in les différents groupes (HTML, CSS, JavaScript) que tu souhaites minimiser et regrouper.

WP Vitesse de la lumière WordPress

En outre, la version Pro du logiciel plugins comporte quelques fonctionnalités supplémentaires, comme l'exclusion ou le déplacement de scripts. 

WP Speed of Light offre, outre la compression pure des fichiers, de nombreuses autres fonctions, que vous pouvez utiliser facilement grâce au backend clairement agencé. 

Les fonctions les plus importantes du plugins: 

  • Compression des fichiers HTML, CSS et JavaScript
  • Compression en cache et gzip
  • Outils de groupe
  • Nettoyage de la base de données
  • Optimisation de l'image

Les plugins en comparaison directe

 Fusionner + Minifier
+ Rafraîchir
WP Super
Minifier
Fast Velocity
Minifier
AutoptimiserWP Speed
of Light
Gratuitouiouiouiouioui
Convient pourDébutantDébutantAvancé + ProfessionnelsDébutant + AvancéDébutant + Avancé
Compression HTMLnonnonouiouioui
Compression CSSouiouiouiouioui
Compression JavaScriptouiouiouiouioui
Classement4/53/54/55/54/5

Conclusion

La réduction des fichiers HTML, CSS ou JavaScript peut te permettre d'augmenter le temps de chargement de ton site de quelques millisecondes. Pour cela, WordPress met à ta disposition plusieurs plugins gratuits et très utiles. 

Même si cette vis de réglage n'est qu'une petite partie de votre optimisation OnPage, elle doit toujours être vérifiée à nouveau. De cette façon, vous pouvez vous assurer que le temps de chargement de votre site web n'est pas influencé négativement par les fichiers mentionnés ci-dessus.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.