Cette page vous explique les réglages techniques du plugin JCH Optimize : elle ne comprend que le détails de chaque option.

Onglet Réglages automatique du plugin JCH Optimize

Les réglages automatiques pour la fonctionnalité "Combiner les fichiers CSS et Javascript" configure les options automatiquement (si vous optez pour un réglage automatique bien sur !)

ATTENTION !

N'essayez pas de configurer les options dans l'onglet "Réglages automatiques" manuellement si vous ne savez pas exactement ce que vous faites ! Ces options sont laissées accessibles parce qu'elles sont utiles en cas de dysfonctionnement pour régler le problème rencontré. Avant de demander de l'aide parce que le plugin ne fonctionne pas correctement, assurez-vous que vous avez bien utilisé un réglages automatiques sans l'avoir modifié manuellement !!

Les tableaux suivants vont vous permettre de voir comment le réglage automatique gère l'optimisation (vous trouverez une explication détaillée de chaque option en dessous de ces tableaux de synthèse) :

Réglages automatique "Minimal" (Minimum)

Réglages disponibles dans la version PRO du plugin pour ce niveau

Réglages automatique "Intermédiaire" (Intermediate)

Réglages disponibles dans la version PRO du plugin pour ce niveau

Réglages automatique "Moyen" (Average)

Réglages disponibles dans la version PRO du plugin pour ce niveau

Réglages automatique "Deluxe" (Deluxe)

Réglages disponibles dans la version PRO du plugin pour ce niveau

Réglages automatique "Super" (Premium)

Réglages disponibles dans la version PRO du plugin pour ce niveau

Réglages automatique "Optimal" (Optimum)

Réglages disponibles dans la version PRO du plugin pour ce niveau

Détails des options relatives aux réglages automatiques

Le détail de chaque option est donné ci-dessous. Vous ne devriez normalement pas avoir de souci pour utiliser ces réglages puisqu'ils sont automatiques. Ne tentez pas de modifier manuellement ces réglages pour configurer le plugin ! Ces options devraient normalement se trouver dans une section "cachée" (vous devez cliquer sur la section pour la montrer) sous les réglages mais restent disponibles en cas de besoin si vous avez des dysfonctionnements sur votre site.

Combine ensemble les fichiers CSS

Le plugin utilises les "expressions régulières" pour identifier tous les liens vers les fichiers css dans le code HTML. Le contenu de tous ces fichiers est alors combiné dans un fichier unique puis sauvegardé dans le cache. Un lien est alors généré pour accéder à ce fichier combiné en remplacement de tous les appels séparés des fichiers css.

Combine ensemble les fichiers Javascript

La même procédure que celle pour les fichiers Css est appliquée aux fichiers Javascript. Tous les contenus des fichiers Javascript sont combinés dans un fichier unique puis mis en cache.

GZip (compresse) les fichiers Javascript et Css

Cette option va permettre de compresser et agréger les fichiers CSS et Javascript avec le compresseur GZip pour un téléchartement optimisé. Votre serveur doit absolument prendre en charge la compression GZip pour que cela fonctionne : dans le cas contraire, même si l'option est activée, cette option restera sans effet.

Minifie le code CSS

Cette option va retirer tous les "commentaires" dans le code (note : les commentaires sont utilisés par les développeurs pour documenter leur code et ne sont jamais exécutés, ils prennent donc de la place "pour rien" au niveau de la génération de la page), les espaces inutiles (dupliqués), les tabulations (utilisé pour "indenter le code" afin de permettre une meilleure lisibilité) et les passages à la ligne dans le code Css. Cette option permet donc de réduire la taille du code CSS de manière à éviter de consommer de la bande passante inutilement en chargeant des contenus qui ne sont jamais affichés sur le site. Activer cette option permettra également d'activer l'option secondaire "Inclure les fichiers css incorporés dans l'HTML" quand le HTML est "minifié".

Minifie le code Javascript

Réalise exactement la même action que pour "minifie le code CSS" mais pour les fichiers Javascript.

Minifie le HTML

Le code HTML sera "minifié" avec cette option : les espaces inutiles et les commentaires seront supprimés pour réduire la taille finale du fichier. Si l'option "Minifier le CSS" et "Minifier le Javascript" sont activées, alors toute déclaration CSS et Javascript incorporée dans ces blocs seront également minifiés.

(Defer Javascript) Diffère l'exécution du Javascript (attend la fin du chargement de la page avant d'exécuter le javascript)

Cette option ajoute un attribut "différer" ("defer" an anglais) aux liens Javascript. Ceci permet de suspendre l'exécution du code Javascript dans le fichier Javascript combiné jusqu'à que toute la page soit chargée sur le navigateur du client (du visiteur). Si cette option n'est pas activée et que l'attribut "Async" n'est pas nativement présente dans le code original, le script sera alors chargé et lancé alors même que la page n'est pas forcément entièrement chargée. Vous pouvez vous rendre compte alors de ceci si vous allez sur un site comme "GTMETRIX" qui vous le signalera sous le terme "Render-blocking" (la page est bloquée par l'exécution d'un script qui l'empêche de s'afficher entièrement et rapidement) et vous pourrez voir alors qu'il vous est conseillé d'utiliser soit "Async" soit "Defer" pour votre code Javascript.

