Tout savoir sur WordPress
Tutoriel WordPress

Minifier les fichiers HTML d’un site WordPress sans plugin

Pour gagner quelques millisecondes de temps de chargement, il est conseillé de compresser le code des pages HTML afin de réduire leur poids.

Parmi les bonnes pratiques à mettre place lors de l’optimisation du temps de chargement des pages d’un site Internet, on parle régulièrement de la « minification » des fichiers HTML, CSS et JavaScript.

Derrière ce mot barbare se cache une technique très simple : il s’agit de compresser au maximum un fichier pour réduire son poids. Pour cela, on supprime tous commentaires de code, les sauts de ligne et les espaces inutiles présents dans le fichier.

Pour minifier nos fichiers sans difficulté, il existe plusieurs plugins WordPress tels que WP Minify ou W3 Total Cache.

Pourtant, à l’aide de quelques lignes de code, il est possible d’optimiser le poids de nos fichiers sans plugin. Par exemple, pour réduire le poids des fichiers HTML d’un thème WordPress, copiez le code suivant dans le fichier functions.php présent à la racine de votre thème :


add_action('get_header', 'gkp_html_minify_start');
function gkp_html_minify_start()  {
    ob_start( 'gkp_html_minyfy_finish' );
}

function gkp_html_minyfy_finish( $html )  {

   // Suppression des commentaires HTML, 
   // sauf les commentaires conditionnels pour IE
   $html = preg_replace('/<!--(?!s*(?:[if [^]]+]|!|>))(?:(?!-->).)*-->/s', '', $html);

   // Suppression des espaces vides
   $html = str_replace(array("rn", "r", "n", "t"), '', $html);
   while ( stristr($html, '  ')) 
       $html = str_replace('  ', ' ', $html);

   return $html;
}

Cet article a été mis à jour il y a 1310 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

