Tag Archives: css sprites

How can I speed up my website? Part 2

So there I was sitting in front of my computer, it’s Friday, I’ve got Tweetdeck open on the right hand monitor and I see a message including my @forbairt username and my blog post on how to speed up your website. Queue fuzzy feelings :)

Twitter message promoting my post

As one does I says thanks for the mention (it’s the polite thing to do). I’d been playing with my site last night, tweaking a little of this, tweaking a little of that and all on the live site I might add ( probably best you don’t do that if your site is getting any kind of traffic). One of those things I did was to use Google +1 to send a message saying should I just drop google +1 does anyone really use it? ( My verdict is still out. Tech people yes, normal people no at least as I see it) it was picked up though by the same Paul Conroy who’d mentioned me in the tweet earlier.

Like a lot of people I’m a “like” whore ( there I said it :P ) nothing quite like getting likes on your latest blog post / Facebook picture or retweets and favs on a tweet you make ( we seem to think it matters but if it’s not converting into sales does it and how do we measure that? ). Part of the fun for me is seeing the number of shares, tweets and so on. I’ve thrown a WordPress plugin onto my blog for this exact purpose. However what it does is it pulls in Javascript share code from all the major social networks. You’re talking about including Javascript from twitter, facebook, Google Plus, Linked In … and any others you’d care to mention … with those also come the images no doubt and other bits and bobs. Might not sound like a big deal but every time your site is loaded these are getting loaded. (well unless they get cached but we’ll just deal with first page loads here which may be how google views a page).

Social Share Buttons in Action

Paul mentioned that they ended up replacing all of these with static images. 4 Javascript files become 4 images with normal links and this sounds good to me. We end up losing some functionality however. We don’t see any of the Shares / RTs / +1s on our site. ( I think I can live with that for now )

Daft Social Share Links

As you can see from the above image they have a Facebook Like / Tweet / Pin It and G+1 link well I don’t really want the Pin It link for now. If I had more shiny imagery on the site I might again I’ve not looked into the impact that pin it can have on blog traffic.

Anyways how big an issue not having the numbers of shares is I’m not sure. I’d need to get into some A/B testing to determine if seeing a number on a share button increases the likely hood of sharing it as well. This blog was setup a bit over a week ago so it really doesn’t have the numbers so I can test these things and anyways, there are probably posts out there related to this so of course feel free to share links if you’ve got them ( as long as it’s not too spammy and semi reputable throw them into the comments )

So enough with all my yadda yadda :) In my last post I went into how a couple of simple enough things could speed up your website no end. A 3.5MB page load became 2.5MB for 10 – 20 minutes work. I touched upon the idea of reducing the number of images that are getting loaded on the site. Not getting rid of the images as such just getting rid of the number of images that are getting loaded. Confused? :) I like to think I’ve done well.
Well this is my second post on how to speed up your website and I’m going to get into CSS Sprites. What is this CSS magic I speak of? well think of all those images that were on the DollyRouge.ie website. There were around 20 images and they could simply be merged into one image. A small bit of CSS and we can create links that have background images and replace all these images we were previously using. In the case of Dolly Rouge website we replace the 20 or so images with the one. This means only 1 load of an image … less handshaking going on between you and the server … request an image … wait for a response .. start receiving the image .. confirm it’s there and request the next image. (Remember that there are limits on the number of files you can request at the same time as well)

Lets get down to business and some tweaking of images and CSS hacking.

First we need to get some images we want for our website. ( You might have thought I was going to fix up the DollyRouge images but well I need some new share buttons for my site not to mention quick links to my social ninja profiles so the process is kind of identical. )

So I want the following 3 buttons (not the pin it one)

Share Buttons from Daft.ie

Lets put the 3 images into the one image as tight together as possible and we’ll end up with the following.

Share Buttons Image

This image is 143 pixels wide. Time to figure out where the buttons are in x / y coordinates.

Facebook is 49×20 starts at x = 0
Twitter tweet button is 63×20 and it starts at x = 63
Google +1 button is at 32×20 and it starts at x = 112

( I’m using my image editor to see how many pixels wide things are )

While I’m at it there are a few direct link type images I’d like to add to it so I’ll end up with the following image

Generic Site Buttons and images

I’ll also need to create some CSS for the site. The plan is to create a number of links for each of the buttons.

We’ll give the links class names share-facebook, share-twitter, share-google

We’ll try to use html code such as …

<a class="share-facebook" href="#">Share this post on facebook</a>

The plan being to replace that with a fixed size background image and move the text out so it’s not seen by the user. There are  pluses and minuses to this but we’ll go with this for now.

I’ll go through a few of the link / images. The .share-facebook css becomes

.share-facebook {
display: block;
text-indent: -9999em;
width: 49px;
height: 20px;
background: url(sharebuttonsplus.png) 0 0;
float: left;
margin-right: 4px;
}

From the CSS … we’ll display the link as a block ( in this case we want it to be the width and height of the facebook part of the image) we want to hide the text we’re displaying so that’s where the text-indent:-9999em; comes in. In order to show an image we’re going to make the background image into the share button and position that background image at 0 0. Floating left means the next thing beside it will be pulled up beside it and margin-right means we’ll throw 4 pixels onto the right of the image. You can obviously tweak all this :)

The next element is going to be pretty much the same expect it’s the twitter button and it’s 62 pixels wide. We need the image to display the right place so we need to pull it back to use 49 pixels. Everything else remains the same. This link ends up being.

.share-twitter {
display: block;
text-indent: -9999em;
width: 62px;
height: 20px;
background: url(sharebuttonsplus.png) -49px 0;
float: left;
margin-right: 4px;
}

You can work out any other buttons you’ve made but I’ll just make a follow me button for the facebook icon.

We need to in that case pull it back vertically ( pull it up 20 pixels ) and we end up with ..

.link-facebook {
display: block;
text-indent: -9999em;
width: 32px;
height: 32px;
background: url(sharebuttonsplus.png) -32px -20px;
float: left;
margin-right: 4px;
}

So in my case here I’m ending up with 8 images in one.

So now all we need is the various share code / URLs we need for each of the buttons.

Hint … here they are :)

http://www.facebook.com/sharer.php?u=#&t=MyTitleToShare
https://plus.google.com/share?url=
https://twitter.com/share?url=

So we’ve gone and created a CSS sprite to do some shiny goodness for us.

In my case here it’s 8 images into one. I’ve gotten rid of a WordPress plugin to create share buttons which includes LOTS of links to Javascript that needs to get loaded on other websites and other crud.

While it might not sound like a HUGE amount if you take the case of daft above their post from May last year stated they had 1.9 million unique browsers. 137 million page impressions. Taking simply their 4 share images and making them into one erm hang on you do the maths :) ( The daft numbers – http://blog.daft.ie/2012/05/daft-ies-record-new-audience-figures/)

Hope you enjoyed the second blog post on how to speed up your website. Slightly more complicated than the first though I hope it has given you some food for thought. ( now to get around to making some of these changes on this blog :D )