Snabba upp webbplatsen med CSS sprites

  • Publicerat: 2010-05-28 @ 09:47
  • Kategorier: Teknisk SEO
  • Författare: admin
  • Kommentarer: 2

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!

Dela med dig

pushahajpafacebookmyspacetwittergooglelinkedindeltechnorati

Kommentarer: 2

  1. Jocke skriver:
    01 juni 2010 kl 21:45

    Nu får du gärna förtydliga lite vad du menar, vad skulle antal bilder / grafiska element ha med hastigheten som Google mäter av en sida att göra?

    Självklart mäter Google hastighet, men varje ”sak” som länkas in görs via ett nytt HTTP(S)-anrop, alltså tar det lika lång tid att ladda själva HTML dokumentet oavsett om du länkar in en bild eller 100 bilder.

    Rent visuellt går det snabbare att ladda sidan eftersom webbläsare laddar in externa dokument (som javascript, CSS, bilder m.m) men för att göra ett HTTP anrop mot själva dokumentet, som t.ex. Google gör spelar det ju ingen roll hur många externa källor du länkar in.

    Svara
    • admin skriver:
      04 juni 2010 kl 7:36

      Google eftersträvar alltid att servera det bästa möjliga resultatet för användaren. Sökmotorn blir allt bättre på att se webbplatsen som en helhet och den håller även koll på de ”externa” filerna på en webbplats. I exempelvis Google Webmaster Tools får jag förslag om att kombinera Javascript samt gzippa CSS och Javascript. Detta för att skapa en så snabb webbplats som möjligt.

      Om man kan göra webbplatsen betydligt snabbare för användaren genom att använda CSS sprites och tid finns, bör man kika på det. På Google Page Speeds dokumentations-sida finns information om tips på hur man snabbar upp sin webbplats.

      Svara