Tag Archives: optimise

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 )

 

How to Speed Up Your Website

How can I speed up my website?

How to Speed Up Your Website

So you want to optimise your website. I started today feeling happy. I’ve been tweaking things on the work site. A little bit here a little bit there hopefully nothing you’d really notice but of course I spoke too soon and Kat mailed to say there was an issue with some of the updated CSS I’d been tweaking. Oh well you can’t win them all.

This led me to .. ( because I’m kinda a bit obsessed with website optimisation at the moment ) looking at Kat’s website for a quick minute (I like to check friends blogs from time to time though most of the time their website wouldn’t necessarily be my cup of tea I was intrigued) . Kat and Rachelle, who both work at Blacknight, run DollyRouge.ie. It’s a beauty / lifestyle blog as they would describe it themselves .. and I’ve got absolutely nothing what so ever to do with it. I do however find it to be the perfect site to pick for a case study of sorts. They are slightly techy so I’d class them in the hobbyist category of blogger. They’ve been growing their blog though and who knows what the future holds … :)

So I load up their site and the first thing I notice was … hmm this is taking a while. Curiosity gets the better of me. I’m running Firefox ( as well as various other browsers ) and I’ve got Firebug running in FireFox which tells me pretty cool things when I check what traffic / load times on various things.

Firebug load details for DollyRouge

Maybe however you don’t want to have to go installing things on your browser so .. why not head on over to tools.pingdom.com (I threw http://www.dollyrouge.ie into it) you should see something like:

Pingdom Tools - Dolly Rouge

WOW are you seeing what I’m seeing? Page size is coming in at 3.5MBs .. number of requests is coming in at 130 … and load time is at 7.5 seconds. That’s … well … let us just say it’s not good. (why it matters … lots of reasons .. the end user happy factor .. SEO will take a hit if page sizes are too high … your website is serving a lot of traffic / files it might not need to )

So lets take a bit of a close look at the site.

The main Dolly Rouge website

There’s nothing there that I see as being that strange. It’s a blog website. It’s a beauty blog website. That means they are going to be using a lot of photos on the site right? Lets dig a bit deeper.

Looking at the site I’m going to be drawn to a few things immediately …

Front page keypoints

I’m showing 5 things that are going to be used throughout the site.

  1. The Background Image
  2. The Logo
  3. Navigation Images used for links
  4. Social Ninja icons
  5. The About image

They are all images. We want to make sure they are all as well optimised as possible. When you pay €100s for a program like photoshop you expect that when you save the image it’s going to be pretty well optimised. Unfortunately you couldn’t be further from the truth (unless you start tweaking settings and so on a hell of a lot). I’ve been told gimp ends up with similar results. I can’t vouch for other tools, so lets check out what’s happening on Dolly Rouge.

1: The background image is a repeated image (wallpaper like). That’s cool lets take a closer look at it.

Dolly Rouge Background Image

Looking at it … it’s a perfect pattern. The image also weighs in at 190KB. OUCH! There’s a website called TinyPNG that does some shiny magic for want of a better word because the results are amazing. Lets throw this image into it (you can drag and drop onto the site). Suddenly …

TinyPNG background optimisation

Just by throwing 1 image into that we’ve saved 104KB. 190.2KB has become 86.6KB. However lets look at the original image. It’s a perfect square however it’s also the same image repeated 3 times vertically if you look at it. So we’re really just dealing with

One third Background Image

However what Photoshop just gave me is a 66KB image give or take.

Lets throw it into Tiny PNG and see what happens.

Revised Background Image using TinyPNG

We’re down to a 33.2KB from our original 190.2KB image. Not bad? and we’ve not even done anything much yet.

2: The logo / title image is very much the same.

80.6KB image reduces to 26KB that’s a 55KB / 68% saving.

3: is the navigation images. The issue here is twofold. The first is image optimisation and we’ll get results along the lines of 7.5KB down to 4.6KB. Not as big overall but there are 12 of these so 3K x 12 is 36K (I’ve not converted them all)

4: The Social Ninja Icons on the right hand side. Similar to item 3 the space saving will be small but we’ll do it and we’ll come back in a minute to this.

5: The final item on our initial image is the About image. Lets just throw it into TinyPNG.

228.4KB becomes 66.7KB.

Looking at the image though we can see that it’s actually wider than the space available. The image is 332×367 pixels. What is being displayed is only 240 pixels wide however. Using PhotoShop to resize the image we end up with an  111.8KB image. Using TinyPNG again and it’s down to 39.7KB. The big question here however is why you want to use a PNG image for this. There’s a transparency in the image so that’s the reason. Do we really need the transparency though? Using photoshop to save the 240 pixel wide image as a JPEG we end up with a 20.25KB image. A key point we should make is know when to use PNG and know when to use JPG. It’s unlikely you’re going to notice much of a difference in image quality in casual browsing and you can tweak the settings further if you’ve got time.

Actual Image Size

I said we’d come back to items 2 and 3 ( The navigation images and the Icons ).

When you load a website your browser generally only makes a certain number of requests at the same time from the same site. As a result your page / images / css / js don’t all load at the exact same time. In our example the site has 130 items to download. That .. is a lot if we think that only 10 items can load at once (random figure pulled from my head) then those 10 items have to be requested .. complete transferring and as they transfer we ask for more items. What we can do in the case of items 2 and 3 above would be to create a CSS sprite. 1 Image that contains all of those images.

The navigation consists of 12 items. The icons consist of 5 .. there’s also a search / magnifying icon and possibly other elements that could all be added into one. By doing that we’ve gone and made 20? requests into 1 request. (130 file requests is now 111 file requests for the site) Not too bad though it will take a bit of tweaking of the site and CSS code. I won’t go into that here. (maybe in a future post if there’s any interest)

From our original pingdom tools requests / traffic we can tell a lot about our site.

Pingdom Dolly Rouge Traffic

We can tell what’s bloating our website. We can try a few things to see if we can’t help reduce that. Simply by throwing all the png images into TinyPNG we can do the following.

365 KB saved by TinyPNG

That’s 365KB saved. That’s without reducing the background image height to 1/3rd or reducing the about image size. We’re therefore talking nearly 500KBs saved for a few minutes work.

It might not sound like much but it’s going to reduce the page from 3.5MB to 3MB. The blog posts which are image intensive appear on the front page as well. We could speed things up by not including the full post image and just having a featured image there (That would require a bit more knowledge and changes to the theme however). There are a number of other PNGs there as well 1 being a 685KB PNG which should really be a jpg. Making it into a jpeg and it drops to 72.3KB. We’ve just gone and saved 1MB on our front page.

Does this really matter so much? I don’t know about you but i browse via my mobile from time to time. When I’m browsing with my mobile I don’t have access to WiFi so I’m relying on the mobile network for my Data. This varies greatly so trying to load a 3.5MB page is most definitely going to hurt. Even without thinking of mobile the page is taking 7.5 seconds to load on a desktop. That’s a long wait time especially if you don’t have fast broadband ( hint … it’ll be longer ) There are other benefits to doing these few small steps. 1MB saved per page load  .. 1000 visitors a month … is 1GB of traffic saved. That’s just for one page with 1000 visitors. saving 20 requests might not sound like much either however if you’re running a busy site and have 10 visitors at the same time that is 200 requests we’re saving. We’d hope your visitors will wander through your site for a read. So it’s even more traffic / requests we’re saving.

Any questions or comments let me know? :)
(I hope you’ve enjoyed the first of my posts on how to speed up my website.)

(I should add that no I’ve not tweaked anything on this website just yet it’s still in it’s infancy)

Further reading: How can I speed up my website? Part 2