Formation, Conseils, Sites Internet

Nous contacter : contact@xlformation.com - 06 25 58 02 97

Combiner les fichiers CSS et Javascript

Combiner efficacement et correctement les fichiers CSS et Javascript en un seul fichier peut être légèrement plus compliqué que cela en a l'air et le processus fonctionnant sur un site peut très bien ne pas fonctionner sur un autre.

En effet, un réglage fonctionnant sur un site peut très bien ne pas fonctionner sur un autre si on prend en compte la diversité possible de composants, plugins, modules, chargeant des fichiers CSS et Javascript différents et dans un ordre variant d'un site à l'autre.

Dans tous les cas, configurer toutes les options du plugin peut être une tache ardue, particulièrement pour les utilisateurs n'étant pas des techniciens, et c'est pour cela que le plugin est livré avec 6 niveaux pré-configurés pour faciliter cette tache. En testant chaque niveau d'optimisation, l'utilisateur peut alors facilement sélectionner le mode qui fonctionne le mieux avec son propre site sans qu'il soit nécessaire de faire des réglages fins dès le départ.

 

Ces options sont disponibles dans le 2e onglet et sont présentées comme ceci :

Réglages automatique

Les réglages automatiques sont 6 réglages préconfigurés qui vont appliquer pour chaque réglage un lot de règles et d'optimisation de manière à simplifier l'utilisation du plugin. Ces réglages vont déterminer comment les fichier CSS et Javascript doivent être traités et combinés ensembles.

 

JCHOptimize3 1

 

Ces réglages vont donc déterminer (pour chacun des 6 boutons) les règles à appliquer aux fichiers à combiner et quels liens insérer dans le fichier final.

Les réglages automatiques vont configurer les paramètres à activer pour combiner les fichier CSS et javascripts, déterminer quels fichiers sont combinés puis "minifier" le fichier final et le HTML, pour enfin terminer par ajouter les liens vers fichiers combinés à ajouter dans le HTML.

Les réglages individuels préconfigurés par les réglages automatiques apparaissent alors dans un section dans ce même onglet au dessous, suivant le pré-réglage choisi.

 

Niveau de réduction ("minification")

 

Si le réglage "minification HTML" est activé, ce réglage détermine alors le niveau à appliquer pour réduire la taille des fichiers. Il y a 3 options possible pour ce réglage :

1 - Basique : tous les espaces blancs (espaces, saut de ligne, etc..) sont réduit à un seul espace, si une ligne de code est séparée sur plusieurs lignes, celle-ci est alors ramenée à une seule ligne à la place.

2 - Avancé : en plus des optimisations appliquées par le niveau basique, tous les commentaires HTML sont supprimés et les espaces sont supprimés des blocs HTML (Exemple : les "<div>" n'ont plus d'espace avant et après, les balises "<meta>" sont cachées).

3 - Ultra : en plus des optimisations précédentes, les attribut HTML répété comme par exemple "text/javascript" sont supprimés et les guillemets sont supprimés de certains attributs si vous n'utilisez par exemple pas le XHTML. Par exemple, id="login-form" devient alors id=login-form.

 

Utilisation de l'option "réécriture des urls"

 

1 - Auto : sélectionné par défaut, cette option fait que le plugin tente alors de détecter si le site et le serveur utilise une réécriture des urls et ajuste alors automatiquement le réglage sur "Oui" ou "Non" suivant ce qui est détecté.

2 - Non : Si la réécriture des urls n'est pas utilisé, les liens générés pour appeler les fichiers combiné seront codé par exemple de la manière suivante sur Joomla! :

/media/plg_jchoptimize/assets2/jscss.php?f=d59eb7c31bb5db3d6836588a8771c109&type=js&gz=gz&d=1&i=0

3 - Oui.  Quand la réécriture d'urls est activée sur le site, le lien généré sera alors codé de cette manière sur Joomla! :

/media/plg_jchoptimize/assets/www-jchoptimize/gz/1/0/a25144b9a665ba4f60e0ae89c835d961.js

 

L'avantage d'utiliser la réécriture des urls est que, au delà de l'aspect esthétique que l'on obtient pour les urls du site, cela favorise la mise en cache du proxy puisque certains serveurs DNS ou proxy ne mettront pas en cache un nom de fichier s'il contient une requête.

4 - Oui (sans l'option +FollowSymlinks) : cette option va permettre au plugin d'utiliser les règles du fichier ".htaccess" pour réécriture les urls. Certains serveur demande également que l'option "Options +FollowSymLinks" soit intégrées dans le fichier htaccess mais cela peut sur certains serveurs générer des erreurs. Dans ce cas, c'est cette option qu'il faut alors utiliser.

Avec l'option "1-Auto", le plugin devrait normalement être en mesure de détecter correctement si ce réglage est à utiliser et appliquer le meilleur réglage à votre place. Vous pouvez par contre toujours si vous le souhaitez passer outre le réglage automatique pour appliquer le réglage qui vous semble le mieux pour vous.

>Durée de vie (en jours)

Ce réglage permet de spécifier la durée de vie des fichiers de cache générés par le plugin en terme de jours. Après que cette durée soit expirée, le plugin régénère alors un fichier de cache complet. Par défaut, la durée de vie est fixé à un seul jour mais vous pouvez augmenter cette valeur si la génération de ces fichiers de cache génère des difficulités sur votre hébergement. Dans ce cas, vous trouverez dans cette documentation les moyens de gérer ces difficultés.

Mentions légales et Politique de confidentialité - Politique concernant les cookies du site - Plan du site

Ouvrir la barre de gestion des cookies

© 2024 XLFormation. Tous droits réservés. Design et conception XLFormation - XLCréation