Hat zu viele Hintergrund-Bild in CSS-Leistung auswirken?

Question

Einige Benutzer berichten, dass meine Website ist zu langsam Und ich denke, Hintergrundbilder in CSS könnte eine möglich sein, Täter

Ich habe eine Seite, die ein benutzerdefinierten Build-System verwendet um alle CSS zu verketten, komprimieren sie (YUI Compressor), CSS Sprites machen automatisch (smartsprites) und ich am Ende für die mit einem 9kb CSS up ganze Seite enthält diese alle CSS für Hintergrund-Bilder schließlich d ist sie wurden rund 60 (mehrere auf dem gleichen Sprite gehen nicht sicher, wie viele)

Ich frage mich, ob das Standardverhalten von Browsern je nach Bedarf zum Download ist es, die Bilder (wenn sie einen Selektor entsprechen) oder laden Sie sie alle.

Im Moment Firebug in Firefox scheint darauf hinzudeuten, dass sie alle heruntergeladen. Welche Techniken würden Sie vorschlagen, i, das Problem zu vermeiden, verwenden würde, und oder mildert es.

edit: Ich falsch verstanden Firebug, die Bilder, die heruntergeladen werden, gehören zu einer Lightview dass versteckt wird, aber die Hintergrund-Bilder werden auf den dom abgestimmt.

Answer 1

Nein, in der Tat ist es besser, sie in der CSS zu setzen als in der Markup.

Die Bild Anrufe werden nicht auf der Seite blockieren und so die Bilder geladen sind, werden sie auf der Seite dargestellt werden, so insgesamt ist es eine gute Idee ist, sie per CSS zu laden. Ganz zu schweigen davon, dass dieses Design auch flexibler ist.

(Es ist selbstverständlich, dass jeder dieser Bilder wird dauern Bandbreite und zusätzliche HTTP-Anfragen)

Answer 2

der Standardbrowser Verhalten zwei Elemente zu einer Zeit (dh 2 HTTP-Anfragen) zum Download bereit steht, wenn Sie denken, Sie haben viele Bilder, die eine Sub-Domain für Ihre Bilder wie images.yoursite.com erstellen und Sie werden beginnen, die Browser machen parallel Wunsch zu sehen, und man kann eine gewisse Verbesserung in der Leistung sehen

Answer 3

(Side Thema. Nicht wirklich Ihre Frage zu beantworten. Aber vielleicht interessant oder auch relevant sein.)

ich denke, eine weitere mögliche Schuldige ist, dass „einige Nutzer“ wird immer das Gefühl, dass Ihre Website „zu langsam“ ist. (Vielleicht ist es eher ein Nervenzusammenbruch als Stack-Überlauf, was? Was tun diese Benutzer betrachten eine schnelle Website zu sein? Können sie geben Beispiele? Wie schnell ist ihre Verbindung und Computer? Wo sie sind, und wo ist der Server befindet? Was em < genau> ist zu langsam? der Anmeldeprozess? Anschauen von Videos in HD? Scrolling das Fenster? Laden Firefox? Immerhin ist es die Menschen .. n'est pas?)

Answer 4

Vielleicht einen genaueren Blick auf das Bild nehmen (s) Sie senden, vor allem wenn es viele von ihnen sind in einem einzigen „Sprite“ Bild zusammengestellt wird.

Was passieren könnte, ist, dass das Bild, das Sie zeigt auf sehr groß ist. Sicher, es sollte nur einmal (Nutzen der Sprite-Methode) geladen werden, aber wenn es mehr hundert KB ist es könnte sicherlich einige Performance-Probleme verursachen.

Answer 5

Es gibt eine schöne Firefox-Plugin namens YSlow, die Ihnen einige nützlichen Informationen über Performance-Optimierung gibt. Es zeigt Ihnen, Performance-Probleme erkannt, und gibt Ihnen Links zu Artikeln eine Verbesserung hindeutet. http://developer.yahoo.com/yslow/

Einige Informationen über bewährte Praktiken http://developer.yahoo.com/performance/rules.html