Réduire le nombre de pages HTML, CSS et JavaScript : Il fonctionne aussi simplement que cela dans WordPress

Sven Scheuerle Mis à jour le 21.10.2020
9 Min.
minification du css
Dernière mise à jour le 21.10.2020

La miniaturisation des fichiers HTML, CSS et JavaScript est l'un des nombreux petits ajustements permettant d'optimiser la vitesse de chargement de votre site web. Dans cet article, Sven Scheuerle vous explique en quoi consiste la miniaturisation des CSS, HTML et autres, combien de temps de chargement vous gagnez en utilisant du code allégé et lesquels WordPress plugins vous aident dans la mise en œuvre.

Si vous regardez les sites Web d'aujourd'hui, vous vous rendrez vite compte qu'ils ne sont en rien comparables aux sites d'il y a dix ans. Au début, un simple code HTML et un peu de texte suffisaient. De nos jours, cependant, les sites web se composent d'un code étendu, qui se compose souvent de HTML, CSS et JavaScript. Cela est dû en partie à la gamme de fonctions désormais disponibles pour les sites web, mais aussi aux conceptions et modèles de plus en plus étendus 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 kilo-octets. Afin de traiter tous ces codes dans les fichiers et de pouvoir afficher le site web, le navigateur web envoie de nombreuses requêtes (appelées requêtes HTTP) au serveur. 

Plus les "demandes" sont nombreuses, plus le temps de chargement est long. Afin de limiter au maximum le nombre de requêtes et donc le temps de chargement du site, il convient de fusionner et de compresser les fichiers.  

Que signifie la miniaturisation de HTML, CSS et JavaScript ?

La minimisation - c'est-à-dire la réduction de la taille des fichiers HTML, CSS, etc. dans la mesure du possible - fait partie de toute bonne optimisation OnPage. Bien qu'il ne représente qu'une petite partie des temps de chargement, il peut également être décisif pour votre classement dans les moteurs de recherche. 

Droit WordPress n'est pas connu pour avoir des outils inhérents pour optimiser le temps de chargement. Vous devez donc vérifier la performance de votre WordPress vérifiez régulièrement la page.

Réduire les temps de chargement

Tout opérateur de site web qui a déjà utilisé un outil tel que Aperçu des pages consultées de Google, connaît avec certitude cette suggestion d'optimisation : "Réduire les CSS

Cette mesure est recommandée PageSpeed Insightslorsque les demandes de récupération des fichiers CSS ont une forte influence sur le temps de chargement du site web. Une explication détaillée et des explications sur les autres messages de l'outil se trouvent dans l'article "Google Pagespeed - Les messages d'erreur les plus importants”. 

Comment la réduction des CSS peut influencer le temps de chargement de votre site web, j'aimerais vous montrer avec un diagramme en cascade de mon blog bloggiraffe.de montrer. Les exemples ne sont que de petites sections, mais ils montrent clairement comment le temps de chargement peut être réduit.

Exemple 1 - Non comprimé (non réduit) :

css recompressé
Diagramme de cascade - sans compression des fichiers HTML, CSS et JavaScript

Exemple 2 - Compressé (réduit) :

css comprimé
Diagramme de cascade - avec compression des fichiers HTML, CSS 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. Les délais de chargement des différents dossiers pourraient également être réduits au minimum dans certains cas.

Que se passe-t-il lors de la compression de fichiers HTML, CSS et JavaScript ? 

Comme mentionné brièvement dans l'article, lorsque des fichiers tels que HTML, CSS et JavaScript sont compressés, les fichiers individuels sont combinés en un seul fichier. 

Par conséquent, le navigateur que vous utilisez pour accéder à une page web particulière doit envoyer moins de demandes au serveur pour afficher la page web et charger les scripts nécessaires.

Un exemple quotidien à comprendre

Imaginez que vous allez au supermarché et que vous avez 10 produits sur votre liste de courses. Mais celles-ci sont situées dans des allées et des rayons différents. 

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

Solution : vous indiquez à l'avance au supermarché les produits dont vous avez besoin. Cela vous permet de disposer de vos produits dans un rayon, de sorte que vous n'avez qu'à les mettre dans le panier et à payer à la caisse. 

