Beschleunigen Sie Ihre Website mit CSS Sprites

Spritemaster Web

Ich schreibe ziemlich viel über die Seitengeschwindigkeit auf dieser Site und es ist ein wichtiger Teil der Analysen und Verbesserungen, die wir an den Sites unserer Kunden vornehmen. Abgesehen von der Umstellung auf leistungsstarke Server und der Verwendung von Tools wie Content Delivery NetworksEs gibt eine Reihe anderer Programmiertechniken, die ein durchschnittlicher Webentwickler verwenden kann.

Der Standard für das ursprüngliche Cascading Style Sheet ist jetzt über 15 Jahre alt. CSS war eine wichtige Entwicklung in der Webentwicklung, da es Inhalte vom Design trennte. Schauen Sie sich diesen Blog und jeden anderen an und der größte Teil des Stylingunterschieds befindet sich einfach im angehängten Stylesheet. Stylesheets sind ebenfalls wichtig, da sie lokal in einem Cache in Ihrem Browser gespeichert werden. Wenn Benutzer Ihre Website weiterhin besuchen, laden sie daher nicht jedes Mal ein Stylesheet herunter, sondern nur den Seiteninhalt.

Ein Element von CSS, das häufig nicht ausreichend genutzt wird, sind: CSS-Sprites. Wenn ein Benutzer Ihre Website besucht, bemerken Sie möglicherweise nicht, dass er nicht einfach nur eine Anfrage für die Seite stellt. Sie mehrere Anfragen stellen… Eine Anfrage für die Seite, für Stylesheets, für angehängte JavaScript-Dateien und dann für jedes Bild. Wenn Sie ein Thema haben, das eine Reihe von Bildern für Rahmen, Navigationsleisten, Hintergründe, Schaltflächen usw. enthält, muss der Browser jedes einzelne einzeln von Ihrem Webserver anfordern. Multiplizieren Sie das mit Tausenden von Besuchern und das können Zehntausende von Anfragen an Ihren Server sein!

Dies verlangsamt wiederum Ihre Site. EIN Eine langsame Website kann sich dramatisch auf das Engagement und die Conversions auswirken das macht dein Publikum. Eine Strategie, die großartige Webentwickler anwenden, besteht darin, alle Bilder in einer einzigen Datei zusammenzufassen Sprite. Anstatt für jedes Ihrer Datei-Images eine Anfrage zu stellen, muss jetzt nur noch eine einzige Anfrage für das einzelne Sprite-Image gestellt werden!

Sie können etwa zu lesen Wie CSS Sprites bei CSS-Tricks funktionieren or CSS Sprite des Smashing Magazine Post. Es geht mir nicht darum, Ihnen zu zeigen, wie Sie sie verwenden, sondern nur, um Sie zu beraten, um sicherzustellen, dass Ihr Entwicklungsteam sie in die Site integriert. Das von CSS Tricks bereitgestellte Beispiel zeigt 10 Bilder, die 10 Anfragen sind und sich auf 20.5 KB summieren. Wenn es in einem einzigen Sprite gesammelt wird, ist es 1 Anfrage, die 13kb ist! Die Roundtrip-Anfrage- und Antwortzeiten für 9 Bilder sind jetzt weg und die Datenmenge wird um mehr als 30% reduziert. Multiplizieren Sie das mit der Anzahl der Besucher auf Ihrer Website und Sie werden wirklich einige Ressourcen sparen!

globalnavDas Apfel Navigationsleiste ist ein gutes Beispiel. Jede Schaltfläche hat ein paar Zustände … egal ob Sie sich auf der Seite befinden, außerhalb der Seite sind oder die Maus über die Schaltfläche bewegen. CSS definiert die Koordinaten der Schaltfläche und zeigt dem Browser des Benutzers die Region des korrekten Zustands an. Alle diese Zustände sind in einer einzigen Grafik zusammengefasst – aber Region für Region wie im Stylesheet angegeben dargestellt.

Wenn Ihre Entwickler Tools lieben, gibt es eine Menge, die ihnen helfen können, einschließlich der Kompass CSS Framework, AnfrageReduzieren für ASP.NET, CSS-Spriter für Ruby, CSSSprite-Skript für Photoshop, SpritePad, SpriteRight, SpriteKuh, NullSprites, CSS Sprite Generator von Project Fondue, Sprite-Master-WebUnd der SpriteMe Lesezeichen.

Screenshot von Sprite-Master-Web:
Spritemaster Web

Martech Zone verwendet keine Hintergrundbilder im gesamten Design, daher müssen wir diese Technik derzeit nicht einsetzen.

2 Kommentare

  1. 1

    Warten Sie ... ist nicht die gesamte Sammlung ein "Bild" (oder eine "Ebene") und jedes Unterbild (oder jede Untergruppe von Bildern bei animierten oder sich interaktiv ändernden) ein "Sprite"?

    Vielleicht wurde das Zeug umbenannt, seit ich das letzte Mal mit so etwas umgegangen bin, aber ich hätte schwören können, dass das Sprite das Element war, das angezeigt wurde, nicht die Big-Data-Tabelle, aus der es gezogen wurde.

    ("Sprite-Tisch" ... das war es nicht?)

    • 2

      Wir reden vielleicht zwei verschiedene Dinge, Mark. Mit CSS können Sie grundsätzlich mithilfe von Koordinaten angeben, welcher Teil einer Bilddatei angezeigt werden soll. Auf diese Weise können Sie alle Ihre Bilder in einem einzigen "Sprite" zusammenfassen und dann einfach auf den Bereich zeigen, den Sie mit dem CSS anzeigen möchten.

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.