76 Commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  1. Merci pour le partage ! Il est vrai que l’on doit souvent passer par des plugins pour ce genre d’optimisation. Alors si un bout de code d’une dizaine de lignes peut faire l’affaire je suis preneur !

  2. @Daniel et Mat : Pour ma part, je l’ai testé sur un site en production et tout à l’air bon.

    Si vous rencontrez un problème quelconque, n’hésitez pas à m’en faire part.

  3. @Geoffrey : Je vais voir ce qu’il est possible de faire avec les fichiers CSS et JS.

    Une solution simple pour concaténer les fichiers, les compresser et un système de cache.

    Par contre, je ne garantis pas de trouver une solution rapidement =D

  4. J’avoue ne pas avoir eu le temps de la tester depuis hier, du coup je me demande quelle différence il y a entre ton astuce et « ob_start(‘ob_gzhandler’); » ?
    ps : des gens auront des problème, tout comme avec ob_gzhandler, beaucoup de facteurs entrent en jeu, il faut paufiner, retoucher les headers, vérifier des extensions, régler des conflits etc, ce n’est pas une astuce tout bidon c’est du lourd ;) Be prepared with your support! lol

  5. Ha sympa, ce matin c’est articles d’optimisation ;) C’est vrai que ça peut être pas mal car souvent dans les thèmes il y a des commentaires et je les y laisse, et vu qu’il ne servent qu’a un développeur pourquoi l’afficher chez les visiteurs.
    Et puis la fonction de suppression des espaces doit bien fonctionner vu que dans un fichier en général entre tous les espaces et les sauts de ligne… Ça doit bien compresser au final.

  6. Tu as bien zlib activée ? Tu vois, je te dis, pour certains ça marche et d’autres non :p
    Mais ta solution a l’avantage d’être du code à mettre dans WP et que tu crées ta compression maison. A tester encore et encore, je le ferais, promis !

  7. @Julio : Dans l’hypothèse que ob_gzhandler fonctionne chez moi, je suis septique sur un point. Est-ce que la compression va garder les commentaires conditionnels pour IE ?

    Parce que mon script prend ce paramètre en compte : il supprime tous les commentaires HTML sauf les commentaires conditionnels.

  8. Pas sur que niveau performance tu y gagnes si tu n’as pas de réel plugin de cache derrière.
    En effet ton traitement PHP est certainement plus long que le gain apporté pour le navigateur d’avoir un html minifié.

  9. Jb : ah oui ça implique de mettre en cache des fichiers HTML derrière. Enfin je n’en vois l’intérêt que comme ça.

    @Jonathan: j’avais un script dans un coin pour minifier du CSS… je cherche.
    Et voilà :

    function minCSS( $string ) {
    
    /* Kill comments */
    	$string = preg_replace('!/*.*?*/!s','', $string);
    	$string = preg_replace('/ns*n/',"n", $string);
    
    	/* Minification */
    	$string = preg_replace('/[nr t]/',' ', $string);
    	$string = preg_replace('/ +/',' ', $string);
    	$string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);
    
    	/* Remove Trailing Semicolon */
    	$string = preg_replace('/;}/','}',$string);
    
    	return $string;
    }
    

    Ce n’est pas entièrement de moi mais je n’ai plus la source, sorry :/
    Testé avec plein de choses tordues en CSS3, ça semble tourner rond.

  10. @Geoffrey: Le code me semble correct non ? Au pire, fait un lien pastebin :)

    En tout cas, merci pour la piste du côté compression d’un fichier CSS !

  11. Merci Jonathan pour l’astuce et meilleurs voeux à toi pour ce millésime 2013.

    Finalement quand o regarde tes quelques lignes de code, c’est plutôt simple et bien plus léger que rajouter un (énième ^^) plugin à notre WP.

    Je vais tester ça de ce pas, d’autant plus qu’on sait tout qu’un site qui se charge plus rapidement est mieux indéxer !

  12. @JB : Il faut faire des tests, mais je reste septique sur un « fort » impact. Je mis en place le script sur un site en production et je n’ai pas ressenti un ralentissement du site.

    Par contre, on est d’accord qu’un WP Super Cache ou autre plugin de cache, ça ne fera pas de mal.

    @Eric : En effet, le temps de chargement est un élément qui est pris en compte par Google pour le classement dans les SERP.

  13. Pour les CSS et les JS, je déconseille votre méthode (même si le code est très bien). Ce type de fichier doit toujours être minifié, et ce n’est pas un script qui doit le faire mais le développeur avant le lancement du site. Car là, vous forcer le calcul de la « minification » de ces fichiers alors que l’on pourrait télécharger directement des fichiers déjà minifiés.

  14. @Daniel : Je suis d’accord avec toi. Par contre, je pense qu’il faut tester un script qui check en fonction de la date de dernière modification du CSS et la mise en place d’un transient pour une mise en cache.

  15. Merci pour ce bout de code, cependant il pose de problemes avec le JS:
    – les pubs google ne s’affichent plus sur mon site quand je l’utilise
    – le slider ne fonctionne plus non plus

    je pense que pour le slider c’est à cause du double slash pour le cdat

    avant il y a un retour à ligne:
    //<![CDATA[
    jQuery

    et après pas de retour à la ligne :
    //<![CDATA[jQuery ….

    du coup ça commente tout le code.

    Du coup le supprime en attendant de trouver une solution

  16. @Djib’s : En effet, les CDATA, sont supprimer :/ Il faudrait modifier le regex pour ne pas qu’ils soient effacés.

    Je vais voir ce que je peux faire à ce niveau là !

  17. @Djib’s : Normal qu’il ne s’affichat pas, c’est un commentaire HTML ,) Fallait le mettre dans une balise pre.
    Je me suis occupé de la modification de ton commentaire et merci pour le code.

  18. Pour ne pas prendre en compte la minification des balises script, le code devient beaucoup plus compliqué pour que je puisse le mettre dans l’article.

    J’ai trouvé une classe PHP qui permet de minifier les fichiers HTML d’un site WordPress. Il est possible de décider si l’on doit minifier ou non les balises script et style pour éviter certains problèmes (comme les CDATA).

    Vous pouvez télécharger le code en cliquant directement sur le lien suivant : http://dvslabs.googlecode.com/files/minifier-script-en.txt

    En fonction de votre besoin, choisissez soit mon code pour un nettoyage efficace, soit la classe PHP pour des contraintes plus pointues.

  19. Au final je pense qu’il ne faut pas supprimer les retours à la ligne car ça fait foirer parfois et aussi que je détesterais voir le source d’un site en une seule ligne, jamais vu ça de ma vie.
    Aussi il ne faut pas supprimer les tabulations car j’indente mon code avec.
    Il ne faut pas supprimer les doubles espaces, j’indente aussi avec.
    Je veux bien supprimer les commentaires mais comme ça fait foirer les CDATA, il ne faut pas.
    Les commentaires HTML je les ai supprimé, j’avoue ne pas m’en servir.
    mmm me reste pas grand chose et tout ça va passer dans 1 preg_replace, 1 str_replace et possiblement plusieurs str_replace encore.
    C’est bon en perf tout ça sur autant de Ko d’une page ?
    :O
    J’ai trouvé ça aussi : http://code.google.com/p/htmlcompressor/ et ton lien est pas mal, mais minifier le HTML bon, ok mais soft, merci de ne pas faire des source d’une ligne :/
    Pour démo http://html5boilerplate.com/ a son HTML minifié, le source est propre.

    Sinon pour votre gouverne, habituellement quand on ouvre un ob_start() il faut le fermer, avec un ob_end_flush ou un ob_end_clean mais ici le code ne le fait pas.
    Pourtant il a bon ce Jo mais il ne dit pas pourquoi il ne ferme pas (le sais-tu ? ;p)
    En fait, WordPress ajoute et force la fermeture de tout les ob_start grave à wp_ob_end_flush_all() sur le hook « shutdown » qui est le dernier hook WP.
    See you !

  20. @Julio : Pour une fois, je ne sais pas si je dois prendre ton début de commentaire sur un ton ironique ou pas (tu me dira !).

    Pour avoir mis en place ce script sur un site en production, je n’ai eu aucun problème !

    Après la classe que j’ai indiqué dans précédent commentaire permet d’aller plus loin : elle ne minifie pas les balises texterea et pre. Je pense que je vais mettre à jour l’article en ajoutant une partie sur cette classe.

    Je ne vais pas t’expliquer l’intérêt d’optimiser le poids de nos pages, CSS, JS et images car je pense que tu connais déjà la réponse ;) Et puis quelques octets en moins (même minime) j’ai toujours bon à prendre pour les mobiles et tablettes !

    Le code source sur une ligne, à vrai dire je ne code pas pour que les autres puissent comprendre mon code =D Parce que dans ce cas là, on ne minifie pas nos fichiers CSS et JS ;) Si vraiment tu veux voir à quoi ressemble l’HTML d’un site minifié, voici un outil qui pourra te satisfaire : http://jsbeautifier.org/

    PS : Merci pour l’explication sur le hook shutdown :)

  21. @Alain : Si dans votre cas, aucune des deux solutions ne fonctionnent pas, je vous recommande de passer via un plugin comme WP-Minify.

    Ca sera un peu plus lourd, mais cela répondra à votre besoin.

  22. Je vais essayer également car j’utilise wordpress non pas pour publier des articles, mais pour diffuser des diaporamas et des cartes de voeux sur 2 sites différents. Le site dédié aux pps est particulièrement lourd et c’est une vrai usine à gaz ;) Des améliorations de ce type sont donc les bienvenues :)

  23. Pas mal du tout ce petit code. C’est vrai que j’ai pour habitude d’utiliser le plugin « W3C Cache » mais avec un bout de code c’est quand même mieux. Moins de poids à cause du plugin, plus d’optimisation. Merci pour le partage :)

  24. Moi j’utilise SuperCache, et malgré cela j’ai encore des resultats assez bas dans pingdom (score de 64). Donc je vais essayer de mettre en place votre bout de script : merci !

  25. Je n’ai pas eu le courage de lire tous les messages, mais ob_start('ob_gzhandler') c’est de la compression GZIP serveur/browser ça n’a rien à voir avec la minification puisque les fichiers vont etre compressés par le serveur et décompressés par le browser

  26. En complément certaines personnes indiquent des problèmes avec AdSense.
    En fait le code adsense comprend <!-- et --> ce qui une fois minifié fait sauter le code pour le navigateur
    Il vous suffit juste d’oter la premiere chaine <!-- et le tour est joué ;)

  27. @Fabien : Autant mettre en commentaire toute la ligne : $html = preg_replace('/<!--(?!s*(?:[if [^]]+]|!|>))(?:(?!-->).)*-->/s', '', $html);

  28. Aucun intérêt si la compression Gzip est active sur le serveur HTTP ?

    La page transitera entre le serveur et le client dans un format compressé GZIP, de fait pas de notion d’espace ou de retour à la ligne. L’algo étant assez intelligent pour faire le job.

    En fait, le seul gain de performance que l’on peut esperé, c’est l’interpretation par le navigateur, et je pense que l’impact doit être proche de zéro.

    Au final, le code augmente la consommation CPU de PHP, au lieu de profiter de la compression du serveur HTTP (codé en C et donc plus rapide)… Donc doublon.
    https://en.wikipedia.org/wiki/Gzip

    A part générer des effets de bords, je pense que le gain est tout simplement nul, voir négatif.

  29. Julio Potier
    Sinon pour votre gouverne, habituellement quand on ouvre un ob_start() il faut le fermer, avec un ob_end_flush ou un ob_end_clean mais ici le code ne le fait pas.
    +1

    Amaury
    A part générer des effets de bords, je pense que le gain est tout simplement nul, voir négatif.
    +1

    Autre version :
    dans « function.php » theme ou child theme
    possibilité de changer true false dans // Settings

    EDIT Admin : J’ai cité la même class plus haut dans les commentaires => http://dvslabs.googlecode.com/files/minifier-script-en.txt

  30. @Mr Green: Pour votre gouverne, WordPress ferme automatiquement la mise en tampon dans son dernier hook. Donc c’est normal qu’on n’ajoute pas ob_end_flush ou un ob_end_clean

    Pour votre code, c’est exactement la même class que j’ai cité plus haut dans les commentaires !

  31. Merci pour ce bout de code si utile. Et pour les fichiers CSS et JavaScript, est-ce qu’on doit modifier au niveau du code l’appel au HTML par CSS ou JS ou quoi?

  32. Bonjour,

    Bravo pour ce snipet génial.

    Un retour important pour les sites en prod’ : il ne prend pas en compte les commentaires de ligne des javascripts intégrés directement dans une page (double slashs : //…). Aucun problème pour les commentaires sur plusieurs lignes (/* … */).

  33. bonjour

    novice dans wordpress j’ai essayé votre code .

    je me suis peut être trompé quand je l’ai mis .
    voilas se que j’avais a la place de de mon site
    Parse error: syntax error, unexpected $end in /homez.527/locationtd/www/wp-content/themes/twentyeleven/functions.php on line 756.

    merci de votre aide

  34. bonjour Jonathan

    merci de votre réponse

    OK corrigé le code mais j’ai toujours sur le site DareBoost minifier les fichiers

    que dois je faire

    merci

  35. merci bcp pour le code je vais tout de suite l’intégrer dans mon fichier functions.php et j’espère que ça va aider mon site à ouvrir rapidement psk il s’ouvre très lentement :(

  36. Hello

    Petite question. Ce code optimise t-il encore plus Wp rocket ? ou ça va faire doublon et ne rien apporter de plus à ce que m’apporter déjà (beaucoup beaucoup) WP Rocket.

  37. @alex: La minification HTML est une option dans WP Rocket. Donc si vous avez ce plugin, ce script ne vous servira à rien.

  38. Bonjour, dois-je copier colle ce code dans le fichier functions.php de mon thème principal, ou celui de mon thème enfant ?

    J’ai essayé les deux mais je ne vois aucune différence au niveau du code ?

    Merci

  39. @Jonathan : Est ce que cette fonction est compatible avec WP Cache Machine ?

    J’ai mis le code en place mais l’accès à mon site est bloqué, ça mouline, mouline comme si je n’avais plus d’accès à internet, pour ensuite avoir un message sur une page blanche avec 504 Gateway Time-out – The server didn’t respond in time.

    Merci d’avance pour votre réponse.

  40. Bonjour,
    je ne suis pas informaticien.
    j’ai collé le code dans les dernières lignes dans le fichier que tu avais indiqué.
    Et depuis je n’ai plus accés à mon compte wordpress ni à mon site. Une page blanche s’affiche.
    je ne sais absolument pas comment résoudre ce problème.
    Je suis vraiment en panique. Rien ne marche.
    Je t’en serais vraiment reconnaissant si tu pouvais m’apporter une solution le plus rapidement possible.

  41. @Philouseb: Aucune incompatibilité à prévoir avec le script WP Cache Machine.

    L’erreur qui vous indiquez correspond plutôt à une erreur serveur et non PHP.

  42. Bonjour à tous,

    Pourquoi ne pas tout simplement dupliquer le fichier style.css le nommé style-editor.css pour garder l’original et de minifier le fichier style.css ? Est-ce une bonne ou une mauvaise pratique ?

  43. Bonjour Jonathan,

    effectivement je chercher sur google comment optimiser un site wordpress et je suis tombé ici j’avais mon idée en tête… bref J’ai écrit trop vite !