[SPIP Zone] Porte-plume, eluminures typographiques et optimisation nécessaire

Archives Zone
1

Bonjour,

je suis en train de réaliser une campagne d'optimisation sur le site que je développe, et je me suis rendu compte que l'utilisation du porte-plume et des enluminures typo a un impact non négligeable :

La css de ces plugins est automatiquement incluse sur le site public quand on utilise #INSERT_HEAD (même si les forums sont désactivés et si on désactive la barre de mise en forme dans les crayons, comme c'est le cas sur mon site).

Le problème, c'est que cette css référence 47 images qui sont donc chargées systématiquement dès l'arrivée sur le site alors qu'elles ne servent jamais, ça fait un paquet de requêtes inutiles et un embonpoint de presque 20 Ko sur la première page chargée du site.

Y-a-t-il un moyen pour ne pas charger cette css ? J'ai absolument besoin de INSERT_HEAD pour d'autres plugins, donc est-ce qu'il existe un paramétrage caché ?

Sinon il serait peut-être utile d'optimiser un peu tout ça en utilisant une planche de sprites avec décalage de background en css comme expliqué ici : http://www.websiteoptimization.com/speed/tweak/css-sprites/
Entre 47 requêtes http et une seule, je prends aussi :slight_smile:

Mon spip : 2.0.9, enluminures v3.0.0 rev 28589, porte-plume 1.2.6 rev 28496

    Simon

2

développe, et je me suis rendu compte que l'utilisation du porte-plume et
des enluminures typo a un impact non négligeable :

La css de ces plugins est automatiquement incluse sur le site public quand
on utilise #INSERT_HEAD (même si les forums sont désactivés et si on
désactive la barre de mise en forme dans les crayons, comme c'est le cas sur
mon site).

Qui fait ça : le porte-plume, ou les enluminures ?

Sinon il serait peut-être utile d'optimiser un peu tout ça en utilisant une
planche de sprites avec décalage de background en css comme expliqué ici :
CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance - WebSiteOptimization.com
Entre 47 requêtes http et une seule, je prends aussi :slight_smile:

Ce qui serait génial, c'est un module qui crée les sprites de façon
totomatique, à la façon du compacteur de js et css.

-- Fil

3

Le 28 août 2009 17:28, Fil <fil@rezo.net> a écrit :

développe, et je me suis rendu compte que l’utilisation du porte-plume et
des enluminures typo a un impact non négligeable :

La css de ces plugins est automatiquement incluse sur le site public quand
on utilise #INSERT_HEAD (même si les forums sont désactivés et si on
désactive la barre de mise en forme dans les crayons, comme c’est le cas sur
mon site).

Qui fait ça : le porte-plume, ou les enluminures ?

Apparemment les deux puisque les deux css sont présentes.
Mais comme on ne peut pas tester enluminures sans porte plume, je pencherais quand-même pour le second.

Sinon il serait peut-être utile d’optimiser un peu tout ça en utilisant une
planche de sprites avec décalage de background en css comme expliqué ici :
http://www.websiteoptimization.com/speed/tweak/css-sprites/
Entre 47 requêtes http et une seule, je prends aussi :slight_smile:

Ce qui serait génial, c’est un module qui crée les sprites de façon
totomatique, à la façon du compacteur de js et css.

En effet, ça serait pas mal parce que ça faciliterait l’extension du plugin, mais ça rajouterait une dépendance à la présence de librairie de manipulation d’image pour le plugin, ce qui serait quand-même lourd du coup.
Y’a certainement un truc à creuser là-dedans, mais c’est un sacré plus gros travail que de pondre une planche à la main pour un plugin…

A bientôt
Simon

4

Le 28/08/2009 06:21, Simon Camerlo a écrit :

La css de ces plugins est automatiquement incluse sur le site public
quand on utilise #INSERT_HEAD

Le problème, c'est que cette css référence 47 images qui sont donc
chargées systématiquement dès l'arrivée sur le site alors qu'elles ne
servent jamais, ça fait un paquet de requêtes inutiles et un embonpoint
de presque 20 Ko sur la première page chargée du site.

