Äert Site beschleunegen mat CSS Sprites

spritemaster Web

Ech schreiwen iwwer Säitegeschwindegkeet nawell e bëssen op dësem Site an et ass e wichtegen Deel vun der Analyse an de Verbesserungen déi mir op de Clienten vun eise Clienten maachen. Niewent der Bewegung op mächtege Server an d'Benotzung vun Tools wéi Inhalt Liwwerung Netzwierker, et ginn eng Rei aner Programméierungstechniken, déi den duerchschnëttleche Webentwéckler benotze kann.

De Standard fir den originelle Cascading Style Sheet ass elo iwwer 15 Joer al. CSS war eng wichteg Evolutioun an der Webentwécklung well se den Inhalt vum Design getrennt huet. Kuckt dëse Blog an all aner an d'Majoritéit vum Stylingsënnerscheed ass einfach am ugehaangene Styleblad. Styleblieder sinn och wichteg well se lokal an engem Cache an Ärem Browser gelagert sinn. Als Resultat, wann d'Leit weider op Ärem Site besichen, downloaden se net all Kéier e Stilblat ... just de Säiteninhalt.

Een Element vum CSS dat dacks ënnerbenutzt ass CSS Sprites. Wann e Benotzer Är Websäit besicht, kënnt Dir net wëssen datt se net einfach eng Ufro fir d'Säit maachen. Si maachen méi Ufroen... eng Ufro fir d'Säit, fir all Styleblieder, fir all befestegt JavaScript Dateien, an dann all Bild. Wann Dir en Thema hutt dat eng Serie vu Biller fir Grenzen, Navigatiounsbarren, Hannergrënn, Knäppercher, etc huet ... de Browser muss all eenzel ufroen, all Kéier vun Ärem Webserver. Multiplizéiert dat vun Dausende vu Besucher an dat kënnen Zéngdausende vun Ufroen op Ärem Server sinn!

Dëst verlangsamt Äre Site. A lues Site kann en dramateschen Impakt op d'Engagement an d'Conversiounen hunn datt Äert Publikum mécht. Eng Strategie déi grouss Webentwéckler benotzen ass all d'Biller an eng eenzeg Datei ze setzen ... genannt a sprite. Anstatt eng Ufro fir all Är Dateibiller ze maachen, muss elo nëmmen eng eenzeg Ufro fir dat eenzelt Sprite Bild sinn!

Dir kënnt elo liesen wéi CSS Sprites bei CSS-Tricks funktionnéieren or Smashing Magazine's CSS Sprite posten. Mäi Punkt ass net Iech ze weisen, wéi Dir se benotzt, just fir Iech ze beroden, datt Äert Entwécklungsteam se op de Site integréiert. D'Beispill dat CSS Tricks ubitt weist 10 Biller déi 10 Ufroen sinn an derbäi bis 20.5Kb. Wann an enger eenzeger Sprite gesammelt ass, ass et 1 Ufro dat ass 13kb! D'Rondrees Ufro an d'Äntwertzäiten fir 9 Biller sinn elo fort an d'Quantitéit vun Daten gëtt ëm méi wéi 30% reduzéiert. Multiplizéiert dat mat der Unzuel vun de Visiteuren op Ärem Site an Dir wäert wierklech e puer Ressourcen raséieren!

globalnavd' Apple Navigatiounsbar ass e super Beispill. All Knäppchen huet e puer Staaten ... egal ob Dir op der Säit sidd, ausser der Säit oder iwwer de Knäppchen mousst. CSS definéiert d'Koordinaten vum Knäppchen a presentéiert d'Regioun vum richtege Staat dem Benotzer Browser. All dës Staaten sinn zesummegefall an enger eenzeger Grafik - awer ugewisen Regioun fir Regioun wéi am Stilblat spezifizéiert.

Wann Är Entwéckler Handwierksgeschir gär hunn, ginn et eng Tonn dobaussen, déi hinnen hëllefe kënnen, och de Kompass CSS Kader, RequestReduce fir ASP.NET, CSS-Spriter fir Ruby, CSSSprite Skript fir Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondue's CSS Sprite Generator, Sprite Master Web, An der SpriteMe Bookmarklet.

Screenshot of Sprite Master Web:
spritemaster Web

Martech Zone benotzt keng Hannergrondbiller uechter säin Thema, dofir musse mir dës Technik zu dësem Zäitpunkt net asetzen.

2 Comments

  1. 1

    Waart ... ass d'ganz Sammlung net e "Bild" (oder e "Fliger"), an all Ënnerbild (oder Ënnergrupp vu Biller am Fall vun animéierten oder interaktiv änneren) e "Sprite"?

    Vläicht ass d'Saachen ëmbenannt zënter der leschter Kéier wou ech dës Zort Saach gehandhabt hunn, awer ech konnt vereedegen datt de Sprite d'Element war dat endlech ugewise gouf, net déi grouss Datentabell aus där se ofgezunn ass.

    ("Sprite Table" ... dat war et net?)

    • 2

      Mir schwätzen vläicht zwou verschidde Saachen, Mark. Mat CSS kënnt Dir grondsätzlech spezifizéieren wéi eng 'Portioun' vun enger Bilddatei fir mat Koordinaten ze weisen. Dëst erlaabt Iech all Är Biller an een eenzegen 'Sprite' ze setzen an dann just op de Beräich ze weisen, deen Dir mat der CSS wëllt weisen.

Wat denks du?

Dëse Site benotzt Akismet fir Spam ze reduzéieren. Léiert wéi Är Kommentarfaten veraarbecht ginn.