Comment le plugin accélère t'il votre site ?
Considérons que le temps total de chargement d'une page peut être divisé en 2 parties :
- En premier lieu, après que le serveur ait reçu la requête en provenance d'un navigateur, le CMS (Content Management System = Système de gestion de contenu = Wordpress, Joomla..) va générer une page HTML basé sur les requêtes et envoie ensuite le résultat au navigateur du visiteur,
- En second lieu, il faut considérer alors le temps qui est nécessaire au navigateur du visiteur pour "lire" la page en décodant le html et en téléchargeant tous les fichiers et ressources de la page appelés dans la page générée.
Le plugin est chargé de réduire le temps nécessaire dans cette 2e parties en interceptant le HTML envoyé du serveur en optimisant le HTML et les fichiers qui doivent être fournis pour la page avant que ceux-ci ne soient envoyés au navigateur du visiteur.
Le plugin va pouvoir réaliser plusieurs optimisations conformément aux réglages réalisés dans le plugin. Ces optimisations réduisent alors le nombre de requêtes HTTP que le navigateur réalise pour télécharger toute la page, et réduit alors le poids total de la page, ceci rendant automatiquement les pages plus rapides (il y a moins de choses différentes à télécharger puisque celles-ci sont optimisées), le serveur ayant également moins de "travail" à faire : la bande passante étant également réduite.
La fonction principale du plugin est donc de combiner les fichiers CSS et les fichiers Javascript ensemble pour réduire le nombre de requêtes nécessaire pour que le visiteur ait tous les morceaux de la page (Une simple page d'un CMS peut avoir besoins de dizaines de fichiers css et javascript : un pour la page, un pour un module, un pour un menu, etc... il n'est pas rare d'avoir 40 à 100 fichiers à charger sur une page pour avoir toute la page). Le plugin offre également des fonctions supplémentaires comme un générateur de Sprites, un chargement décalé des images (Lazy load), le support des CDNs et domaines sans cookies (cookieless domain), l'optimisation de l'ordre de livraison des fichier css (pour fournir les fichiers css les premiers demandés dans la page en premier) et l'optimisation des images (pour réduire le poids d'une image sans perdre en qualité d'image).
Le CMS va alore générer la page HTML a envoyer au visiteur via un script PHP qui sera exécuté coté serveur. Le plugin va pour cela intercepter le contenu AVANT qu'il ne soit livré, va l'optimiser, puis ensuite l'enverra au visiteur sous forme optimisée. Le plugin utilise différentes "expressions régulières" lui permettant de détecter les fichiers CSS et Javascript, va les supprimer de la page pour les réorganiser et les fournir de manière optimisée par la suite.
Un exemple de lien vers un fichier Javascript dans une page ressemblerai à ceci :
Exemple 1.1. Un lien typique vers un fichier Javascript
<script type="text/javascript" src="/templates/beez/javascript/md_stylechanger.js"></script>
JCH Optimize va utiliser ces liens pour accéder au contenu des fichiers et va "compresser" leurs contenus, les combiner ensemble, puis les stocker en un seul et unique fichier qui sera gardé en cache. Le plugin va alors générer un lien vers ce fichier compacté et l'intégrer dans la page à la place des différents liens qu'il a relevé et supprimé. Le lien généré pourra être différent suivant le CMS utilisé.
L'exemple suivant vous montre à quoi pourrait ressembler ce lien sur différents CMS :
Example 1.2. JCH Optimize génère un lien différents suivant les CMS
Joomla!
<script src="/media/plg_jchoptimize/assets/gz/1/0/2ee14a780ae90820956b94bd8e8ced79.js"></script>WordPress.
<script src="http://localhost/wp-content/plugins/jch-optimize/assets/wp-content/plugins/gz/1/0/3238d2219d061b694aa587964e1c391f.js"></script>Magento.
<script src="/js/jch_optimize/assets/gz/30/0/1b6d7e1158492ee20c302713697fb8e9.js"></script>Drupal.
<script src="/sites/all/modules/jch_optimize/assets/sites/all/modules/nz/30/0/d5971aff44c89a0657dbced470282ab7.js"></script>
A partir de là, quand le HTML est envoyé au navigateur d'un visiteur et que le navigateur interprète le HTML, il ne voit alors qu'un seul et unique lien pour pour les fichiers CSS et un seul lien pour les fichiers Javascript à la place des dizaines de fichiers appelés normalement dans la page. Il est alors relativement simple de comprendre comment le plugin va améliorer la rapidité générale de la page et réduire les "allez-retours" nécessaires pour afficher votre page : avec un ou deux appels dans votre page HMTL pour obtenir tous les fichiers, la page est chargé beaucoup plus vite.
Ceci est une explication simplifiée de comment le plugin travaille mais vous donne une idée générale de ce qu'il réalise. Combiner les fichiers peut donc être considéré comme la fonction principale du plugin, fonction disponible sur toutes les versions du plugin (aussi bien la version gratuite que la version Pro). Toutes les autres fonctions d'optimisation sont réalisées de la même manière : des "expressions régulières" qui vont identifier et intercepter les éléments à optimiser et les modifier avant qu'ils ne soient envoyés au visiteur.
Ces optimisations pourraient sembler quelque part inutiles : on prend des ressources pour calculer un nouveau fichier, ce qui fait perdre du temps.. On prend d'un côté pour en redonner de l'autre... Oui, mais le plugin a été développé dans les règles de l'art pour permettre de réaliser ces optimisations en un temps record. De plus, le plugin ne fait pas cette optimisation à chaque chargement mais une fois pour toute et le stocke en cache périodiquement. La plupart du temps, l'optimisation est réalisé en environ 2 secondes puis les fois suivantes en environ 100 millisecondes (sur un hébergement classique).