Snabba upp webbplatsen med CSS sprites

Jag har tidigare tagit upp att sökmotorer nuförtiden ser hastighet som en ranking-faktor. Det finns mycket man kan göra för att förbättra hastigheten. Ett sätt är att använda sig av CSS sprites.

Vad är CSS sprites?

En webbplast med design innehåller i regel flera grafiska element så som knappar och bakgrundsbilder. Vid varje bild som ska laddas in måste en förfrågan till servern göras, ett så kallat ‘HTTP request’.

Om man har många små grafiska element kan det vara en idé att sätta ihop dem till en enda stor bild. Den stora bilden kallas för en ‘sprite’. Nu krävs bara en förfrågan (ett HTTP request) istället för flera.

Hur fungerar det?

När man sedan lägger in en bild utnyttjar man möjligheten att i CSS flytta bakgrunden i x- och y-led samt endast visa en del av den. Det skulle kunna liknas vid en karta där man med en ficklampa lyser över en viss yta. Samma bild används till alla grafiska element men med olika positioneringsvärden för varje element.

Exempel

li a { background-image:url('image.png'); }
li a.item1 { background-position: 0px 0px; }
li a:hover.item1 { background-position: 0px -50px; }
li a.item2 { background-position: 0px -100px; }
li a:hover.item2 { background-position: 0px -200px; }

För mer information, läs på css-tricks.com.

Vet du några fler tips på hur man kan snabba upp webbplatsen, skriv gärna en kommentar!