r13028 - branches/spip-2.0/ecrire/inc branches/spip-2.0/prive spip/ecrire/inc spip/prive

Author: esj@rezo.net
Date: 2008-10-24 17:19:40 +0200 (ven, 24 oct 2008)
New Revision: 13028

Log:
Il ne sert à rien de factoriser un squelette S en suite d'inclusions si elles ont besoin des fonctions définies par {{{S_fonctions.php}}}, car celui-ci n'est chargé que dans le cas S et pas dans les autres, d'où erreur à la compilation. Le cas se présente avec les squlettes des CSS privées, et avec leur compactage en prime, c'était l'enfer pour comprendre. Je suis sceptique sur la contrepartie de cet enfer, savoir le chargement plus rapide des CSS que les navigateurs mettent de toutes façons en cache. Il y a des mesures ?

En tout cas, quand on déballe tout on voit qu'il y a un tripotée de classes
({editer_titre editre_surtitre etc) qui sont utilisées dans les squelettes
de formulaires mais définies nulle part; de nouveau tout ça paraît excessivement bricolé.

Removed:
   branches/spip-2.0/prive/style_prive_fonctions.php
   spip/prive/style_prive_fonctions.php
Modified:
   branches/spip-2.0/ecrire/inc/filtres.php
   spip/ecrire/inc/filtres.php

Details: http://trac.rezo.net/trac/spip/changeset/13028

Le 24 oct. 08 à 17:19, esj@rezo.net a écrit :

Il ne sert à rien de factoriser un squelette S en suite d'inclusions si elles ont besoin des fonctions définies par {{{S_fonctions.php}}}, car celui-ci n'est chargé que dans le cas S et pas dans les autres, d'où erreur à la compilation. Le cas se présente avec les squlettes des CSS privées, et avec leur compactage en prime, c'était l'enfer pour comprendre. Je suis sceptique sur la contrepartie de cet enfer, savoir le chargement plus rapide des CSS que les navigateurs mettent de toutes façons en cache. Il y a des mesures ?

On y gagne :
1 - en minifiant le js/css par le filtre de compactage -> reduction du poids de l'ordre de 30% environ. En particulier à partir du moment ou on utilise cette minification, on hésite plus à commenter ses feuilles de style, ce qui est tout bénéfice
2 - en réduisant le nombre de requetes client/serveur qui passent de N à 1 pour le js et M à 1 par média pour le Css
Ca n'est pas illusoire car même au délà de la première page vue, si le navigateur stocke les css et les js en cache, il produit un hit à chaque page pour chaque fichier pour vérifier que le fichier n'a pas changé.
Chaque hit prend du temps. En particulier pour les js qui ne sont jamais paralélisés mais toujours chargés séquentiellement 1 par 1, l'un après l'autre, et pendant lequel le navigateur ne fait rien d'autre.
Cf à ce sujet
http://performance.survol.fr/2008/09/presentation-au-w3cafe/
http://performance.survol.fr/2008/10/les-cookies-font-grossir/
http://performance.survol.fr/2008/09/des-chiffres-a-vous-rendre-malade/

Sur les javascripts, on a encore de la marge de progression pour accelerer le temps de chargement des pages, en evitant le blocage du navigateur, mais ça sera pour plus tard.
http://performance.survol.fr/2008/08/javascript-non-bloquant/

Tout cela est significatif à partir du moment où on utilise de multiples css et/ou js, donc en particulier dès qu'on installe des plugins qui ajoutent chacun qui leur feuille de style, qui leur javascript.
Sur un SPIP nu, la différence est moins flagrante pour le back office.

Cédric

Le 24 oct. 08 à 17:59, cedric.morin@yterium.com a écrit :

On y gagne :
1 - en minifiant le js/css par le filtre de compactage -> reduction du poids de l'ordre de 30% environ. En particulier à partir du moment ou on utilise cette minification, on hésite plus à commenter ses feuilles de style, ce qui est tout bénéfice

Mettre un filtre qui vire les commentaires aurait le même effet.

2 - en réduisant le nombre de requetes client/serveur qui passent de N à 1 pour le js et M à 1 par média pour le Css
Ca n'est pas illusoire car même au délà de la première page vue, si le navigateur stocke les css et les js en cache, il produit un hit à chaque page pour chaque fichier pour vérifier que le fichier n'a pas changé.

La stratégie must-revalidate (au lieu d'un délai minimmum) a été amenée lors de la 1.9, et Ouvaton nous l'a assez reprochée.
Sans faire un complet retour en arrière en ce qui concerne les articles etc (à cause de l'activité des forums surtout),
on peut tout de même se demander si elle est bien raisonnable pour des pages aussi pérennes que les Css ou les biblis JS.

Tout cela est significatif à partir du moment où on utilise de multiples css et/ou js, donc en particulier dès qu'on installe des plugins qui ajoutent chacun qui leur feuille de style, qui leur javascript.

Oui mais quand on met au point ses feuilles de style, le fait que Firebug ne puisse plus dire de quel fichier vient telle classe est vraiment pénible. Et le code actuel est absurde parce que l'éclatement des feuilles de styles en plusieurs ne rime à rien à cause du bug corrigé par 13208 mais aussi parce que les balises FORMULAIRE_* référence des classes qui sont dans toutes les feuilles, et pas uniquement dans formulaire_css. Alors leur réunions par le compacte-css, c'est vraiment pourquoi faire simple quand on peut faire compliqué. Déjà que les CSS ont été conçu dans cet esprit, là c'est le délire.

Committo,Ergo:Sum

Cédric

Le 24 oct. 08 à 18:19, Committo,Ergo:sum a écrit :

Le 24 oct. 08 à 17:59, cedric.morin@yterium.com a écrit :

On y gagne :
1 - en minifiant le js/css par le filtre de compactage -> reduction du poids de l'ordre de 30% environ. En particulier à partir du moment ou on utilise cette minification, on hésite plus à commenter ses feuilles de style, ce qui est tout bénéfice

Mettre un filtre qui vire les commentaires aurait le même effet.

C'est ce que fait essentiellement le compacteur de CSS, plus eliminer les espaces inutiles.
Mais le mécanisme étant là, on va pouvoir y ajouter d'autres optimisation, comme y inclure inline les images de background lorsque le navigateur le supporte (toujours dans l'objectif de réduire le nombre de hit)

2 - en réduisant le nombre de requetes client/serveur qui passent de N à 1 pour le js et M à 1 par média pour le Css
Ca n'est pas illusoire car même au délà de la première page vue, si le navigateur stocke les css et les js en cache, il produit un hit à chaque page pour chaque fichier pour vérifier que le fichier n'a pas changé.

La stratégie must-revalidate (au lieu d'un délai minimmum) a été amenée lors de la 1.9, et Ouvaton nous l'a assez reprochée.
Sans faire un complet retour en arrière en ce qui concerne les articles etc (à cause de l'activité des forums surtout),
on peut tout de même se demander si elle est bien raisonnable pour des pages aussi pérennes que les Css ou les biblis JS.

Oui un Expire niveau serveur permet déjà de gagner des hits (un wrapper php sur une css statique est par contre une mauvaise idée).

Mais je t'assure que quand tu fais de l'optimisation sur un site à fort trafic, il n'est pas rare de constater plus de 70% de rebond sur la première page chargée. C'est à dire que 70 % des visiteurs ne voient qu'une page.
Et pour eux les directives Expire n'amènent aucun gain.
L'enjeu est aussi de réduire le nombre de hit sur le serveur, car chaque hit a un coût non nul en terme de charge.

Cette stratégie qui peut paraître accessoire pour des petits sites ne l'est pas si on se place du point de vue du serveur complet, donc sur les hébergements mutualisés.

Tout cela est significatif à partir du moment où on utilise de multiples css et/ou js, donc en particulier dès qu'on installe des plugins qui ajoutent chacun qui leur feuille de style, qui leur javascript.

Oui mais quand on met au point ses feuilles de style, le fait que Firebug ne puisse plus dire de quel fichier vient telle classe est vraiment pénible. Et le code actuel est absurde parce que l'éclatement des feuilles de styles en plusieurs ne rime à rien à cause du bug corrigé par 13208 mais aussi parce que les balises FORMULAIRE_* référence des classes qui sont dans toutes les feuilles, et pas uniquement dans formulaire_css. Alors leur réunions par le compacte-css, c'est vraiment pourquoi faire simple quand on peut faire compliqué. Déjà que les CSS ont été conçu dans cet esprit, là c'est le délire.

Pour la mise au point, on désactive le compacteur (il y a un define pour le faire cote ecrire/, car cela ne concerne que le core a priori)

Et tu raisonne là uniquement à périmètre fixe et connu qui est le core.
Dès qu'on charge N plugins, chacun est suceptible d'amener ses ajouts et surcharges (au sens CSS) de style, y compris dans l'espace privé.
L'atomisation en de nombreuses CSS plutôt qu'une grosse permet par ailleurs la personnalisation et la surcharge (au sens SPIP) ciblée des CSS alors qu'une grosse feuille unique oblige à tout forker.
Jusqu'ici cela se traduisait par un rallongement du temps de chargement des pages de l'espace privé, ce qui n'est plus le cas avec la 2.0

Je t'assure que ce n'est pas le délire, et qu'un projet type actuel comporte de nombreuses CSS et js, et que cette optimisation répond vraiment à un besoin.
Va sur n'importe quel site web moderne, et compte le nombre de hit js et css au chargement...

Cédric

Cette stratégie qui peut paraître accessoire pour des petits sites ne l'est pas si on se place du point de vue du serveur complet, donc sur les hébergements mutualisés.

J'ai bien conscience du problème, mais c'est la solution que je critique. Réintroduire le Expire pour JS et CSS est de toutes façons à faire si on veut optimiser un max, pour le debug il suffit d'un vidage manuel. Enlever les commentaires et les espaces ok. Mais la concaténation de CSS pour gagner qq hits à la première visite sur le site, ça me parait trop cher payé pour le gain obtenu.

Pour la mise au point, on désactive le compacteur (il y a un define pour le faire cote ecrire/, car cela ne concerne que le core a priori)

Mais c'est documenté où ? Je n'étais même pas au courant.

L'atomisation en de nombreuses CSS plutôt qu'une grosse permet par ailleurs la personnalisation et la surcharge (au sens SPIP) ciblée des CSS alors qu'une grosse feuille unique oblige à tout forker.

Bien sûr, ce n'est pas ça que je remets en cause.

Va sur n'importe quel site web moderne, et compte le nombre de hit js et css au chargement...

Au chargement de la première visite si on met le Expire, point.

Committo,Ergo:Sum

Cédric

Le 24 oct. 08 à 18:52, Committo,Ergo:sum a écrit :

Cette stratégie qui peut paraître accessoire pour des petits sites ne l'est pas si on se place du point de vue du serveur complet, donc sur les hébergements mutualisés.

J'ai bien conscience du problème, mais c'est la solution que je critique.

Réintroduire le Expire pour JS et CSS est de toutes façons à faire si on veut optimiser un max

Oui, mais cela ne peut être que dans le htaccess.

, pour le debug il suffit d'un vidage manuel. Enlever les commentaires et les espaces ok.

Mais la concaténation de CSS pour gagner qq hits à la première visite sur le site, ça me parait trop cher payé pour le gain obtenu.

Trop cher payé ?
je ne vois pas le prix que cela coûte :
- la concaténaton n'est faites qu'une fois
- en cas de bug, on desactive pour debug
Mais le gain n'est pas négligeable :
Quand on gagne entre 5 et 10 hits sur une home qui en fait 50, avec un taux de rebond de 70%, cela fait 7 à 15% de hits d'économisés, à convertir en gain sur la charge serveur ...

L'option est désactivable et pour la prochaine version, on fera un reglage plus fin, à plusieurs niveaux, qui permettra de choisir.

Pour la mise au point, on désactive le compacteur (il y a un define pour le faire cote ecrire/, car cela ne concerne que le core a priori)

Mais c'est documenté où ? Je n'étais même pas au courant.

define('_INTERDIRE_COMPACTE_HEAD_ECRIRE',true);

L'atomisation en de nombreuses CSS plutôt qu'une grosse permet par ailleurs la personnalisation et la surcharge (au sens SPIP) ciblée des CSS alors qu'une grosse feuille unique oblige à tout forker.

Bien sûr, ce n'est pas ça que je remets en cause.

Va sur n'importe quel site web moderne, et compte le nombre de hit js et css au chargement...

Au chargement de la première visite si on met le Expire, point.

Je pense à des sites (et mon cas d'école et banc de test est de ce type) où l'essentiel du trafic est constitué de nouveaux visiteurs...
Je sais que ce n'est pas le trafic recherché, mais c'est bien plus fréquent qu'on ne le pense, et mieux vaut optimiser ce cas ...
Cédric

Mais le gain n'est pas négligeable :

tu oublies de mentionner qu'on sert ces deux fichiers (js et css) sans
passer par php, ce qui économise beaucoup de temps. Avec le bon
réglage apache pour la compression (mod_gzip), on obtient le plus
rapide qui puisse être (modulo l'idée de mettre les scripts en pied de
page).

-- Fil

Le 24 oct. 08 à 23:44, cedric.morin@yterium.com a écrit :

Réintroduire le Expire pour JS et CSS est de toutes façons à faire si on veut optimiser un max

Oui, mais cela ne peut être que dans le htaccess.

non, à partir du moment où on fait un traitement via PHP on peut balancer le Header qu'on veut.

Mais la concaténation de CSS pour gagner qq hits à la première visite sur le site, ça me parait trop cher payé pour le gain obtenu.

Trop cher payé ?
je ne vois pas le prix que cela coûte

Je parle en terme de compréhension du code par le nouveau venu, c'est aussi un coût.
Toute optimisation n'est pas nécessairement bonne à prendre, c'est cela qu'on oublie trop souvent.

Pour la mise au point, on désactive le compacteur (il y a un define pour le faire cote ecrire/, car cela ne concerne que le core a priori)

Mais c'est documenté où ? Je n'étais même pas au courant.

define('_INTERDIRE_COMPACTE_HEAD_ECRIRE',true);
Connexion · GitLab

Tu parles d'une doc! J'aimerais qu'on s'impose que ce genre de chose soient systématiquement accessible par une case à cocher dans les panneaux de configuration. On a tous les outils qu'il faut pour ajouter ça en 5 minutes, avec effet collatéral bénéfique que c'est centralisé dans la table des meta, d'où repérage facile et identité parfaite en cas de déménagement.

Committo,Ergo:Sum

Cédric

Le 25 oct. 08 à 09:33, Committo,Ergo:sum a écrit :

Le 24 oct. 08 à 23:44, cedric.morin@yterium.com a écrit :

Réintroduire le Expire pour JS et CSS est de toutes façons à faire si on veut optimiser un max

Oui, mais cela ne peut être que dans le htaccess.

non, à partir du moment où on fait un traitement via PHP on peut balancer le Header qu'on veut.

ah, non, ça c'est désastreux : utiliser un wrapper php pour envoyer un header est contre productif en terme de charge serveur et rapidité de service de la page !

Encore une fois tu te place dans un cas d'utilisation peu représentatif où tu suppose que le premier hit sur un fichier est minoritaire.
Dans un site web public, c'est le contraire : une très grande majorité d'internaute de verront qu'une page de ton site.

Mais la concaténation de CSS pour gagner qq hits à la première visite sur le site, ça me parait trop cher payé pour le gain obtenu.

Trop cher payé ?
je ne vois pas le prix que cela coûte

Je parle en terme de compréhension du code par le nouveau venu, c'est aussi un coût.
Toute optimisation n'est pas nécessairement bonne à prendre, c'est cela qu'on oublie trop souvent.

Pour la mise au point, on désactive le compacteur (il y a un define pour le faire cote ecrire/, car cela ne concerne que le core a priori)

Mais c'est documenté où ? Je n'étais même pas au courant.

define('_INTERDIRE_COMPACTE_HEAD_ECRIRE',true);
Connexion · GitLab

Tu parles d'une doc! J'aimerais qu'on s'impose que ce genre de chose soient systématiquement accessible par une case à cocher dans les panneaux de configuration. On a tous les outils qu'il faut pour ajouter ça en 5 minutes, avec effet collatéral bénéfique que c'est centralisé dans la table des meta, d'où repérage facile et identité parfaite en cas de déménagement.

Je crois qu'on confond deux choses :
- Pour le site public, c'est configurable dans le menu Configurations > avancées
- Pour l'espace privé, j'ai considéré que c'était nous (ie le core) qui décidions que cette optimisation était active pour tous les sites.
La constante sert donc à désactiver pour les développeurs qui travaillent sur l'espace privé uniquement
Je ne vois pas très bien ce que ce réglage purement technique et à destination des développeurs ferait dans un panneau de configuration pour les utilisateurs

Cédric

Le 25 oct. 08 à 12:30, cedric.morin@yterium.com a écrit :

La constante sert donc à désactiver pour les développeurs qui travaillent sur l'espace privé uniquement
Je ne vois pas très bien ce que ce réglage purement technique et à destination des développeurs ferait dans un panneau de configuration pour les utilisateurs

Mais toutes les nouvelles balises #FORMULAIRES que tu as développées ont justement pour effet de donner accès au niveau de l'espace public à des choses qui étaient confinées dans l'espace privé. La distinction devient du coup moins pertinente,
et se pose donc la question de coexistence des CSS de l'espace public et celles du privé. La modif que j'ai faite et qui a démarré cette discussion venait justement de l'usage d'une de ces balise et ma difficulté à concilier mes CSS publiques et les quelques classes nécessaires à cette balise et définies dans prive/style*. Donc tu vois que ça ne concerne pas juste les développeurs de l'espace privé officiel, mais toute personne qui voudra utiliser ces balises.

Bon, on ne va pas remettre tout ça sur le métier maintenant, c'est déjà une grosse avancée par rapport à la 1.9 de pouvoir récupérer la fonctionnalité aussi facilement. Pour sa personnalisation je maintiens que ce n'est pas encore aussi transparent, mais on ne peut pas faire tout d'un coup.

Committo,Ergo:Sum

Le 25 oct. 08 à 12:30, cedric.morin@yterium.com a écrit :

La constante sert donc à désactiver pour les développeurs qui travaillent sur l'espace privé uniquement
Je ne vois pas très bien ce que ce réglage purement technique et à destination des développeurs ferait dans un panneau de configuration pour les utilisateurs

Mais toutes les nouvelles balises #FORMULAIRES que tu as développées ont justement pour effet de donner accès au niveau de l'espace public à des choses qui étaient confinées dans l'espace privé. La distinction devient du coup moins pertinente,
et se pose donc la question de coexistence des CSS de l'espace public et celles du privé. La modif que j'ai faite et qui a démarré cette discussion venait justement de l'usage d'une de ces balise et ma difficulté à concilier mes CSS publiques et les quelques classes nécessaires à cette balise et définies dans prive/style*. Donc tu vois que ça ne concerne pas juste les développeurs de l'espace privé officiel, mais toute personne qui voudra utiliser ces balises.

Bon, on ne va pas remettre tout ça sur le métier maintenant, c'est déjà une grosse avancée par rapport à la 1.9 de pouvoir récupérer la fonctionnalité aussi facilement. Pour sa personnalisation je maintiens que ce n'est pas encore aussi transparent, mais on ne peut pas faire tout d'un coup.

Committo,Ergo:Sum

Le 25 oct. 08 à 14:14, Committo,Ergo:sum a écrit :

Le 25 oct. 08 à 12:30, cedric.morin@yterium.com a écrit :

La constante sert donc à désactiver pour les développeurs qui travaillent sur l'espace privé uniquement
Je ne vois pas très bien ce que ce réglage purement technique et à destination des développeurs ferait dans un panneau de configuration pour les utilisateurs

Mais toutes les nouvelles balises #FORMULAIRES que tu as développées ont justement pour effet de donner accès au niveau de l'espace public à des choses qui étaient confinées dans l'espace privé. La distinction devient du coup moins pertinente,
et se pose donc la question de coexistence des CSS de l'espace public et celles du privé. La modif que j'ai faite et qui a démarré cette discussion venait justement de l'usage d'une de ces balise et ma difficulté à concilier mes CSS publiques et les quelques classes nécessaires à cette balise et définies dans prive/style*. Donc tu vois que ça ne concerne pas juste les développeurs de l'espace privé officiel, mais toute personne qui voudra utiliser ces balises.

Ah, ok.

Mais sur ce sujet, les #FORMULAIRE_EDITER_XX de l'espace privé sont utilisables directement dans le public sans bidouiller quoi que ce soit dans les css :
dist/spip_formulaires.css
les stylera automatiquement car les formulaires du public et du prive ont les mêmes structures et les mêmes classes.

Donc en passant un formulaire d'edition du prive dans le public, il change de style en prenant le style des formulaires publics.
Sauf, evidemment si tu tiens à avoir les styles de l'espace privé, mais c'est un autre débat, effectivement.

Cédric

Donc en passant un formulaire d'edition du prive dans le public, il
change de style en prenant le style des formulaires publics.
Sauf, evidemment si tu tiens à avoir les styles de l'espace privé,
mais c'est un autre débat, effectivement.

Si j'ai bien compris ca peut etre un probleme... car le style des
formulaires du public peuvent ne pas s'intégrer dans le privé et
chambouler le privé... Il me semble avoir eu ce problème en essayant
de modifier les styles.

Cédric
_______________________________________________
spip-commit@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-commit
dev: http://trac.rezo.net/trac/spip/