Beschleunigen Sie Ihre Website mit CSS Sprites

Spritemaster Web

Ich schreibe ziemlich viel über die Seitengeschwindigkeit auf dieser Website und dies ist ein wichtiger Teil der Analyse und Verbesserungen, die wir an den Websites 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 Styling-Unterschieds 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, ist CSS-Sprites. Wenn ein Benutzer Ihre Website besucht, stellen Sie möglicherweise nicht fest, dass er nicht 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. Ich möchte Ihnen nicht zeigen, wie Sie sie verwenden, sondern Sie nur beraten, um sicherzustellen, dass Ihr Entwicklungsteam sie in die Site integriert. Das Beispiel, das CSS Tricks bereitstellt, zeigt 10 Bilder, die 10 Anforderungen sind und sich auf 20.5 KB summieren. In einem einzigen Sprite versammelt, ist es 1 Anfrage, die 13kb ist! Die Roundtrip-Anforderungs- und Antwortzeiten für 9 Bilder sind jetzt weg und die Datenmenge wird um mehr als 30% reduziert. Multiplizieren Sie dies mit der Anzahl der Besucher auf Ihrer Website, und Sie werden einige Ressourcen wirklich sparen!

globalnavDer Apfel Die Navigationsleiste ist ein gutes Beispiel. Jede Schaltfläche hat einige Status… unabhängig davon, ob Sie sich auf der Seite, außerhalb der Seite oder mit der Maus über die Schaltfläche befinden. CSS definiert die Koordinaten der Schaltfläche und zeigt dem Browser des Benutzers den Bereich mit dem richtigen Status an. Alle diese Zustände werden in einer einzigen Grafik zusammengefasst, jedoch wie im Stylesheet angegeben regional angezeigt.

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 während des gesamten Themas, daher müssen wir diese Technik zu diesem Zeitpunkt 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.