<script type="text/javascript" 
src="/plugins/system/JCH_Optimize/gz/0e1482b90abc12b1ba50a3f961030833.js" defer="defer">

Gestion des fichiers combinés

Cette option offre 3 niveaux pour l'aggrégation des fichiers CSS et Javascript et l'intégration dans votre code HTML pour permettre d'assurer que vos scripts continuent de fonctionner après l'optimisation :

1 - Préserve l'ordre d'exécution initial (par défaut). Ceci va séparer le fichier combiné autour de tous les scripts et fichiers qui ont été ignoré pour garantir l'ordre d'exécution original des scripts dans la page.

2 - Combine les fichiers en un fichier unique : cette option va permettre de générer un fichier unique pour le CSS et le Javascript et l'appeler juste sous la balise titre de votre page HTML au dessus du fichier combiné pour le Javascript. Ceci sera mis en place sans prendre en compte les exclusions éventuelles que vous auriez pu déclarer dans le processus d'aggrégation.

3 - Place le Javascript en fin de fichier : Cette option va place le fichier Javascript combiné tout en bas de la page juste avant la balise de fermeture de "body". Le fichier combiné Css sera lui placé juste en dessous de la balise "titre" dans la section "head" de la page.

Réglage Exclusion automatique - Inclut toutes les extensions

 Par défaut, tous les fichiers d'extensions tierces parties sont exclues du processus d'aggrégation. Les fichiers chargés depuis les domaines externes sont également exclus : seuls les fichiers système et les fichiers du template sont combinés. Si cette option est activé, alors ces fichiers normalement exclus sont également intégrés au processus d'optimisation et ajoutés au fichier combiné.

Réglages disponibles dans la version PRO du plugin pour ce niveau

Les options suivantes ne sont utilisables que si vous utilisez la version Pro du plugin.

Remplace les appels "@imports" dans les fichiers CSS

Si cette option est activée, le plugin va alors rechercher les contenus de tous les fichiers appelé avec la méthode "@import" dans le Css et va remplacer le "@import" par le contenu véritable (donc le code appelé). Ceci va permettre d'éliminer une requête HTTP qui est normalement exécutée pour aller chercher le fichier qui est importé, ceci optimisant d'autant la page. Ceci est exécuté récursivement, donc si le contenu (les articles, modules, etc..) lui-même contient des appels "@imports", ils seront traités de la même manière.

Inclure dans le traitement le PHP et les fichiers externes

Cette option permet au plugin de travailler avec le CSS dynamiquement appelé dans du code PHP ou depuis des domaines externes. Cette option ne peut fonctionner que si votre serveur d'hébergement fonctionne avec "cURL" ou si votre version de PHP a l'option "Allow_url_fopen" activée.

Inclure les fichiers CSS incorporés (inline)

Le CSS incorporé dans vos blocs seront supprimés et incorporé alors dans le fichier CSS combiné. Ceci est très utile pour garder l'ordre d'exécution du CSS (Ordre de priorité du CSS : la dernière règle donnée priment sur les autres sauf exception). De plus, cette option va permettre d'aider à "Optimiser la livraison du css" aux visiteurs si cette option est par la suite activée.

Inclure les fichier Javascript incorporés (inline)

Les blocs de de code Javascript incorporés à votre contenu seront supprimés et ajouté au fichier combiné. Ici comme pour le css, il est même encore plus important de pouvoir préserver l'ordre d'exécution des scripts. Ceci permet de plus facilement obtenir un résultat permettant de combiner le javascript, le positionner en bas de page et lui ajouter une option "defer" ou "Async" pour éviter d'avoir un phénomène de "render-blocking" (blocage du rendu de la page à cause d'un script) comme vous pouvez également le voir dans des outils comme PageSpeed.

A noter que les scripts incorporés contenant le code "document.write" sont ignorés par cette fonction du plugin.

Rechercher également dans "Body"

Par défaut, le plugin fait une recherche dans la section "head" de la page HTML pour trouver le CSS et le Javascript. Cette option permet d'étendre la recherche à la section "body" de votre page HTML. Ceci est ici encore une possibilité de garder la cohérence d'exécution de votre code Javascript dans vos pages et correspond à une technique pour éviter le "render-blocking".

Charger le javascript de manière asynchrone

L'attribut "Async" est ajouté au code Javascript afin de charger le Javascript de manière asynchrone pour éviter les phénomènes de "render-blocking" et améliorer la rapidité de vos pages. Cette fonctionnalité est associée au HTML5 : le HTML5 n'étant pas pris en charge par tous les navigateurs existant, cette option est normalement utilisée conjointement avec l'option précédente "defer" de manière à couvrir tous les navigateurs.

NOTE : pour en savoir plus sur les notions "Async" et "Defer", consultez la page : https://www.alsacreations.com/astuce/lire/1562-script-attribut-async-defer.html