Résultat : en rassemblant tous les produits sur une même étagère, vous n'avez qu'à faire un aller-retour dans le supermarché et vous gagnez un temps incroyable. Il fonctionne de la même manière avec la miniaturisation des codes et des scripts individuels de votre site web. Pour que vous puissiez voir comment tout cela fonctionne en pratique, j'aimerais vous montrer cela à l'aide de petits exemples. 

L'économie des données ne contribue pas seulement à optimiser les performances.
Parce qu'une utilisation consciente des ressources contribue également à rendre votre site web plus durable. Veuillez lire les contributions aux thèmes A quel point est-ce WordPress vert? et Hébergement Vert par.

HTML

Le HTML (Hypertext Markup Language) est nécessaire à la structure de base d'un site web. Les textes, les liens ou même les images sont donc 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>

Compressé :

 <!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;
}

Compressé :

 /* 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 qui a été développé à l'origine pour la production de HTML dynamique dans les navigateurs web (wikipedia.org). Ainsi, les opérateurs de pages web ont aujourd'hui la possibilité d'utiliser HTML et CSS étendu. 

Un code JavaScript standard (wiki.selfhtml.org) ressemble à ce qui suit :

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

Compressé :

 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, vous pouvez voir très bien comment fonctionne la miniaturisation du code HTML, CSS et JavaScript. En tant qu'utilisateur avancé et professionnel, vous pouvez également effectuer cette compression manuellement et utiliser un outil tel que linkcode-generator.de l'utilisation. En tant qu'WordPress utilisateur, "Minify plugins" peut faire le travail à votre place. Cela permet non seulement de gagner du temps, mais aussi de travailler de manière entièrement automatique.

5 Minifier plugin spour WordPress

Dans la liste suivante, j'ai énuméré cinq miniaturisations plugins populaires qui font le travail de compression de HTML, CSS et JavaScript pour vous. 

#1 Fusionner + Minifier + Rafraîchir

fusionner minify refresh

Comme le nom de la plugins Fusionner + Minifier + Rafraîchir (Fusionner + Minimiser + Rafraîchir) dit déjà, l'accent de cet outil est entièrement sur la compression du code CSS et JavaScript. 

Il s'agit d'une Plugincombinaison de feuilles de style en cascade (CSS) et de fichiers Javascript en groupes individuels. Ces derniers sont à leur tour réduits au minimum grâce à Minify pour le CSS et à Google Closure pour le JavaScript. 

Après l'installation WordPress, PluginFusionner + Minifier + Reafraîchir vous propose quelques réglages pour optimiser le temps de chargement de votre site web.

merge minify refresh wordpresspng

Vous pouvez notamment choisir ici si les fichiers CSS et les fichiers JS doivent être fusionnés ou non. En outre, il faut déterminer si la compression doit être effectuée via WP-Cron et si les données doivent être mises en cache à l'extérieur ou compressées dans un fichier gzip. 

Une fonction très utile est ce qu'on appelle le "Server Push HTTP2". Le serveur envoie plusieurs réponses pour une même requête au navigateur correspondant. 

Les 3 fonctions les plus importantes de Fusionner + Minifier + Rafraîchir plugins: 

  • Fusion / Compression de CSS et JavaScript
  • Push serveur HTTP2
  • Multisite capable

#2 WP Super Minify

wp super minify

Avec le Plugin WP Super Minify Les fichiers CSS et JavaScript peuvent être redimensionnés et mis en cache. Le chargement accéléré de ces fichiers est ensuite activé via Minify PHP Framework. 

La particularité de ce plugin système est qu'il s'agit d'un logiciel à source ouverte. Le code source de l'outil est donc ouvert et peut être développé par n'importe quel utilisateur.

Dans les paramètres de WP Super Minify, il n'y a pas beaucoup de choix pour les utilisateurs. Seuls les paramètres de compression de JavaScript et CSS sont indiqués ici.

wp super minif WordPress

Les principales fonctions du WP Super Minifyplugins : 

  • Compression / réduction des fichiers CSS et Javascript
  • Minifier le cadre PHP

#3 Minifier la vitesse rapide

vitesse rapide minifier

Le Plugin Minifier la vitesse rapide permet d'optimiser le temps de chargement pour les développeurs et 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. 

Après l'installation de Minify plugins, vous trouverez de nombreux paramètres dans le WordPress backend, ce qui peut être un peu écrasant pour certains utilisateurs. Le point positif est que de nombreux paramètres par défaut sont déjà prédéfinis, il suffit donc que des non-experts l'Pluginactivent. 

Pour les utilisateurs et les développeurs avancés, PluginFast Velocity Minify offre de nombreux gadgets et possibilités d'optimisation.

vitesse rapide minifier WordPress

En outre, il propose Pluginégalement une version Pro. Dans cette version, vous disposez de fonctions permettant d'exclure divers fichiers CSS et JavaScript. 

Les fonctions les plus importantes de Fast Velocity Minify

  • Compression / réduction des fichiers HTML, CSS et JavaScript
  • PHP Minify
  • À l'exclusion des fichiers et des scripts
  • fichiers de cache statiques
  • Soutien du WP CLI
  • Compatible avec une variété de caches plugins

#4 Autoptimiser

autoptimiser

C'est... WordPress plugin Autoptimisation vous offre la possibilité d'optimiser facilement votre site web. En quelques étapes seulement, vous pouvez compresser les fichiers HTML, CSS et JavaScript pour accélérer le temps de chargement de votre page. 

Le script d'auto-optimisationPlugin , par exemple, se déplace vers le pied de page et retarde le chargement de fichiers, tels que HTML, CSS et JavaScript, ou de nombreux autres fichiers, comme les polices de Google.

Important pour les RAIDBOXES clients

Autoptimize n'est pas compatible avec d'autres caches, par exemple le cache du serveurRAIDBOXES . Nous déconseillons donc vivement l'utilisation d'Autoptimize sur notre système !

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.

autoptimiser 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 le point de menu "Extras", d'autres optimisations automatiques, par exemple pour les polices Google, pour Emojis ainsi que pour le chargement de fichiers via des domaines tiers, peuvent être effectuées. 

Les fonctions les plus importantes de l'Autoptimisation

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

#5 WP Vitesse de la lumière

wp vitesse de la lumière

A la Plugin WP Vitesse de la lumière c'est aussi un WordPress plugin qui combine les fichiers HTML, CSS et JavaScript. Les puissants Plugin dispose également d'une compression de cache et de gzip, d'un système de nettoyage de la base de données et d'une optimisation des htacces. 

Dans la version gratuite de WP Speed of Light plugins toutes les fonctions standard pour optimiser votre site web sont disponibles. Dans les Pluginparamètres, vous pouvez sélectionner les différents groupes (HTML, CSS, JavaScript) que vous souhaitez minimiser et combiner.

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 beaucoup plus de fonctions que la simple compression de fichiers, que vous pouvez facilement utiliser grâce au backend clairement agencé. 

Les fonctions les plus importantes du plugins: 

  • Compression des fichiers HTML, CSS et JavaScript
  • Cache et compression 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
vitesse rapide
Minifier
AutoptimisationVitesse WP
de la lumière
Gratuitouiouiouiouioui
Convient pourdébutantsdébutantsavancés + professionnelsdébutants + apprenants avancésdébutants + apprenants avancés
Compression HTMLnonnonouiouioui
Compression CSSouiouiouiouioui
Compression JavaScriptouiouiouiouioui
Évaluation4/53/54/55/54/5

Conclusion

La réduction des fichiers HTML, CSS ou JavaScript peut augmenter le temps de chargement de votre site web de quelques millisecondes. Vous pouvez choisir parmi un certain nombre WordPress d'options très utiles et gratuites plugins. 

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. Vous pouvez ainsi vous assurer que le temps de chargement de votre site web n'est pas affecté négativement par les fichiers mentionnés ci-dessus.

Photo : Paula Schmidt | Unsplash

Sven Scheuerle - Indépendante et spécialiste du marketing affilié par passion, elle est active dans le domaine du marketing en ligne depuis de nombreuses années. En outre, il est blogueur et fait régulièrement des reportages sur son blog BLOGGiraffe.de, sur le travail indépendant dans le commerce en ligne et donne à ses lecteurs des conseils et des astuces.

Articles connexes

Commentaires sur cet article

Ecrire un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués par * .