Non, je ne gère aucun serveur en ligne avec des bouts de scotch.

Fatigué des longues soirées au goût de café froid, à essayer de gérer votre serveur Linux ou votre hébergement web ? 😩

Je vous apporte une expertise senior pour vous permettre soit d’apprendre le sysadmin, soit de déléguer à 100% l’infogérance de votre Wordpress ou Dolibarr.

Pourquoi la minification CSS ou JS permet d’optimiser votre WordPress ?

Les conseils privés de Christophe Ti

(réservé aux personnes intéressées)

Quelles sont les mystérieuses techniques que j’utilise pour mettre en œuvre un serveur d’hébergement rapide pour WordPress, fiable, performant et sécurisé, sans devoir monter la garde jour et nuit ?

(pour le savoir, inscrivez-vous dans le formulaire ci-contre)

Avant d’expliquer la minification CSS ou la minification JS (ou JAVASCRIPT), voici un rappel sur ce que c’est qu’une CSS :

Qu'est-ce que le CSS ?

Pour comprendre ce que c’est le CSS, il faut comprendre de quoi est composée une page web.

Une page web est stockée dans un format HTML qui est un language informatique permettant d’organiser du contenu sous forme logique : des paragraphes, des lignes, des tableaux,…

Voici une page HTML :

				
					<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Site Internet Rapide</title>
    
    
  </head>
  <body>
    <div class="division">
      <p>Paragraphe</p>
    </div>
  <script>var rocket_beacon_data = {"ajax_url":"https:\/\/libremaster.com\/wp-admin\/admin-ajax.php","nonce":"58ff670dc9","url":"https:\/\/libremaster.com\/pourquoi-la-minification-css-ou-js-permet-doptimiser-votre-wordpress","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://cdn.libremaster.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
				
			

La feuille de style est mise dans un fichier séparé « macss.css », ce fichier décrit le style à appliquer aux éléments de la page, comme mettre de la couleur, ajouter des espaces vides pour éclaircir le texte… :

				
					body {
  color: #2D3C5F;
}

div.division {
  background-color: #f5f5f5;
}

/* ajoute un espace vide au dessus et en dessous du paragraphe */
p {
  margin-top: 40px;
  margin-bottom: 40px;
}
				
			

Le problème : ce fichier est trop gros

J’ai pris des exemples de fichiers avec peu d’informations.

Mais souvent, les fichiers CSS sont énormes.

Le navigateur web doit télécharger ce fichier et l’interprêter. Toutes ces opérations peuvent être optimisées.

La solution : on le fait maigrir

Il est possible de réduire leur taille en réduisant les espaces vides qui ne sont pas utiles et les commentaires.

Mais le webmaster, au moment de préparer la feuille de style, ne va pas toucher à ce fichier source, il va toujours garder un fichier lisible par un être humain sur lequel il travaille, celui avec les espaces et les commentaires.

Mais au moment de publier la page internet, on utilisera un outil pour produire une version réduite de cette feuille de style qui sera utilisée dans la page HTML.

Voici la CSS minifiée :

				
					body{color:#2D3C5F}div.division{background-color:#f5f5f5}p{margin-top:40px;margin-bottom:40px}
				
			

Quelle est la différence avec la compression ?

La compression peut produire un fichier plus réduit encore avec l’aide de fonctions mathématiques.

La compression se fait au format gzip et il existe plusieurs niveaux de compression. Plus le niveau est grand, plus le fichier est petit mails plus il faudra des ressources de calcul pour le traiter.

Attention, un fichier trop petit ou déjà compressé peut produire un résultat plus gros à la fin.

Comment minifier les CSS de WordPress ?

Heureusement, il existe des outils pour minifier les CSS automatiquement.

J’utilise l’extension WP-Rocket qui permet de booster la vitesse de WordPress. Il a des options pour minifier les CSS (au aussi les fichiers JS / JAVASCRIPT).

Si vous avez besoin de booster votre site de façon professionnelle. Je suis là pour le faire (lien contact dans le haut du site).

A bientôt

Quelle est la mystérieuse ingénierie qui me permet d'obtenir un serveur Linux fiable et performant, sans devoir monter la garde jour et nuit ?