Bonjour à tous,
 
Je cherche à optimiser l'appel de script sur un site web. J'utilise d'habitude YuiCompressor mais ici certains des scripts JS ont en fait une extension PHP (pour passer des variables).
 
Le header est bien sur approprié :
Header("content-type: application/x-javascript;charset=utf-8" );
 
et l'appel se fait classiquement pour les JS:
<script type="text/javascript" src="javascript.php" charset="utf-8"></script>
 
Je voudrais savoir si quelqu'un connait une solution pour minifier ce genre de script.
 
Autre question, comment minifier le code html envoyer par Apache (je peux poster cette question dans la partie php au besoin)?
 
Merci

1/ non iminifiable sans risque  
2/ gzip ne suffit pas ?

Salut,
 
Merci pour cette réponse rapide!
 
Pour le gzip je fais ça à la volée avec ob_start('ob_gzhandler'); mais jme dit qu'en minifiant ça irait encore plus vite (?? -Je ne suis pas expert ceci dit- ). Je cherche à gagner des ms partout où je peux.  
S'il y a mieux comme méthode faut pas hésiter à me dire.  
 
Après ce que tu me dit, je pense à copier les parties de code js dans un fichier séparé, les minifier et les recoller dans le javascript.php en gardant les opérations php inchangées. qu'en penses-tu ?
 
Si non, question du même ordre, quand on affiche la source d'une page google, le code html et js est minifié; une idée de comment ils font ça ?
 
   

Faut voir à quel point ton JS est "dynamique".  Il est tjrs possible de minifier un JS avec des paramètres en dur et d'aller regarder dans le code minifié pour y planter des <?=$bidule?> aux bons endroits.  
 
