Fremskynde nettstedet ditt med CSS Sprites

spritemaster web

Jeg skriver om sidehastighet ganske mye på dette nettstedet, og det er en viktig del av analysen og forbedringene vi gjør på våre kunders nettsteder. Bortsett fra å flytte til kraftige servere og bruke verktøy som Innholdsleveringsnettverk, det er en rekke andre programmeringsteknikker som den gjennomsnittlige webutvikleren kan bruke.

Standarden for det originale Cascading Style Sheet er over 15 år nå. CSS var en viktig utvikling i nettutvikling fordi den skilt innhold fra design. Se på denne bloggen og andre, og størstedelen av stylingsforskjellen er ganske enkelt i det vedlagte stilarket. Stilark er også viktig fordi de lagres lokalt i en cache i nettleseren din. Som et resultat, når folk fortsetter å besøke nettstedet ditt, laster de ikke ned et stilark hver gang ... bare sideinnholdet.

Et element i CSS som ofte er underutnyttet, er CSS Sprites. Når en bruker besøker nettstedet ditt, skjønner du kanskje ikke at de ikke bare ber om en forespørsel om siden. De komme med flere forespørsler... en forespørsel om siden, for alle stilark, for eventuelle vedlagte JavaScript-filer, og deretter hvert bilde. Hvis du har et tema som har en serie bilder for grenser, navigasjonsfelt, bakgrunner, knapper osv ... må nettleseren be om hvert enkelt, om gangen fra webserveren din. Multipliser det med tusenvis av besøkende, og det kan være titusenvis av forespørsler til serveren din!

Dette bremser siden din. EN tregt nettsted kan ha en dramatisk innvirkning på engasjement og konverteringer som publikum lager. En strategi som flotte webutviklere bruker er å sette alle bildene i en enkelt fil ... kalt a sprite. I stedet for å gjøre en forespørsel om hvert av filbildene dine, trenger det nå bare å være en enkelt forespørsel om enkelt sprite-bildet!

Du kan lese om hvordan CSS Sprites fungerer på CSS-Tricks or Smashing Magazine's CSS Sprite post. Poenget mitt er ikke å vise deg hvordan du bruker dem, bare for å råde deg til å sikre at utviklingsteamet ditt integrerer dem på nettstedet. Eksemplet som CSS Tricks gir viser 10 bilder som er 10 forespørsler og legger opp til 20.5 KB. Når det er samlet i en enkelt sprite, er det 1 forespørsel som er 13 kb! Returforespørselen og responstidene for 9 bilder er nå borte og datamengden reduseres med mer enn 30%. Multipliser det med antall besøkende på nettstedet ditt, og du vil virkelig barbere noen ressurser!

globalnavDe eple navigasjonslinjen er et godt eksempel. Hver knapp har noen få tilstander ... enten du er på siden, utenfor siden eller holder musen over knappen. CSS definerer koordinatene til knappen og presenterer regionen i riktig tilstand for brukerens nettleser. Alle disse tilstandene er kollapset sammen i en enkelt grafikk - men vises region for region som spesifisert i stilarket.

Hvis utviklerne dine elsker verktøy, er det massevis der ute som kan hjelpe dem, inkludert Kompass CSS-rammeverk, RequestReduce for ASP.NET, CSS-Spriter for Ruby, CSSSprite-skript for Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondues CSS Sprite Generator, Sprite Master Web, og SpriteMe Bokmerke.

Skjermbilde av Sprite Master Web:
spritemaster web

Martech Zone bruker ikke bakgrunnsbilder gjennom hele temaet, så vi trenger ikke distribuere denne teknikken for øyeblikket.

2 Kommentarer

  1. 1

    Vent ... er ikke hele samlingen et "bilde" (eller et "plan"), og hvert underbilde (eller undergruppe av bilder i tilfelle animerte eller interaktivt skiftende) er en "sprite"?

    Kanskje ting har blitt omdøpt siden sist gang jeg håndterte denne typen ting, men jeg kunne svor at Sprite var elementet som endte med å bli vist, ikke den store datatabellen den ble hentet fra.

    (“Sprite table” ... var det ikke det?)

    • 2

      Vi snakker kanskje to forskjellige ting, Mark. Med CSS kan du i utgangspunktet spesifisere hvilken 'del' av en bildefil som skal vises ved hjelp av koordinater. Dette lar deg sette alle bildene dine i en enkelt 'sprite' og deretter bare peke på området du vil vise med CSS.

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.