minify css html

Comment minifier : réduire CSS, HTML et JavaScript

La réduction de HTML, CSS et JavaScript est l'une des nombreuses petites vis de réglage pour optimiser la vitesse de chargement de ton site web. Si tu regardes aujourd'hui différents sites sur le web, tu constateras rapidement qu'ils ne sont en rien comparables aux sites d'il y a 10 ans. Au début, un simple code HTML et un peu de texte suffisaient. Aujourd'hui, les sites Web sont constitués d'un code important, souvent composé de HTML, CSS et JavaScript. Cela est dû à l'étendue des fonctions disponibles pour les sites web, mais aussi aux designs et aux modèles de plus en plus complets utilisés dans le design 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 requêtes (appelées requêtes HTTP) au serveur. 

WordPress n'est pas réputé pour ses outils d'optimisation du temps de chargement. C'est pourquoi tu dois 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 compresser 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 plus complexes en expressions plus simples en fait également partie. Même les identificateurs de variables peuvent être raccourcis, par exemple en remplaçant 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 utile 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 se sont déjà produites en amont sont remplacées par un pointeur. Ces pointeurs ont beaucoup moins de contenu que la chaîne elle-même. Car ici, n'est plus une chaîne pour le navigateur, mais une référence à 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 pour cent de sa taille initiale.

Réduire les temps de chargement

Si tu as déjà utilisé un outil comme PageSpeed Insights Si tu as utilisé Google, tu connais certainement cette suggestion 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". 

Je voudrais te montrer comment la réduction des CSS peut influencer le temps de chargement de ton site web en utilisant 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é :

Comment minifier : réduire CSS, HTML et JavaScript

Exemple 2 - Compressé (réduit) :

Comment minifier : 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 lorsque tu fusionnes des fichiers CSS et JavaScript ? 

Comme nous l'avons brièvement mentionné dans l'article, lorsque tu fusionnes des fichiers CSS et JS, les fichiers individuels sont regroupés en un seul fichier. 

Cela signifie que le navigateur - par le biais duquel tu accèdes à un certain site web - doit envoyer moins de demandes au serveur pour pouvoir afficher le site web et charger les scripts nécessaires, le cas échéant.

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 à l'avance au supermarché les produits dont tu as besoin. Celui-ci te prépare tes produits dans un rayon, 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 n'as qu'un seul trajet à faire dans le supermarché et tu gagnes ainsi un temps incroyable. C'est la même chose pour le regroupement des codes et des scripts de ton site Web. Pour que tu puisses voir comment cela fonctionne dans la pratique, je voudrais te montrer de petits exemples. 

L'économie de données n'aide pas seulement à optimiser les performances.
Une utilisation consciente des ressources contribue également à rendre ton site web plus durable. Pour en savoir plus, consulte les articles sur WordPress et Sustainable Webdesign.

Avec certaines configurations - 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 affecté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 un test. Ne t'inquiète pas, tu peux toujours revenir en arrière.

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); 

Avec l'aide des exemples ci-dessus, tu peux voir comment fonctionne la minification du code HTML, CSS et JavaScript. Les utilisateurs avancés et les professionnels peuvent également effectuer cette compression manuellement en utilisant un outil comme linkcode-generator.de par exemple. Des "plugins Minify" spéciaux ou des minifieurs peuvent te décharger de ce travail. Non seulement tu gagnes du temps, mais en plus, cela fonctionne 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 soulagent 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 plugins ou fait des changements dans les paramètres.

#1 Autoptimize

Autoptimiser

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

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

Autoptimize chez Raidboxes

Pendant longtemps, Autoptimize n'était pas compatible avec d'autres caches, y compris le cache du serveur Raidboxes . Ce problème a été résolu et Autoptimize peut à nouveau être utilisé 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. 

Dans le menu "Outils", il est possible d'effectuer 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 Les fichiers CSS et JavaScript peuvent être réduits et stockés 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 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. D'une part, il réduit les requêtes HTTP en fusionnant les fichiers CSS et JavaScript, et d'autre part, il minimise 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églages qui peuvent certainement en submerger certains. La bonne nouvelle, c'est que de nombreux paramètres par défaut sont déjà définis, il suffit donc 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

Le plugin WP Vitesse de la lumière est également un plugin WordPress qui regroupe les fichiers HTML, CSS et JavaScript. Ce puissant plugin dispose également d'une compression en cache et Gzip, d'un système de nettoyage de la base de données et aussi 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. Ainsi, dans les paramètres du plug-in, tu peux sélectionner 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 de JavaScriptouiouiouiouioui
Classement4/53/54/55/54/5

Conclusion

La réduction des fichiers HTML, CSS ou JavaScript peut faire en sorte que tu augmentes le temps de chargement de ton site de quelques millisecondes. Pour cela, WordPress te propose quelques 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.

"*" indique les champs requis

Je souhaite m'abonner à la newsletter pour être informé des nouveaux articles de blog, des ebooks, des fonctionnalités et des nouvelles de WordPress. Je peux retirer mon consentement à tout moment. Merci de prendre connaissance de notre politique de confidentialité.
Ce champ sert à la validation et ne doit pas être modifié.

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. Les champs obligatoires sont marqués d'un *.