Påskynda din webbplats med CSS Sprites

spritmaster web

Jag skriver om sidhastighet ganska mycket på den här webbplatsen och det är en viktig del av analysen och förbättringarna vi gör på våra kunders webbplatser. Bortsett från att flytta till kraftfulla servrar och använda verktyg som Content Delivery Networks, det finns ett antal andra programmeringstekniker som den genomsnittliga webbutvecklaren kan använda.

Standarden för det ursprungliga Cascading Style Sheet är över 15 år gammal nu. CSS var en viktig utveckling i webbutveckling eftersom det skilde innehåll från design. Titta på den här bloggen och alla andra och majoriteten av stylingskillnaden finns helt enkelt i det bifogade formatmallen. Stilmallar är också viktiga eftersom de lagras lokalt i en cache i din webbläsare. Som ett resultat, när människor fortsätter att besöka din webbplats, laddar de inte ner ett formatmall varje gång ... bara sidans innehåll.

En del av CSS som ofta är underutnyttjad är CSS Sprites. När en användare besöker din webbplats inser du kanske inte att de inte bara gör en begäran om sidan. De göra flera förfrågningar... en begäran om sidan, för alla stilark, för bifogade JavaScript-filer och sedan för varje bild. Om du har ett tema som har en serie bilder för gränser, navigeringsfält, bakgrunder, knappar osv ... måste webbläsaren begära var och en, en i taget från din webbserver. Multiplicera det med tusentals besökare och det kan vara tiotusentals förfrågningar till din server!

Detta i sin tur saktar ner din webbplats. A långsam webbplats kan ha en dramatisk inverkan på engagemang och omvandlingar som din publik gör. En strategi som stora webbutvecklare använder är att placera alla bilder i en enda fil ... kallas a sprite. I stället för att göra en förfrågan för var och en av dina filbilder, behöver det nu bara finnas en enda begäran om den enda sprite-bilden!

Du kan läsa om hur CSS Sprites fungerar på CSS-Tricks or Smashing Magazine CSS Sprite posta. Min poäng är inte att visa dig hur du använder dem, bara för att ge dig råd om att ditt utvecklingsteam införlivar dem på webbplatsen. Exemplet som CSS Tricks tillhandahåller visar 10 bilder som är 10 förfrågningar och lägger till upp till 20.5 KB. När det samlas i en enda sprite är det 1 begäran som är 13 kb! Returbegäran och svarstider för 9 bilder är nu borta och mängden data minskas med mer än 30%. Multiplicera det med antalet besökare på din webbplats och du kommer verkligen att raka bort några resurser!

globalnavDu har nu möjlighet Apple navigeringsfältet är ett bra exempel. Varje knapp har några tillstånd ... oavsett om du är på sidan, utanför sidan eller musar över knappen. CSS definierar koordinaterna för knappen och presenterar regionen för rätt tillstånd för användarens webbläsare. Alla dessa tillstånd kollapsas tillsammans i en enda grafik - men visas region för region enligt specifikationen i stilarket.

Om dina utvecklare älskar verktyg finns det massor där ute som kan hjälpa dem, inklusive Kompass CSS-ramverk, RequestReduce för ASP.NET, CSS-Spriter för Ruby, CSSSprite-skript för Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondues CSS Sprite Generator, Sprite Master Web, Och den SpriteMe Bokmärke.

Skärmdump av Sprite Master Web:
spritmaster web

Martech Zone använder inte bakgrundsbilder under hela temat, så vi behöver inte distribuera denna teknik just nu.

2 Kommentarer

  1. 1

    Vänta ... är inte hela samlingen en ”bild” (eller ett ”plan”), och varje delbild (eller undergrupp av bilder i fallet med animerade eller interaktivt förändrade) är en “sprite”?

    Kanske har saker döpt om sedan förra gången jag hanterade den här typen av saker, men jag kunde svära att Sprite var det element som slutade visas, inte den stora datatabellen den drogs från.

    ("Sprite table" ... var det inte det?)

    • 2

      Vi kan prata om två olika saker, Mark. Med CSS kan du i princip ange vilken 'del' av en bildfil som ska visas med hjälp av koordinater. Detta gör att du kan placera alla dina bilder i en enda "sprite" och sedan bara peka på det område du vill visa med CSS.

Vad tror du?

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.