Wie kann ich den Browser dazu ermutigen, Bilder aus einer CSS-Datei schneller herunterzuladen?

Ich benutze CSS, um viele meiner Bilder (als Hintergründe für <div>) zu platzieren und stelle oft fest, dass sie auf diese Weise sehr langsam geladen werden. Sie scheinen das Letzte zu sein, was geladen werden muss. Es dauert eine Weile, bis selbst kleine Symbolbilder auf diese Weise angezeigt werden. Gibt es eine Möglichkeit, dem Browser eine Priorität für Bilder zuzuweisen? Oder soll es die Bilder in der CSS-Datei früher herunterladen und früher rendern?

CSS ist für das Styling gedacht, nicht für den Inhalt. Browser versuchen (zu Recht), Inhalte anzuzeigen, bevor sie Stile hinzufügen, weshalb Bilder in Stylesheets normalerweise zuletzt heruntergeladen werden. Wenn Bilder für Ihren Inhalt wichtig sind, fügen Sie sie über Standard-HTML- <IMG>Tags hinzu.

Verwenden Sie absolute URIs aus Ihrem Stylesheet und fügen Sie die Bilder aus IMG-Tags zu einem <div>auf der Seite ausgeblendeten hinzu (dies setzt voraus, dass Sie auf jeder Seite dieselben Bilder verwenden; idealerweise in der Fußzeile, damit sie bei jedem Seitenaufruf geladen und zwischengespeichert werden ).

Bilder auf der Seite erhalten Priorität und werden nach dem Zwischenspeichern der Bilder bei nachfolgenden Seitenanforderungen sofort gerendert.

Für Browser, die den Daten-URI-Typ unterstützen ( Informationen finden Sie unter http://en.wikipedia.org/wiki/Data_Uri ), um das Bild in das CSS selbst aufzunehmen.

Dies hat jedoch einige Nachteile:

• Die Daten werden neu geladen, wenn das CSS nicht separat zwischengespeichert wird, aber es sei denn, Ihr CSS ändert sich regelmäßig, ist dies kein großes Problem.
• Die fehlende Vererbung von CSS und solche Mittel können zu Zeiten (Verschwendung von Bandbreite) führen, in denen Sie dieselbe Grafik mehrmals einschließen oder die in Ihrem Dokument verwendeten Klassen ändern müssen.
• Die Bilder werden auf diese Weise Base64-codiert, was bedeutet, dass sie mehr Bandbreite beanspruchen (obwohl das Bandbreitenproblem viel weniger wichtig ist, wenn Sie die Daten komprimiert senden).
• Sie müssen alternative Stile für Browser bereitstellen, die die Daten-URIs nicht unterstützen, von denen einige nicht ungewöhnlich sind (z. B. IE6 und IE7).

Derzeit kann nicht angegeben werden, welche Dateien zuerst heruntergeladen werden sollen. Zu Ihrer Information: Bilder, die in CSS-Dateien als Hintergrundbilder angegeben sind, werden wahrscheinlich zuletzt heruntergeladen, weil der Browser sie als nicht inhaltlich und daher mit niedrigerer Priorität ansieht. Verwenden Sie sie daher nicht für wichtige Bilder, die Sie schnell laden möchten.

Verwenden Sie CSS-Sprites , insbesondere für Symbole.

Machen Sie Ihre Bilder so klein wie möglich. Sie können smush.it verwenden , um unnötige Bytes zu entfernen.