Fremskynde dit websted med CSS Sprites

spritemaster web

Jeg skriver meget om sidehastighed på dette websted, og det er en vigtig del af den analyse og forbedringer, vi foretager på vores kunders websteder. Bortset fra at flytte til magtfulde servere og bruge værktøjer som Content Delivery Networks, der er en række andre programmeringsteknikker, som den gennemsnitlige webudvikler kan bruge.

Standarden for det originale Cascading Style Sheet er nu over 15 år gammel. CSS var en vigtig udvikling inden for webudvikling, fordi den adskilt indhold fra design. Se på denne blog og enhver anden, og størstedelen af ​​stylingforskellen er simpelthen i det vedhæftede stilark. Stilark er også vigtig, fordi de gemmes lokalt i en cache i din browser. Som et resultat, når folk fortsætter med at besøge dit websted, downloader de ikke et stilark hver gang ... bare sideindholdet.

Et element i CSS, der ofte er underudnyttet, er CSS Sprites. Når en bruger besøger dit websted, indser du muligvis ikke, at de ikke blot fremsætter en anmodning om siden. De fremsætte flere anmodninger… En anmodning om siden, for alle stilark, for eventuelle vedhæftede JavaScript-filer og derefter hvert billede. Hvis du har et tema, der har en række billeder til grænser, navigationsbjælker, baggrunde, knapper osv ... browseren skal bede om hvert enkelt, ad gangen fra din webserver. Multiplicer det med tusinder af besøgende, og det kan være titusinder af anmodninger, der er fremsat til din server!

Dette bremser dit websted igen. EN langsom side kan have en dramatisk indvirkning på engagement og konverteringer som dit publikum laver. En strategi, som store webudviklere bruger, er at placere alle billederne i en enkelt fil ... kaldet a sprite. I stedet for at stille en anmodning om hvert af dine filbilleder, behøver der nu kun være en enkelt anmodning om det enkelte sprite-billede!

Du kan læse om hvordan CSS Sprites fungerer på CSS-Tricks or Smashing Magazine's CSS Sprite stolpe. Mit punkt er ikke at vise dig, hvordan du bruger dem, bare for at rådgive dig om at sikre, at dit udviklingsteam integrerer dem på siden. Eksemplet, som CSS Tricks giver, viser 10 billeder, der er 10 anmodninger og tilføjer op til 20.5 KB. Når det er samlet i en enkelt sprite, er det 1 anmodning, der er 13 kb! Returanmodningen og svartiderne for 9 billeder er nu væk, og datamængden reduceres med mere end 30%. Multiplicer det med antallet af besøgende på dit websted, og du vil virkelig barbere nogle ressourcer!

globalnav æble navigationslinje er et godt eksempel. Hver knap har et par tilstande ... hvad enten du er på siden, ikke på siden eller holder musen over knappen. CSS definerer knappens koordinater og præsenterer regionen med den korrekte tilstand for brugerens browser. Alle disse tilstande er sammenklappet i en enkelt grafik - men vises region for region som specificeret i stilarket.

Hvis dine udviklere elsker værktøjer, er der masser derude, der kan hjælpe dem, inklusive Kompas CSS-ramme, RequestReduce til ASP.NET, CSS-Spriter til Ruby, CSSSprite-script til Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondues CSS Sprite Generator, Sprite Master-web, og SpriteMe Bookmarklet.

Skærmbillede af Sprite Master-web:
spritemaster web

Martech Zone bruger ikke baggrundsbilleder i hele sit tema, så vi behøver ikke at implementere denne teknik på dette tidspunkt.

2 Kommentarer

  1. 1

    Vent ... er ikke hele samlingen et "billede" (eller et "plan"), og hvert underbillede (eller undergruppe af billeder i tilfælde af animerede eller interaktivt skiftende) er en "sprite"?

    Måske er ting blevet omdøbt siden sidste gang, jeg håndterede denne slags ting, men jeg kunne sværge, at Sprite var det element, der endte med at blive vist, ikke den store datatabel, det blev trukket fra.

    ("Sprite bord" ... var det ikke det?)

    • 2

      Vi taler måske to forskellige ting, Mark. Med CSS kan du grundlæggende angive, hvilken 'del' af en billedfil der skal vises ved hjælp af koordinater. Dette giver dig mulighed for at placere alle dine billeder i en enkelt 'sprite' og derefter bare pege på det område, du vil vise med CSS.

Hvad mener du?

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.