Bonnes pratiques JS/CSS des modules et performances

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.2.1
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour à tous,

Je voulais sonder un petit peu les visiteurs du forum par rapport à la structure du code HTML et le placement des éléments CSS/JS dont nécessitent les modules.

Actuellement, chaque module insère les fichiers dont il a besoin, via le filesystem (ex: Gallery) ou la DB (ex: FormBuilder).

C'est pratique pour les intégrateurs sans grande connaissance de ce qui se passe au niveau du code, mais lorsqu'on regarde d'un peu plus près, cela n'aide pas toujours pour les recommandations en terme de performances.

Il faut donc "mettre les mains dedans" et retravailler le tout. Mais qu'est-ce qui est le mieux ?

Si je résume, les "critiques" de PageSpeed ou de YSlow pointent régulièrement du doigt :
- L'ordre des scripts (CSS doit être avant JS)
- Le nombre de css/scripts élevé (combiner les ressources)
- Le poids des scripts, pas toujours optimisé et certainement pas avec les versions livrées par les modules.
- Placer les scripts JS en bas de document
- etc

Donc en conclusion, si on veut améliorer tout cela, on est obligé de remonter ses manches et d'effectuer quelques opérations soi-même, mais qui "cassent" un peu la séparation des ressources entre les modules, bien pratique lorsqu'on veut retirer un module.

En ce qui me concerne, lorsque par exemple j'utilise le module Gallery, je fais mon choix de librairie, je place le CSS dans les CSS du gabarit afin qu'il soit combiné et compressé par cms_stylesheet. Ensuite je place le fichier JS (et le code JS qui appelle les fonctions JS d'animation de la galerie) en bas du template Smarty (directement ou via un bloc de contenu global) afin de respecter la recommandation.

C'est efficace en terme de performances, mais moins pour la maintenance (ce qui dans mon cas ne pose pas de souci étant donné que je sais ce que je fais).

Quel est votre retour par rapport à ces pratiques ? Faites-vous autrement ? Mieux ? Qu'en pensez-vous ?

Heriquet
www.web-ep.be - Développeur Web Freelance - Développeur/Intégrateur CMS Made Simple (création de sites, développement de modules/plugins/templates sur mesure), spécialisé dans les sites pour l'immobilier.
Répondre
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.2.1
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour à tous,

Je voulais sonder un petit peu les visiteurs du forum par rapport à la structure du code HTML et le placement des éléments CSS/JS dont nécessitent les modules.

Actuellement, chaque module insère les fichiers dont il a besoin, via le filesystem (ex: Gallery) ou la DB (ex: FormBuilder).

C'est pratique pour les intégrateurs sans grande connaissance de ce qui se passe au niveau du code, mais lorsqu'on regarde d'un peu plus près, cela n'aide pas toujours pour les recommandations en terme de performances.

Il faut donc "mettre les mains dedans" et retravailler le tout. Mais qu'est-ce qui est le mieux ?

Si je résume, les "critiques" de PageSpeed ou de YSlow pointent régulièrement du doigt :
- L'ordre des scripts (CSS doit être avant JS)
- Le nombre de css/scripts élevé (combiner les ressources)
- Le poids des scripts, pas toujours optimisé et certainement pas avec les versions livrées par les modules.
- Placer les scripts JS en bas de document
- etc

Donc en conclusion, si on veut améliorer tout cela, on est obligé de remonter ses manches et d'effectuer quelques opérations soi-même, mais qui "cassent" un peu la séparation des ressources entre les modules, bien pratique lorsqu'on veut retirer un module.

En ce qui me concerne, lorsque par exemple j'utilise le module Gallery, je fais mon choix de librairie, je place le CSS dans les CSS du gabarit afin qu'il soit combiné et compressé par cms_stylesheet. Ensuite je place le fichier JS (et le code JS qui appelle les fonctions JS d'animation de la galerie) en bas du template Smarty (directement ou via un bloc de contenu global) afin de respecter la recommandation.

C'est efficace en terme de performances, mais moins pour la maintenance (ce qui dans mon cas ne pose pas de souci étant donné que je sais ce que je fais).

Quel est votre retour par rapport à ces pratiques ? Faites-vous autrement ? Mieux ? Qu'en pensez-vous ?

Heriquet
www.web-ep.be - Développeur Web Freelance - Développeur/Intégrateur CMS Made Simple (création de sites, développement de modules/plugins/templates sur mesure), spécialisé dans les sites pour l'immobilier.
Répondre


Messages dans ce sujet

Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)