Er zijn veel manieren om de laadtijd van je website te verbeteren. Het begint uiteraard bij een goede, betrouwbare hostingpartij (zoals Savvii). Geloof me; 25 websites hosten voor 50 eurocent per maand is echt te mooi om waar te zijn. Zeker wanneer er ook nog eens 100% uptime wordt beloofd (zoals bij Versio).
Een andere manier om de laadtijd te verbeteren, is door afbeeldingen die op iedere pagina van je website terugkomen te combineren door middel van een (CSS) Sprite.
Wat is een (CSS) Sprite?
Een sprite is één grote afbeelding met daarin de losse afbeeldingen (die normaal dus als losse afbeeldingen op je website zouden staan). Hierin kan bijvoorbeeld je logo staan, maar ook social media “share” buttons en banners die op iedere pagina terugkomen.
Waar je normaal een afbeelding direct op je website zou inladen, doe je dat nu op een andere manier. Op de plek waar normaal de afbeelding zou staan, komt nu een <span>of een <div> te staan met een bepaalde “class”. In je CSS-bestand zorg je ervoor dat dit element de juiste hoogte en breedte heeft, én dat het juiste gedeelte van de sprite getoond wordt.
Een goed voorbeeld van een sprite is te zien op Frankwatching (een bekende Nederlandse blog). Eén van de sprites die Frankwatching gebruikt is hier te zien.
Het voordeel van Sprites
Het gebruiken van een CSS Sprite heeft één heel belangrijk voordeel. Als je bijvoorbeeld 10 afbeeldingen hebt die op iedere pagina terugkomen, is een CSS Sprite zeer gunstig voor de laadtijd. Dit komt doordat iedere losse afbeelding die moet worden geladen, een eigen “HTTP Request” nodig heeft, en iedere onnodige HTTP request is er één te veel.
Je zorgt er dus voor dat je tien afbeeldingen kunt laten zien, terwijl daar maar één afbeelding voor hoeft te worden geladen (en dus is er maar één http request voor nodig). Dat is goed voor de laadtijd en bovendien wordt je server hierdoor minder belast.
De laadtijd van je pagina is overigens niet alleen voor je bezoekers belangrijk; ook Google gebruikt de laadtijd van websites als één van de vele factoren om de positie in Google te bepalen.
Hoe maak je een CSS Sprite?
Je kunt natuurlijk zelf al je afbeeldingen gaan combineren. Vervolgens reken je dan precies uit hoe groot ieder element moet zijn en welke positie de achtergrond moet krijgen. Je zult hier ongeveer een halve dag mee bezig zijn.
Gelukkig zijn er heel veel handige tooltjes beschikbaar waarmee het maken van CSS Sprites opeens erg makkelijk wordt. Neem bijvoorbeeld ZeroSprites. Hier upload je al je afbeeldingen, en ZeroSprites maakt er automatisch één geheel van én geeft je de benodigde CSS-code.