Une autre solution, plus propre, serait de minifier "à la volée", en faisant des appels vers yuicompressor ou en utilisant une solution 100% PHP comme minify ( http://code.google.com/p/minify/ ). Un système de cache ne sera pas de trop.

tu gagnera plus en essayant de regrouper tes ficheirs js en un seul ( idem pour les css) , histoire de limiter le nombre de requete
pour les images, passe par des sprite css
 
Souvent ce qui limite est la latence réseau plus que le temps de transfert ( a moins que tu n'ai un fichier js de 1Mo )

Bien reçu!
 
L'un dans l'autre vos idées se recoupent; je vais regarder du coté de minify et regrouper les scripts à la volée. Reste à ésperer que ce soit pas trop gourmand en ressources.
 
Par contre, à introduire un système de cache sur les JS dynamiques supprime le dynamisme le temps de la mise en cache, nan ?

C'est possible, mais la minification fait parti des meilleures pratiques selon Google et Yahoo, donc apportent un plus potentiel pour le référencement naturel, donc c'est tjrs un plus pour un site web, même si ca ne fait pas gagner grand chose  

tes fichiers JS ne devraient aucunement porter l'extension .php surtout s'ils contiennent des fonctions, cela signifie que ce n'est pas du tout optimisé.
 
Tu devrais juste avoir 1 fichier js qui contient une extension .php mais ce fichier JS serait un fichier de paramètres :  
 

 
ensuite dans tes fichiers JS tu appelles tes variables Javascript :  

 
ainsi tu auras des fichiers JS qui ne contiennent que du JS que tu pourras compresser à loisir.

Très vrai ce que tu dis, je n'y avait même pas pensé! Et dire que je galérais avec Minify pour les faire passer alors que la solution était bien plus simple...
 
Voici donc le problème des minifications solutionner; je vais faire tout ça localement avec Yui, comme d'hab, et limiter l'usage CPU.
 
Par contre je cherchais en parallèle une solution optimale pour combiner les scripts js et css sans passer par minify qui, euh, minifie, alors qu'ils le sont déjà. Ça serait bien comme le suggère flo850 pour limiter les requêtes (jamais fait jusqu'ici    ), mais je ne connais pas de librairie éprouvée qui fasse ça (gzipper en plus, comme minify, à la limite, mais qui ne compresse pas en plus). Si quelqu'un(e) connait ?
 
Thanks y'all.
 

Encore moi, toujours en quête d'optimisation.
 
J'ai un souci avec mes css et js que je tente de mettre en cache, sans succès.
Pour limiter les requêtes http, j'ai crée deux scripts php que j'appelle et qui vont à leur tour faire respectivement les includes des js et des css. Cette opération se passe bien. Par contre pas moyen de les garder en cache; ils sont téléchargés à chaque fois.
 
J'aurais besoin de votre aide pour savoir où je me trompe.
Voici le code simplifié:
 
css:

Header("Cache-Control: must-revalidate" );
 
    $duree=86400/24; //je test avec un cache d'une heure avec comme objectif en ligne des les garder 48h ;
    $ExpHeader = "Expires: ".gmdate("D, d M Y H:i:s", time()+$duree)." GMT";
 
Header($ExpHeader);
 
header("Content-type: text/css; charset=UTF-8" );
ob_start('ob_gzhandler');
 
    foreach($css_tab as $css){
        require_once $css;
    }
    
    
ob_end_flush();

 
idem pour les js:

Header("Cache-Control: must-revalidate" );
 
    $duree=86400/24;
    $ExpHeader = "Expires: ".gmdate("D, d M Y H:i:s", time()+$duree)." GMT"; 
 
Header($ExpHeader);
 
Header("content-type: application/x-javascript;charset=utf-8" );    
ob_start('ob_gzhandler');
 
    foreach($js_tab as $js){
        require_once $js;
    }
    
    
ob_end_flush();

 
Merci.

Personnellement je te conseille d'utiliser Ant.
C'est un outil de build utiliser principalement dans le monde Java (comme Maven ou Make pour C/C++ et Rake pour Ruby).
Il est simple à aborder et très souvent intégré dans les IDE comme Netbeans et Eclipse.
 
En utilisant Ant tu peux facilement :
- concatener tes fichiers en un seul
- le minimifier
- générer une documentation avec un outil approprié (ex : jsdoc-toolkit via Rhino)
- faire tourner des tests unitaires (la encore Rhino est ton ami)
- utiliser un préprocesseur (pour générer un script de débug et un de production par exemple) (http://code.google.com/p/js-build-tools/wiki/AntTasks#preprocess)
- uploader vers un ftp
- commiter vers un cvs/svn ou autre
 
http://ant.apache.org/
 
Sinon pour minimifier de l'html tu peux commencer par lire ça pour obtenir quelques bonnes pistes :
http://perfectionkills.com/experim [...] -minifier/
http://perfectionkills.com/optimizing-html/#tools

Salut,
 
Merci pour l'info, jregarderai ça attentivement plus tard; toujours un plaisir de découvrir de nouvelles solutions!
 
Mais plus spécifiquement, une idée de ce qui empêche mes scripts/css d'être gardés en cache avec la méthode que j’applique?

Aucune idée, mais bon pour moi c'est plus un faux problème car packager les ressources statiques devrait toujours être fait à la publication (build) de l'application et jamais en ligne par la plateforme d'exploitation.

... C'est bon, j'ai trouvé...
j'ai fait comme indiqué ici:
http://stackoverflow.com/questions [...] ript-files

Bah si tu utilise Ant, ca ne devient pas plus galère de générer toutes les combinaisons puisque le but principal de Ant est d'automatiser ce genre de tâches.
Au lieu d'automatiser la concaténation sur le serveur tu l'automatise en local et tu refais une build à chaque modif qui te régénère tout.
 
Mais par contre je ne suis pas trop partisan de ton approche, tu ne devrais pas agglomérer la base de commune de code avec les éléments spécifiques à une ou peu de page : en faisant ça tu rends impossible la mise en cache côté client et à chaque page avec un script spécifique tu fais retélécharger tout le code au client.
 
Tu devrais avoir :
- un script principal, base commune de la plupart de tes pages
- des scripts satellites spécifiques à une ou quelques pages
 
Si tes scripts satellites sont très courts tu peux aussi envisager de les agglomérer ensemble même si ça fait télécharger un peu de code inutile.

salut,
 
C'est exactement ça en fait; j'ai pas développé mais il y a effectivement un script principale qui lui est chargé en cache sans problème. J'avais restreint ma question au cas des scripts satellites. Mais si ant facilite les mises à jour en gardant en mémoire des sortes de "dépendances à recompiler" en quelques clics, jvais sérieusement me pencher dessus. En tout cas merci de me le faire découvrir!
 
   

De toute facon un fichier JS n'a pas a être dynamique, dans ce cas comme je l'ai dit plus haut, tu as des variables pour configurer ton JS et ensuite ton JS statique s'occupera du reste

Avec les mécanismes de cache qui existent aujourd'hui, pourquoi se priver?

 
- Limiter la charge CPU à la génération (anecdotique grâce au cache je te l'accorde)
- Eviter d'exécuter un script php à chaque requête vers une ressource statique (script qui vérifiera le cache et au besoin fera la génération)
- Se prémunir contre tout problème qui pourrait arriver lors de la génération : aucun risque que la ressource soit inaccessible sur le serveur puisqu'on l'a déjà généré avec succès
- Eviter de maintenir différents scripts de génération qu'on devra peut être mettre à jour selon les changements de conf et de version d'apache/php
- Ant est plus pratique, tu n'as pas besoin de compresser tes scripts un par uns via yuicompressor puis les uploader puis les faire concatener par le serveur : tu fais tout simplement F6 sur netbeans et cela te concatène, compresse et upload tout tes scripts en une fraction de seconde
- Ant reste plus flexible, comme je l'ai dit plus haut tu peux tout faire (génération de doc, linteur, tests unitaires, préprocesseur, upload, commit suv un VCS, etc) et vu que c'est un outil spécifique tu as déjà énormément d'outil déjà développés. Tu as juste à écrire le fichier xml qui pilote ton processus.
 
L'appel à un cache serveur est une solution qui ne devrait être mise en place que quand c'est nécessaire : c'est à dire quand les ressources sont dynamiques.