Y-a-t-il un moyen pour ne pas charger cette css ? J'ai absolument besoin
de INSERT_HEAD pour d'autres plugins, donc est-ce qu'il existe un
paramétrage caché ?

Bon, je te remercie pour ce retour très pertinent. Actuellement, donc, la css est chargée systématiquement, et il n'y a pas d'option pour le désactiver.

Ce qui est facile : créer une option (define ou cfg)

L'idée de sprite est intéressante mais pose plusieurs problèmes :
- soit la sprite est fixe et surcharger une image revient a surcharger la sprite complète, ou ajouter un bouton aussi (et comment feraient alors deux extensions de porte plume pour ajouter chacun des boutons ?)
- soit la sprite est calculée dynamiquement (le défi de programmation est intéressant) en fonction d'une liste d'icone de référence mais :
-- cela nécessite une librairie graphique active,
-- cela nécessite de modifier les css pour tenir compte des décalages.

L'avantage, c'est que porte plume connait déjà l'ensemble des icones qu'il utilise et calcule une CSS, on pourrait imaginer une seconde option «boutons images en sprite» pour adapter tout ça. Ça me semble jouable en perspective, et au webmestre de l'activer s'il le souhaite.

Je veux bien me pencher sur ces questions, mais pas avant une bonne semaine ; ma priorité du moment serait plutôt d'améliorer l'api de no-spam pour la réutiliser sur Programmer (et/ou tickets) afin d'éviter ce genre de spam (je les supprime mais ils reviennent ^^) : http://programmer.spip.org/spip.php?page=suggestions qui commencent à intoxiquer les suggestions, et le jeton n'est actuellement pas suffisant.

--
MM.

5

Actuellement, donc, la css est chargée systématiquement, et il n'y a pas d'option pour le désactiver.

A quoi sert-elle ? S'il s'agit des images pour les boutons, on peut
l'injecter en js, c'est très facile.

-- Fil

6

Le 28/08/2009 23:37, Fil a écrit :

Actuellement, donc, la css est chargée systématiquement, et il n'y a pas d'option pour le désactiver.

A quoi sert-elle ? S'il s'agit des images pour les boutons, on peut
l'injecter en js, c'est très facile.

Oui, c'est exactement cela, mais en js ou pas, il vaudrait mieux avoir un sprite pour éviter de trop nombreux appels au serveur comme dit Simon. Du moins je suppose.

--
MM.

7

Le 29 août 09 à 10:37, Matthieu Marcillaud a écrit :

Le 28/08/2009 23:37, Fil a écrit :

Actuellement, donc, la css est chargée systématiquement, et il n'y a pas d'option pour le désactiver.

A quoi sert-elle ? S'il s'agit des images pour les boutons, on peut
l'injecter en js, c'est très facile.

Oui, c'est exactement cela, mais en js ou pas, il vaudrait mieux avoir un sprite pour éviter de trop nombreux appels au serveur comme dit Simon.

Non mais c'est quoi ce troll ?
Ce n'est pas parce qu'une css qui reference 40 images background est chargée à chaque hit que cela déclenche 40 requetes serveur ...
Les images ne sont chargées que lorsque les éléments stylés sont présents dans la page.
Donc que la css soit sur toutes les pages ou uniquement sur celle des forums ne changera rien.

En ce qui concerne l'optimisation des requetes serveur sur les images de background, je pense qu'il ne faut pas faie un truc manuel spécifique au porte plume, mais réfléchir à une solution générique. Plutot que les sprites qui sont complexes à générer, je pencherai plutot pour l'embarquement de l'image inline dans la css en base64. Pour des petites images comme celles des icones du porteplume, je pense que ce serait parfait.

http://mark.kolich.com/2009/07/howto-include-binary-image-data-in-cascading-style-sheets-css.html

Seul inconvénient, ie<=7 ne gère pas, il faut donc gèrer ce cas particulier, ce qui est la principale difficulté
(générer une css sans les image embed et 2 déclarations avec commentaires conditionnels IE ?,
générer une seule css mais avec 2 directives et hack pour cibler ie 6&7 uniquement ? ...)

