Recherche un article : simple/multiple utilisation de <link>

08 avr. 2008, 10:56

Bonjour,

une fois j'ai lu un article disant que l'utilisation de 3 balises <link>, une par feuille de style utilisée, était (beaucoup) plus lent que une seule, appelant les 3 feuilles de styles.

En gros, ceci :

Code : Tout sélectionner

<link rel="StyleSheet" type="text/css" href="liste1.css" />
<link rel="StyleSheet" type="text/css" href="liste2.css" />
<link rel="StyleSheet" type="text/css" href="liste3.css" />

est plus lent que cela :

Code : Tout sélectionner

<link rel="StyleSheet" type="text/css" href="liste1.css; liste2.css; liste3.css" />

Je ne le retrouve pas, est-ce que ça parle à quelqu'un ?

Impossible de retrouver des infos à ce sujet, si vous avez ça dans vos bookmarks...

Merci !

08 avr. 2008, 11:06

rien vu la dessus.. par contre, ce qui va plus vite encore, c'est de minimiser les appels vers le serveur.

J'utilise un script qui me concatène tous mes css (quand y'en a plus de 3) à la suite l'un de l'autre, me les compresse, et envoie le tout en une fois. Même chôse pour le JS.

08 avr. 2008, 11:09

J'ai eu l'occasion d'en parler lors de la conférence AFUP à Lyon de la semaine dernière, et la solution proposée par Berzemus a un énorme inconvénient : le cache.

Le script qui génère un énorme fichier CSS est viable uniquement si tu envois tout le temps tout les fichiers CSS de ton script.
Dans les autres cas, tu va te retrouver à envoyer plusieurs fois le contenu de mêmes fichiers, ce qui n'aurait pas été fait avec une gestion de la durée de cache appropriée.

08 avr. 2008, 11:15

une seule, appelant les 3 feuilles de styles.

Whaaaa? On peut faire ça, mettre plusieurs URI séparés par des points-virgules ?

Sinon, d'un point de vue technique je ne vois pas de raison d'être moins performant (à une ridicule marge près) et je n'en ai jamais entendu parlé.

Concernant le détournement de sujet sur la mise en cache des machins, si cette solution passe par PHP je m'attendrais à ce que l'overhead induit par PHP (comparé à un ou plusieurs fichiers statiques) oblitère tout gain de performance.

08 avr. 2008, 11:29

une seule, appelant les 3 feuilles de styles.
Whaaaa? On peut faire ça, mettre plusieurs URI séparés par des points-virgules ?

Je ne suis pas sûr de la syntaxe, j'ai mis au pif

Sinon, d'un point de vue technique je ne vois pas de raison d'être moins performant (à une ridicule marge près) et je n'en ai jamais entendu parlé.

Je suis quouasiment sûr que nous avons à faire... d'avoir vu cet article un jour ![/quote]

08 avr. 2008, 11:31

J'ai eu l'occasion d'en parler lors de la conférence AFUP à Lyon de la semaine dernière, et la solution proposée par Berzemus a un énorme inconvénient : le cache.

Le script qui génère un énorme fichier CSS est viable uniquement si tu envois tout le temps tout les fichiers CSS de ton script.
Dans les autres cas, tu va te retrouver à envoyer plusieurs fois le contenu de mêmes fichiers, ce qui n'aurait pas été fait avec une gestion de la durée de cache appropriée.

Ah, mais c'est que je n'ais pas tout dit ^-^
Le script prend en paramètre les fichiers css à inclure .. ainsi il me sert pour les styles de base, d'impression, et tout ça.. Du coup, tout les css standards pour le média "screen" ont un seul titre (puisque ne forment qu'une seule page), et sont facilement gérables sous JS.

08 avr. 2008, 11:50

C'est dommage qu'on soit HS parce que le sujet m'intéresse berzem

08 avr. 2008, 11:54

