Uw site versnellen met CSS-sprites

spritemaster web

Ik schrijf nogal wat over paginasnelheid op deze site en het is een belangrijk onderdeel van de analyse en verbeteringen die we aanbrengen aan de sites van onze klanten. Afgezien van het verhuizen naar krachtige servers en het gebruik van tools zoals Content Delivery Networks, zijn er een aantal andere programmeertechnieken die de gemiddelde webontwikkelaar kan gebruiken.

De standaard voor het originele Cascading Style Sheet is nu meer dan 15 jaar oud. CSS was een belangrijke evolutie in webontwikkeling omdat het inhoud scheidde van ontwerp. Kijk naar deze blog en alle andere en het grootste deel van het verschil in stijl zit simpelweg in de bijgevoegde stylesheet. Stylesheets zijn ook belangrijk omdat ze lokaal in een cache in uw browser worden opgeslagen. Als gevolg hiervan, terwijl mensen uw site blijven bezoeken, downloaden ze niet elke keer een stylesheet ... alleen de pagina-inhoud.

Een element van CSS dat vaak onderbenut wordt, is CSS-sprites. Wanneer een gebruiker uw website bezoekt, realiseert u zich misschien niet dat hij niet slechts één verzoek voor de pagina doet. Ze meerdere verzoeken doen… Een verzoek voor de pagina, voor stijlpagina's, voor alle bijgevoegde JavaScript-bestanden en vervolgens voor elke afbeelding. Als je een thema hebt met een reeks afbeeldingen voor randen, navigatiebalken, achtergronden, knoppen, enz… moet de browser ze allemaal een voor een opvragen bij je webserver. Vermenigvuldig dat met duizenden bezoekers en dat kunnen tienduizenden verzoeken aan uw server zijn!

Dit vertraagt ​​op zijn beurt uw site. EEN trage site kan een dramatische impact hebben op de betrokkenheid en conversies die uw publiek maakt. Een strategie die geweldige webontwikkelaars gebruiken, is alle afbeeldingen in een enkel bestand plaatsen ... genaamd een sprite. In plaats van een verzoek in te dienen voor elk van uw bestandsafbeeldingen, hoeft er nu slechts één verzoek voor de enkele sprite-afbeelding te zijn!

U kunt lezen over hoe CSS Sprites werken bij CSS-Tricks or De CSS Sprite van Smashing Magazine post. Mijn punt is niet om u te laten zien hoe u ze kunt gebruiken, maar om u te adviseren om ervoor te zorgen dat uw ontwikkelingsteam ze opneemt in de site. Het voorbeeld dat CSS Tricks biedt, toont 10 afbeeldingen die 10 verzoeken zijn en samen 20.5 KB bedragen. Wanneer verzameld in een enkele sprite, is het 1 verzoek van 13 kB! De round trip-aanvraag en responstijden voor 9 beelden zijn nu verdwenen en de hoeveelheid data is met meer dan 30% verminderd. Vermenigvuldig dat met het aantal bezoekers op uw site en u gaat echt wat middelen scheren!

globalnavHet Appel navigatiebalk is een goed voorbeeld. Elke knop heeft een aantal statussen ... of u nu op de pagina bent, niet op de pagina of met uw muis over de knop beweegt. CSS definieert de coördinaten van de knop en presenteert de regio met de juiste status aan de browser van de gebruiker. Al deze staten worden samengevouwen in één afbeelding, maar worden regio voor regio weergegeven zoals gespecificeerd in het stijlblad.

Als uw ontwikkelaars van tools houden, zijn er tal van mogelijkheden die hen kunnen helpen, waaronder de Compass CSS-framework, VerzoekVerminderen voor ASP.NET, CSS-Spriter voor Ruby, CSSSprite-script voor Photoshop, SpritePad, SpriteRechts, SpriteKoe, ZeroSprites, CSS Sprite Generator van Project Fondue, Sprite Master WebEn SpriteMe Bladwijzer.

Schermafbeelding van Sprite Master Web:
spritemaster web

Martech Zone maakt geen gebruik van achtergrondafbeeldingen in het hele thema, dus we hoeven deze techniek op dit moment niet te implementeren.

2 reacties

  1. 1

    Wacht… is niet de hele verzameling een "afbeelding" (of een "vlak"), en elke subafbeelding (of subgroep afbeeldingen in het geval van geanimeerde of interactief veranderende afbeeldingen) een "sprite"?

    Misschien hebben dingen een nieuwe naam gekregen sinds ik dit soort dingen de laatste keer heb afgehandeld, maar ik had kunnen zweren dat de Sprite het element was dat uiteindelijk werd weergegeven, niet de big data-tabel waaruit het werd gehaald.

    ("Sprite table" ... dat was het niet?)

    • 2

      We hebben het misschien over twee verschillende dingen, Mark. Met CSS kunt u in principe specificeren welk 'gedeelte' van een afbeeldingsbestand moet worden weergegeven met behulp van coördinaten. Hiermee kun je al je afbeeldingen in een enkele 'sprite' plaatsen en vervolgens het gebied aanwijzen dat je met de CSS wilt weergeven.

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.