Cédric

8

Le 29/08/2009 11:06, cedric.morin@yterium.com a écrit :

Les images ne sont chargées que lorsque les éléments stylés sont
présents dans la page.

Ah, c'est aussi ce que je pensais avant l'intervention de Simon, mais je l'ai cru sur parole, un peu facilement alors ^^.

Sinon pour les sprites ou images embarquées, j'aurais eu une préférence naturelle pour les premiers… m'enfin sans plus d'avis.

Et justement, pour revenir à ce que tu dis, les images embarquées fera que tu auras une grosse CSS chargée systématiquement même si les images ne servent pas (pas de barre d'outil sur la page dans le cas de porte plume), alors qu'une sprite, ce serait une petite css, mais avec une grosse image appelée uniquement si on en a besoin. Enfin se je pige bien.

--
MM.

9

Le 29 août 2009 17:30, Matthieu Marcillaud <marcimat@free.fr> a écrit :

Le 29/08/2009 11:06, cedric.morin@yterium.com a écrit :

Les images ne sont chargées que lorsque les éléments stylés sont
présents dans la page.

Ah, c’est aussi ce que je pensais avant l’intervention de Simon, mais je l’ai cru sur parole, un peu facilement alors ^^.

Arf, alors c’est moi qui ai dû faire trop rapidement confiance à http://www.websiteoptimization.com/services/analyze/
Pourtant on m’avait recommandé ce site comme un incontournable très fiable dans ses analyses…

Quelqu’un a des tools d’audit de site plus fiables que ça (gratuits) ?

Simon

10

Salut,

Le 29 août 2009 11:30, Matthieu Marcillaud<marcimat@free.fr> a écrit :

Le 29/08/2009 11:06, cedric.morin@yterium.com a écrit :

Les images ne sont chargées que lorsque les éléments stylés sont
présents dans la page.

Ah, c'est aussi ce que je pensais avant l'intervention de Simon, mais je
l'ai cru sur parole, un peu facilement alors ^^.

Sinon pour les sprites ou images embarquées, j'aurais eu une préférence
naturelle pour les premiers… m'enfin sans plus d'avis.

Et justement, pour revenir à ce que tu dis, les images embarquées fera que
tu auras une grosse CSS chargée systématiquement même si les images ne
servent pas (pas de barre d'outil sur la page dans le cas de porte plume),
alors qu'une sprite, ce serait une petite css, mais avec une grosse image
appelée uniquement si on en a besoin. Enfin se je pige bien.

Le problème sera presque identique avec le sprite qui chargera une
grande image avec tous les boutons même si on en utilise que deux ou
trois sur le site, non ? Du coup, laisser comme ça l'est déjà semble
la solution la plus "efficace".

++
b_b

--
MM.
_______________________________________________
spip-zone@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-zone

11

Le 29 août 2009 20:50, simon camerlo <scamerlo.work@gmail.com> a écrit :

Le 29 août 2009 17:30, Matthieu Marcillaud <marcimat@free.fr> a écrit :

Le 29/08/2009 11:06, cedric.morin@yterium.com a écrit :

Les images ne sont chargées que lorsque les éléments stylés sont
présents dans la page.

Ah, c’est aussi ce que je pensais avant l’intervention de Simon, mais je l’ai cru sur parole, un peu facilement alors ^^.

Arf, alors c’est moi qui ai dû faire trop rapidement confiance à http://www.websiteoptimization.com/services/analyze/
Pourtant on m’avait recommandé ce site comme un incontournable très fiable dans ses analyses…

Quelqu’un a des tools d’audit de site plus fiables que ça (gratuits) ?

Simon

Bon, encore une fois désolé pour ce malentendu.
Par contre j’ai fait les comptes : ça fait toujours 10 Ko de css et 27 Ko de javascript (le tout compacté, bien sûr) chargés systématiquement sur le site public même s’ils ne sont jamais utilisés…

Donc une option pour désactiver l’insertion côté public, même rudimentaire par une variable dans le mes_options.php, serait la bienvenue car le plugin est incontournable !

A bientôt

Simon