Le fait d'avoir trop de background-image en css affectent les performances?

Question

Certains utilisateurs rapportent que mon site est trop lent Et je pense que les images de fond pourraient être dans css un possible coupable

J'ai un site qui utilise un système de construction personnalisé concaténer tous les css, les compresser (compresseur Yui), faire sprites css automatiquement (SmartSprites) et je finis avec un CSS 9kb pour la page entière, cela inclut tous les CSS pour fond-images est enfin d ils ont été environ 60 (plusieurs vont dans le même sprite ne sais pas combien)

Je me demandais si le comportement par défaut des navigateurs est de télécharger les images au besoin (quand ils correspondent à un sélecteur) ou les télécharger.

En ce moment Firebug dans Firefox semble indiquer qu'ils sont tous été téléchargés. Quelles techniques proposeriez-vous j'utiliser pour éviter le problème, et ou en atténuer les effets.

modifier: J'ai mal lu Firebug, les images qui sont téléchargées appartiennent à un Lightview ce qui est caché mais le fond-images sont adaptés aux dom.

Answer 1

Non, en fait, il est préférable de les mettre dans le CSS que dans le balisage.

Les appels d'image ne bloque pas la page et les images sont chargées ils seront rendus sur la page, il est donc globalement une bonne idée de les charger via CSS. Sans oublier que cette conception est également plus souple.

(Il va sans dire que chacune de ces images prendront la bande passante et les requêtes HTTP supplémentaires)

Answer 2

le comportement par défaut du navigateur est de télécharger deux éléments à la fois (par exemple 2 des requêtes http), si vous pensez que vous avez beaucoup d'images créer un sous-domaine pour vos images comme images.yoursite.com et vous commencerez à voir les navigateurs faire la demande parallèle, et vous pouvez voir une certaine amélioration de la performance

Answer 3

(sujet Side. Pas vraiment répondre à votre question. Mais peut-être intéressant ou même pertinent).

Je pense qu'une autre coupable possible est que « certains utilisateurs » se sentiront toujours que votre site est « trop lent ». (Peut-être qu'il est plus d'une ventilation mentale que chose Stack Overflow? Qu'est-ce que ces utilisateurs considèrent être un site rapide? Peuvent-ils donner des exemples? Quelle est la vitesse de leur connexion et l'ordinateur? Où sont-ils, et où est votre serveur situé? Qu'est-ce que exactement est lent? le processus d'inscription? Regarder des vidéos en HD? Scrolling la fenêtre? Chargement Firefox? Après tout, il est l'homme .. ne est pas?)

Answer 4

Peut-être prendre un peu plus près l'image (s) que vous envoyez, surtout s'il y a beaucoup d'entre eux étant compilé en une seule image « sprite ».

Qu'est-ce qui pourrait se passer est que l'image vous pointez est très grand. Bien sûr, il ne doit être chargée une fois (au profit de la méthode de sprite), mais si elle est plusieurs centaines de Ko, il pourrait certainement causer des problèmes de performance.

Answer 5

Il y a un plugin firefox bien appelé YSlow qui vous donne des informations utiles sur l'optimisation des performances. Il vous montre des problèmes de performance qu'il a détecté, et vous donne des liens vers des articles suggérant une amélioration. http://developer.yahoo.com/yslow/

Quelques informations sur les meilleures pratiques http://developer.yahoo.com/performance/rules.html