C'est dommage qu'on soit HS parce que le sujet m'intéresse berzem

Bah faitesz vous plaisir, tant qu'on oublie pas mon article !

08 avr. 2008, 12:02

Apparement, la syntaxe que ouckileou propose n'est pas valide. Mais il serait évident qu'un appel au serveur soit plus rapide que trois appels au serveur.

Une question cependant. Est-ce que c'est plus rapide d'utiliser les importations (@import) de CSS que de faire différent lien (<link />) en HTML ? Ça, ça m'a toujours embêter et j'ai jamais pris le temps de m'y attacher. Il n'y a que cet article d'Alsacréations mais ça ne répond pas vraiment à ma question.
Parce que dans ce cas, on utilise un seul lien (via <link />) et le reste se fait via l'importation (@import). Pour la première mise en cache, ce sera donc plus rapide, et par la suite, la lecture se fera dans le cache, donc pas de soucis.
Je précise néanmoins que quand je dis qu'on utilise un seul lien, c'est pour un média donné (car IE gère mal les groupes de médias dans les feuilles CSS ...).

08 avr. 2008, 12:09

Pour @import ça devrait être systématiquement plus lent, et tout ce que j'ai pu lire allait dans ce sens. Notamment, ça empêche le navigateur de paralléliser les transferts puisqu'il ne découvre l'URI qu'après avoir parsé le fichier.

Un lien qui va bien avec le sujet : http://developer.yahoo.com/performance/

08 avr. 2008, 12:35

Pour @import ça devrait être systématiquement plus lent, et tout ce que j'ai pu lire allait dans ce sens. Notamment, ça empêche le navigateur de paralléliser les transferts puisqu'il ne découvre l'URI qu'après avoir parsé le fichier.

Un lien qui va bien avec le sujet : http://developer.yahoo.com/performance/

Ouaip, je suis tombé plusieurs fois sur le même sujet..
le chargement se fait le plus rapide par <link> dans la partie <head>.

08 avr. 2008, 14:09

Sinon j'ai une solution encore plus rapide, elle explose tous les bench :

Code : Tout sélectionner

Bah ouais, on utilise pas de css

Plus sérieusement, pour la solution de Berzemus, en effet, il y a moyen que ce soit la plus rapide. Pour le cache, on règle correctement les cache avec les headers, et on adopte une nomenclature bijective (à chaque combinaison de css correspond un et un seul nom). Ainsi, si on veut concaténer fichier1.css, fichier2.css et fichier3.css, on demande par exemple fichier1_fichier_2_fichier3.css, et derrière, un .htaccess rewrite l'url vers un script.

08 avr. 2008, 14:11

Sinon j'ai une solution encore plus rapide, elle explose tous les bench :
Code : Tout sélectionner
Bah ouais, on utilise pas de css

Une solution à adopter demain.

08 avr. 2008, 15:17

<!ELEMENT link EMPTY>
<!ATTLIST link
%attrs;
charset %Charset; #IMPLIED
href %URI; #IMPLIED
hreflang %LanguageCode; #IMPLIED
type %ContentType; #IMPLIED
rel %LinkTypes; #IMPLIED
rev %LinkTypes; #IMPLIED
media %MediaDesc; #IMPLIED
>

08 avr. 2008, 22:32

En gros, ceci :
Code : Tout sélectionner
<link rel="StyleSheet" type="text/css" href="liste1.css" /> <link rel="StyleSheet" type="text/css" href="liste2.css" /> <link rel="StyleSheet" type="text/css" href="liste3.css" />
est plus lent que cela :
Code : Tout sélectionner
<link rel="StyleSheet" type="text/css" href="liste1.css; liste2.css; liste3.css" />

Et ceci ?

Code : Tout sélectionner

<style type="text/css">
@import "liste1.css";
@import "liste2.css";
@import "liste3.css";
</style>

Recherche un article : simple/multiple utilisation de <link>

Qui est en ligne