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.
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:
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.
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 …
I’m showing 5 things that are going to be used throughout the site.
- The Background Image
- The Logo
- Navigation Images used for links
- Social Ninja icons
- 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.
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 …
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
However what Photoshop just gave me is a 66KB image give or take.
Lets throw it into Tiny PNG and see what happens.
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.
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.
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.
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