Aller au contenu


Combiner, Minifier Et Compresser Vos Css Et Js

script php optimisation css javascript minify

  • Vous ne pouvez pas répondre à ce sujet
8 replies to this topic

#1 le barbier fou

le barbier fou

    Serrurier fou !

  • Modérateur
  • PipPipPipPipPipPip
  • 470 Messages :
  • Gender:Male
  • Location:Nulle-Part-sur Mer

Posté 04 septembre 2011 - 20:33

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... :siffle:

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 :p )
  • 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)

  • Fichier joint  combine.php   6,52 Ko   213 Nombre de téléchargements 

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

250635.jpg

#2 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 050 Messages :
  • Gender:Male

Posté 06 septembre 2011 - 14:04

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ée 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és. 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.



#3 le barbier fou

le barbier fou

    Serrurier fou !

  • Modérateur
  • PipPipPipPipPipPip
  • 470 Messages :
  • Gender:Male
  • Location:Nulle-Part-sur Mer

Posté 08 septembre 2011 - 21:19

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. :D
Seule la balise [php] fait tâche d'huile.
250635.jpg

#4 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 050 Messages :
  • Gender:Male

Posté 08 septembre 2011 - 21:28

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

#5 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 050 Messages :
  • Gender:Male

Posté 03 janvier 2016 - 10:22

Le sujet est plus que jamais d'actualité.


Une piqûre de rappel, des éclaircissements, des nouveautés, des confirmations, une confrontation avec le réel, un conférencier sympa.
 
Webperf 2.0

Sujet présenté par Stéphane Rios


https://vimeo.com/145318582

#6 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 050 Messages :
  • Gender:Male

Posté 16 janvier 2016 - 10:28

Je me rends compte que nous avons omis de donner quelques pistes pour audits et tests, simples, gratuits, et en ligne.

 

 

http://yellowlab.tools/

 

https://www.dareboost.com/fr/home

 

https://developers.g...speed/insights/

 

 

Voilà les trois que je consulte, mais il y en a d'autres, sans compter ceux à venir.

 

Cela permet d'avoir un audit, les conseils qui vont bien, les confirmations aussi de ce que vous avez bien fait.

 

On ne peut pas toujours tout mettre en place, certains conseils sont même parfois à nuancer, selon les contextes. Mais globalement, ces outils sont proches de la perfection, chacun avec leurs qualités. :)



#7 tukozaki

tukozaki

    Touriste Phobosien

  • Zimien
  • PipPipPipPip
  • 73 Messages :
  • Gender:Male
  • Location:Londres > . < Paris

Posté 18 janvier 2016 - 05:23

Bien vu la MÀJ du sujet, je compte voir ça rapidement et tester pour voir à quel point je maintenant suis à la rue depuis un an que j'ai plus fait d'opti.


Qu'est-ce-qui est plus modulaire, compatible et ouvert, moins calorifère et (beaucoup) moins cher ??

Du code efficace :)


#8 le barbier fou

le barbier fou

    Serrurier fou !

  • Modérateur
  • PipPipPipPipPipPip
  • 470 Messages :
  • Gender:Male
  • Location:Nulle-Part-sur Mer

Posté 08 mars 2016 - 18:19

Merci pour ces bons liens, noisette (je découvre à peine ton post) ! Dareboost est vachement précis, j'aime beaucoup.

On peut aussi citer https://gtmetrix.com qui combine les critères de PageSpeed (Google) et YSlow (Yahoo) dans une interface très claire et accessible. Tu as raison de préciser qu'il ne faut pas chercher à appliquer absolument tous les conseils de tous les audits, ce n'est pas toujours possible et ça peut même s'avérer contre-productif dans certains cas.


250635.jpg

#9 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 050 Messages :
  • Gender:Male

Posté 11 mars 2016 - 16:49

Plus compliqué à tester en ligne: l'accessibilité.

 

De plus, les tests en ligne ne sont pas forcément faciles à utiliser, ou à utiliser à fond, pour qui se sensibilise depuis peu, d'un point de vue technique, à cet aspect essentiel du web.

 

Une bonne page de départ: http://www.webaccess...ion.php#liens_1

 

Malheureusement, elle n'est pas forcément très à jour, et certains outils ne sont pas ou plus en accès libre. Néanmoins, ceux qui iront la consulter n'iront pas par hasard, et chacun se fera sa sélection, en fonction de ce qu'il y trouvera.

 

Le sujet est vaste, technique, et ceux qui se lancent dans cette démarche pourtant essentielle sont souvent un peu perdus devant l'immensité de la tâche, et sur sa complexité. C'est pourquoi je suis d'accord avec ceux qui insistent sur le conseil de se donner des objectifs graduels, raisonnables, accessibles pédagogiquement - et financièrement.

 

Parfois, le savoir-faire et l'organisation permettent de rendre un code accessible sans travail supplémentaire par rapport à une goujaterie en ligne (comme l'est notre forum, ne nous le cachons pas).





0 utilisateur(s) en train de lire ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)