Styles des pages web se charge une fois sur deux du a connection lente

Bonjour à tous,

Voici une petite question que je en train de me poser à l'instant.. Depuis hier ma connection est lente et rame, les grosses pages genre facebook mettent des plombes à se charger par exemple.

Par contre je me posait la question de savoir pourquoi la plupart des pages que je lance s'affiche sans leur styles (donc en html brute) due à cette connection lente et apparament surchargée. Normalement une feuille de style ne peut pas sauter lors d'une requête du navigateur, si ?

Si oui comment remédier se problème quand on développe aussi des sites pour éviter que cela arrive ?

Est-ce une option du server auquel on se connecte qui dicte cela ?


Merci d'avance

Personnellement je n'ai jamais vu ça.

Ce ne serait pas ton navigateur qui fait cela plutôt ?

Bonjour,

Le navigateur récupère le code HTML. Il l'analyse plus ou moins à la volée, et en parallèle il commence à appeler des ressources externes. Sur Firefox 2 (voire 3?), IE 6 et 7, etc., le navigateur charge deux éléments maximum en parallèle pour un sous-domaine donné.

Donc si le navigateur charge:
whatever.lol.org/ma/page (HTML)
et le code HTML appelle les éléments suivants:
whatever.lol.org/public/js/script1.js
whatever.lol.org/public/js/script2.js
...
whatever.lol.org/public/js/script12.js
whetever.lol.org/public/css/styles1.css
whetever.lol.org/public/css/styles2.css
...
whetever.lol.org/public/css/styles8.css
(tout ça dans le HEAD),

le navigateur charge les deux premiers, puis attend de les recevoir, puis charge les deux suivants, etc. Si tu appelles beaucoup d'éléments, ça peut être long. Si le chargement est rapide car bonne connexion (chaque paire prenant 300ms à être chargée, par exemple), ça peut être acceptable. Si pour une raison X ou Y, notamment un problème de réactivité de la connexion du visiteur, la latence est de l'ordre de 2000ms (deux secondes), ça va être l'enfer.

Solutions:
- Minifier et concaténer les scripts JS, et placer les appels de script à la fin du contenu (avant </body>).
- Minifier et concaténer les feuilles de styles, et les appeler dans le HEAD.
- Limiter les éléments trop lourds sur la page (images ou animations Flash...) et les éléments trop nombreux.
- Faire un code HTML sémantique et bien hiérarchisé, afin que dans le pire des cas (styles manquants totalement ou en partie pendant un certain laps de temps), le rendu soit dégradé mais le site reste utilisable.
- ...
- S'intéresser aux questions de performances client en général (voir YSlow, Google Page Speed, performance.survol.fr, les livres de Steve Souders, etc.).

Améliorer les performances client, notamment pour un gros site, c'est bien. Si ça permet de rendre un site utilisable en cas de conditions extrêmes (bas débit, problème de connexion, connexion 3G, wifi instable...), ça permet aussi de rendre le site plus réactif et donc plus satisfaisant pour le visiteur dans de bonnes conditions. C'est un gain pour tous les visiteurs. Ensuite, l'investissement sur cette problématique (c'est un domaine d'expertise à part, les solutions demandent du boulot...) va dépendre des bénéfices attendus, c'est à dire de la taille du site.

Florent V, merci pour ton intéressante et généreuse réponse.

a écrit :

Le navigateur charge les deux premiers, puis attend de les recevoir, puis charge les deux suivants, etc. Si tu appelles beaucoup d'éléments, ça peut être long. Si le chargement est rapide car bonne connexion (chaque paire prenant 300ms à être chargée, par exemple), ça peut être acceptable. Si pour une raison X ou Y, notamment un problème de réactivité de la connexion du visiteur, la latence est de l'ordre de 2000ms (deux secondes), ça va être l'enfer.

Donc j'imagine que ici dans mon cas il y a donc des élément proritaires à charger avant la style et que sans doute qu'une fois ces éléments chargés il y a un latence trop longue et que du coup il saute la style... (lol et oui j'aime comprendre le fond des choses ) ?

a écrit :

Minifier et concaténer les scripts JS, et placer les appels de script à la fin du contenu (avant </body>).
- Minifier et concaténer les feuilles de styles, et les appeler dans le HEAD.

Que veut dire par conaténer et minifier ?

a écrit :

S'intéresser aux questions de performances client en général (voir YSlow, Google Page Speed, performance.survol.fr, les livres de Steve Souders, etc.).

J'ai installé Page Speed récemment et c vraiment complet et bien foutu !


Dernière chose, aurais tu de la documentation de qualité sur le fonctionnement (interne) général d'un navigateur à me suggérer ?



Merci encore à toi et une bonne soirée.
Modifié par Diox (26 Aug 2009 - 23:12)

Diox a écrit :

Que veut dire par conaténer et minifier ?

Exemple : prendre un fichier javascript et le mettre sur une seule ligne sans espaces, même chose pour le css. Grâce à ce type de pratique j'ai déjà réussis à gagner 50% sur la taille d'un fichier css très long.
Modifié par N-J (27 Aug 2009 - 08:43)

N-J a écrit :
Exemple : prendre un fichier javascript et le mettre sur une seule ligne sans espaces, même chose pour le css.

Pour JavaScript, on peut aussi faire du remplacement de variable (ma_super_variable devient a1, par exemple). Bien sûr on utilise des outils qui gèrent tout ça automatiquement, comme JSMin, JSMin+ ou YUI Compressor.

Le plus important pour les connexions lentes avec forte latence n'est pas forcément de minifier les fichiers, mais plutôt de les concaténer (je te laisse ouvrir ton dictionnaire ).

Intéressant à savoir tout ça... merci pour les infos!