Optimisation performances web, PageSpeed

Bonjour à tous,


Je n'arrive à trouver réponse à mes interrogations. Je réagis suite à sujet de Florent V : Retours d'expérience sur le passage en production de code JS et CSS?.

Actuellement, pour optimiser les performances web :
- Sprites CSS
- Compression adaptée des images
- Compression GZIP du HTML, JS, CSS (inutile pour les images)
- Minification manuelle des fichiers JS
- Utilisation de CSS3 si le client n'exige pas un rendu identique sur tous les navigateurs (pour les coins arrondis par exemple)

Comme je suis un développeur fainéant, je cherche à minifier et concaténer de manière automatique les fichiers JS & CSS.

J'ai testé une solution avec une solution un fichier PHP (combine.php) couplé avec une ré-écriture des URLs (.htaccess) qui me permettait de concaténer les fichiers JS & CSS.

Or j'ai trouvé un article intéressant dont la conclusion résume bien le constat :

a écrit :
En clair, rendons aux fichiers statiques leur staticité

. Je trouve l'article très juste, mais qu'en pensez-vous?

Je cherche donc une solution me permettant de conserver en local tous les fichiers sources séparés (les différentes feuilles de styles & JS), et dès la mise en ligne un logiciel qui concatène & minifie les fichiers CSS & JS. Mon rêve serait une sorte de client FTP qui s'occuperait de cette tâche à l'upload...

J'aimerais une solution facilement intégrable au CMS que notre équipe développe.


Si Alsacréations n'est pas le forum le plus adapté pour les questions d'optimisation des performances web, veuillez m'indiquer un forum plus adapté.

Merci pour vos réponses éventuelles.

Julien Vernet a écrit :
Si Alsacréations n'est pas le forum le plus adapté pour les questions d'optimisation des performances web, veuillez m'indiquer un forum plus adapté.

Bonjour,

Ce forum est adapté à ces questions mais il en existe effectivement un encore plus adapté : performance-web (Google Groups) où tu retrouveras des têtes connues
Si tu crées un nouveau fil là-bas, merci de coller le lien ici et inversement le lien de ce sujet là-bas, enfin comme il est d'usage quand on crossposte

Les mêmes ont un truc (genre del.icio.us ?) sur Diigo : http://groups.diigo.com/group/web-performance/ et il y a encore http://www.perfplanet.com/ en anglais cette fois. Pour les 2 derniers je conseille leur lecture dans Google Reader ou autre agrégateur, à moins que ce soit mon goût personnel qui trouve ça bien plus pratique (avantage de Google Reader : tu peux remonter au 1er post alors qu'un agrégateur ne commencera qu'au moment où tu t'abonnes ...)

Je me permet de donner la solution que j'utilise sur mes projets.

Je créé mes fichiers CSS tout bien commenté classé par dossier etc. (bref un truc très lisible mais pas du tout optimisé en terme de nombre de hit et de place prise).

Ensuite j'appelle un fichier que je nomme selon la version etc.
Exemple de nommage : form_v1.js (j'utilise pas ça, mais prenons ça comme exemple).

Ce fichier n'existe pas (pour le moment).

Ensuite avec mon htacess, je redirige les erreurs 404 vers un fichier PHP (bref, quand le fichier .js n'existe pas). A ce moment là, en PHP je vais parcourir les dossiers et fichiers CSS correspondant à "form" que j'aurai choisi. Je créé un fichier CSS à partir de tous les CSS voulus, je minifie le tout. Et enfin, je créé en dure cette fois le form_v1.js qui sera donc appelé directement (sans passer par PHP ni rewrite) et qui sera évidemment mis en cache (vu que si je change quelque chose, je met par exemple form_v2.js afin d'être sûr que tout soit bien retélécharger par tout le monde).

De cette manière j'ai mon CSS très lisible d'un côté, et un CSS très compact en production.

J'ajoute qu'il est intéressant d'avoir la possibilité de faire "form_v0.js" par exemple, où le "0" signifierai qu'on recréé le fichier à chaque fois (de sorte qu'on puisse faire les tests sans modifier la version à chaque modification).

Voilà . Si vous avez mieux à proposer, je suis preneur

a écrit :
En clair, rendons aux fichiers statiques leur staticité

En clair les fichiers statiques ça va plus vite. Grande nouvelle.

Et ça vaut aussi pour les pages php qu'on s'ennuie à générer côté serveur alors qu'un fichier html est tellement plus rapide. Toutes ces considérations rentrent dans la suroptimisation et sont valable pour des sites comme facebook, youtube, google... mais complétement ridicule à mettre en place pour des sites à faible fréquentation. Pour js, ça peut s'avérer un peu plus intéressant (quoique les librairies sont déjà généralement minifiés) mais honnêtement pour les css, il faut vraiment vouloir gratter.

D'autre part, il ne faut pas oublier qu'il y a n configuration possible d'utilisation des fichiers css et js pour un même site. Et il n'est pas forcément recommandable de balancer d'entrée un package compilé de tout les fichiers js et css du site. Je suis d'avis que quitte à mettre en place cette optimisation, il vaux mieux en laisser la charge au serveur qui est là, ne l'oublions pas, pour générer des contenus à partir de scripts - la base de l'information automatique - le serveur n'est pas là que pour fournir des pages à fond la caisse.

Je passerai sur les arguments médiocres fournis par Johan BLEUZEN :

- On peut remédier à cela néanmoins avec des réécritures d’URL, mais je ne suis pas spécialement fan de cette solution.
- C’est une solution de fainéant
Avec cette solution, on n’a plus des fichiers statiques mais des fichiers dynamiquement générés, ça ne vous choque pas ???

Le seul argument valable étant celui du temps nécessaire pour générer le fichier. Par contre je n'arrive pas à comprendre ou est la différence entre générer un fichier côté serveur et le générer sur sont poste pour ensuite le mettre en production. Ça fait un étape en plus, limites les possibilités et on est moins feignant mais bon.

Merci pour vos réponses

Donc si je résume, l'auteur de l'article tire de fausses conclusions (du moins pour la plupart des sites à trafic restreint).

Je vais tester SmartOptimizer, qui est une librairie PHP permettant d'optimiser les performances. J'ai essayé WEBO SiteSpeedUp (sur Wordpress) avec lequel je suis passé d'un PageSpeed de 73 à 94 en réglant correctement l'application. L'interface est très agréable mais une licence par domaine est nécessaire... donc je me vois mal proposer cela à mes clients.

Perso sur mon site/blog:

*compression gzip des fichiers textes (html, css, js, atom, svg, etc) via une ligne dans le fichier htaccess.
*feuille de style unique contenant tous les médias.
*installation d'un plugin pour avoir un cache de pages statiques.
*fontes dans le cache http (le reste plus tard).

Merci pour ta réponse Patidou.

a écrit :
*installation d'un plugin pour avoir un cache de pages statiques.

Que veux-tu dire par là? Je ne suis pas sur de saisir...

Julien Vernet a écrit :
Que veux-tu dire par là? Je ne suis pas sur de saisir...

C'est spécifique au CMS que tu utilises (dans mon cas Dotclear et l'extension Static Cache).

Résultat après l'installation de l'extension.
Modifié par Patidou (18 Nov 2010 - 14:24)

Pour WP, pas de soucis, j'ai trouvé le plugin ultime avec une interface bien faite (WEBO... cité plus haut).

Mais là difficulté c'est que notre agence développe un CMS propriétaire et qu'il faut tout faire manuelle

Est-ce que quelqu'un pourrait tester SmartOptimizer?
J'obtiens de tout (Erreur 500 ou PHP) lorsque j'essaye de l'installer.