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>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
Dolibarr en ligne