3 replies to this topic

[le barbier fou]

Salut à tous !

Il y a peu, j'ai commencé à m'intéresser à la programmation web, un monde totalement nouveau pour moi. Heureusement, Internet regorge de tutos plus ou moins accessibles, et surtout de scripts prêts à l'emploi... Je suis tombé notamment sur le script COMBINE.PHP de Rakaz, permettant de combiner puis compresser en un seul fichier plusieurs javascripts ou feuilles de style. A la différence de "Minify" & cie, son code est lisible par le commun des mortels et tient en un seul fichier de 5 KO.

Evidemment, le pilleur que je suis n'a pas pu résister à la tentation...

Du mixage du script originel de Rakaz avec le mini-minifieur de Razor-Sharp et avec mon inspiration du moment (à défaut de savoir vraiment coder j'ai des "inspirations"), est ressorti quelque chose qui a l'air de fonctionner correctement.

En résumé, la Chose :

• combine plusieurs fichiers (CSS ou JS) en un seul ;
• réduit la taille de ce fichier en supprimant les caractères superflus ("minification") ;
• compresse le fichier (GZip) si la méthode est supportée par le serveur et le client ;
• envoie au navigateur les headers essentiels (Cache-control de 30 jours, Etags, Content Encoding... etc) ;
• enregistre une copie de ce fichier sur le serveur pour que la prochaine requête soit accomplie plus rapidement.

Pour utiliser le script, il vous faut :

• Rassembler vos CSS et vos JS dans deux répertoires (par exemple un dossier nommé "css" pour les JS et un dossier "js" pour les CSS .... ou viceversa )
• Renseigner le chemin de ces répertoires dans le script-même
• Remplir au même endroit les autres options (activer ou pas la minification, utiliser ou pas le cache...)
• Inclure le JS ou le CSS fusionné en utilisant : /combine.php?type=javascript&files=fichier1.js,fichier2.js,fichier3.js (pour combiner les JS fichier1, fichier2 et fichier 3) ; ou /combine.php?type=css&files=feuille1.css,feuille2.css,feuille3.css (pour les CSS)
• Note : Il est bien sûr possible de se passer des mal-aimés "?" en créant une règle de réécriture dans .htaccess. (voir http://rakaz.nl/code/combine pour un manuel d'utilisation plus précis)

Toute suggestion et critique est la bienvenue, d'autant plus que je ne sais pas programmer et que, de fait, de nombreuses erreurs ont pu se glisser.


Je vous mets le code en question en pièce-jointe (la balise [php] fait des siennes).

A+ et bonne continuation !

Fichier(s) joint(s)

•  combine.php   6,52 Ko   51 Nombre de téléchargements 

Ce message a été modifié par le barbier fou - 04 septembre 2011 - 20:35 .

[noisette]

Salut Barbier !

et bravo, ainsi que merci.

J'apporte ma petite contribution à ce sujet qui traite d'optimisation.

D'abord, l'optimisation, c'est important:

• D'une part parce que cela permet d'afficher plus vite la page. Cela dépasse le cadre du confort, puisque la durée d'affichage d'une page détermine en partie si le visiteur va rester ou pas, puis s'il va prendre le temps de découvrir le reste du contenu, acheter, etc.
• D'autre part parce que les moteurs de recherche commencent à prendre cette données en compte pour le référencement.
• Enfin, car une page optimisée fait consommer au final moins d'énergie pour être affichée.

Donc ce n'est pas du luxe.

Il y a plusieurs voies complémentaires pour optimiser une page, voies complémentaires, que l'on peut mettre plus ou moins en pratique suivant les cas. Ce n'est pas toujours hyper-technique, donc cela vaut la peine de regarder.

Un lien :

http://www.dailymoti...re-vincent_tech

Orateur sympa, tour d'horizon bien foutu et présenté, accessible et réaliste à la fois, merci à lui.
On commence à voir ce sujet abordé plus souvent sur le net francophone, cette vidéo n'y est sans doute pas étrangère.


Malgré tout, il ne faut pas stresser à l'idée de ne pas répondre à tous les points d'optimisation présenté. D'une part, parce que cela a un coup en termes de développement, qui n'est pas toujours souhaitable ou possible. Ensuite car cela a des répercussions sur la maintenance.
Un exemple: une feuille css optimisée n'est pas aussi claire et lisible qu'une feuille css non optimisée, bien organisée, commentée à bon escient. Ou une propriété aura souvent intérêt à être en double pour garder une organisation cohérente de la feuille css, Si cette propriété est donnée pour deux éléments html qui n'ont pas de rapport ou qui sont éloignés dans l'organisation ou le flux.


L'idée, c'est donc de bien voir quelle optimisation peut être maitrisée techniquement, dans quelle mesure ensuite elle apporte, et à quel prix (argent, temps, organisation, etc). A chacun suivant le contexte, sa propension à l'organisation et la rigueur, la nécessité de travailler en équipe ou pas, etc, que la décision est prise d'agir sur telle voie d'optimisation, moins sur telle autre, pas du tout sur une autre encore.
C'est vrai qu'il ressort que des mesures simples comme l'allègement des images est non-négligeable. Citons aussi le déplacement si possible (ce ne l'est pas toujours) des scripts ou de leur appel en bas de page.

[le barbier fou]

Merci du lien et de tes conseils avisés.

En effet, "optimiser" ne veut pas dire rechercher la performance à tout prix ; au contraire, organiser son site de manière optimale, c'est savoir allier rapidité et souplesse. Par souplesse, j'entends possibilité de pouvoir gérer son site et modifier son code facilement, à n'importe quel moment.

Malgré tout, il ne faut pas stresser à l'idée de ne pas répondre à tous les points d'optimisation présentés. [...]
Un exemple: une feuille css optimisée n'est pas aussi claire et lisible qu'une feuille css non optimisée, bien organisée, commentée à bon escient

Ainsi, il est préférable d'opter pour un traitement des CSS par PHP. Le script PHP générera une feuille de style traitée, (interprétée plus rapidement par le navigateur et illisible par le commun des mortels) mais la feuille source, originale, restera intacte et donc parfaitement lisible et modifiable.

Au passage, je me suis un peu amusé avec les options de formatage de texte, et l'éditeur de texte d'IM est super stable, bien loin de celui que j'ai connu il y a quelques années. ^^ Ça c'est de l'optimisation.
Seule la balise [php] fait tâche d'huile.

[noisette]

Je dois concéder n'y être pour rien