Compresser TinyMCE

Hier, en abordant le sujet de GZip, j'ai démontré comment on pouvait facilement réduire le volume des données transférées du serveur au client, à l'aide de la compression HTTP.

Pour accélérer la vitesse de chargement du contenu d'une page web, on peut principalement faire deux choses :

• minimiser les librairies, le CSS et le HTML en les compressant
  
• réduire au maximum le nombre de requêtes HTTP

Pour ce dernier point, on peut s'inspirer de ce que Yahoo! et Dojo font. Le portail Yahoo! utilise une technique qui permet de charger en un seul fichier des icônes groupés en un unique fichier graphique. Donc une seule requête HTTP, un seul fichier en cache qui peut être réutilisé constamment en ne faisant afficher que la zone correspondante à l'aide du CSS. À titre d'exemple, le fichier suivant pèse seulement 31 kb et contient au delà de 130 icônes. Un calcul rapide permet de constater qu'en moyenne, 1 kb peut contenir 4 icône! Essayez de faire mieux ;-)

Sinon, à l'image de Dojo Toolkit qui possède un système de compression (ShrinkSafe) des librairies qui permet de construire des builds personnalisés qui contiennent uniquement ce qu'on a besoin, le Rich Text Editor TinyMCE possède aussi un compresseur propriétaire pour son composant. À la base, comme il est lourd à télécharger (surtout si plusieurs extensions sont appelés), on peut accélérer le chargement à la vitesse de l'éclair en combinant les deux procédés : compression GZip et réduction des appels HTTP (pour GZip, référez-vous à mon article d'hier).

Une fois GZip en marche, on voit immédiatement descendre la taille de tout ce qui est relié à TinyMCE descendre de 285 kb à 95 kb, ce qui est déjà plus respectable. En utilisant le noyau compressé offert par son éditeur Moxiecode, on peut atteindre une réduction de 75% plus petit. Pour le mettre en application, voici les quelques étapes simples à suivre :

• Installez TinyMCE normalement (j'ai écrit un post sur le sujet dans le passé)
• GZip doit être activé sur le serveur et l'extension zlib ne doit pas être actif pour que ça fonctionne
• Téléchargez le compresseur pour le langage de votre choix (dans mon cas PHP)
• À partir de l'archive Zip, récupérez le fichier tiny_mce_gzip.js et tiny_mce_php et les déposer le répertoire d'installation de tiny_mce (au même niveau que le script tiny_mce.js)
  
• Dans votre page, modifiez le chemin du script qui pointe sur tiny_mce.js pour qu'il pointe vers la version tiny_mce_gzip.js
• Le fichier PHP sera utilisé pour rassembler les différents scripts en un seul fichier et créera un fichier .gz en cache dans le même répertoire pour chaque configuration demandée
• Juste avant l'appel d'initialisation du composant RTE ( tinyMCE.init() ), placez le bloc de script suivant (selon votre configuration nécessaire) :

<script type="text/javascript">
tinyMCE_GZ.init({
   plugins : 'style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,'+
   'searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras', 
   themes : 'advanced',
   language : 'fr',
   disk_cache : true,
   debug : false
});
</script>

• Remarquez le nom de la fonction : tinyMCE_GZ.init()
  
• Ce bloc de code doit paraître avant le script d'initialisation et doit être positionné dans un bloc script séparé
• Testez le chargement à nouveau. Firebug indique que le RTE s'est effectué avec seulement 19 kb !