Blogging Tips: A Faster Loading Site (Part 1)

This entry is part 1 of 4 in the series Blogging Tips: A Faster Loading Site

Blogging Tips: Road RunnerThe other day I was messing around with my blog and decided to see how large of a footprint it was. What I mean by that is every site has a footprint, which is to say how large the site is in terms of kilobytes or megabytes. All the images on your site, the text, etc, all adds up and is then delivered to the people visiting your site. Obviously the more text you have and the more images you have the larger your site is. There are other factors we’ll get into later. Thus begins another article on blogging tips.

Raise your hand if you remember these!

Back in the day when I got into building sites there was this thing called a dial-up modem. We were rocking blazing speeds of 56K and were way ahead of those fools who only had a 28.8K modem! At that point it was recommended that a website be no larger than around 50KB, and that was on the large end. I aimed in the 20-30KB mark.

Fast forward and DSL and cable has become so mainstream that many of us, myself included, got out of weighing the size of our sites because even large sites would load in a matter of seconds. There’s this other factor involved though and one not every blogger needs concern themselves with, and that’s bandwidth. Even if bandwidth in itself isn’t a concern of yours then read on because it also translates into how fast your site loads and we all want faster loading sites.

I have this blog hosted with a company and am allotted a certain amount of bandwidth each month. Bandwidth, in short, is the amount of data you’re allowed to transfer. Each time you load my blog data is transferring and I’m using bandwidth. To tie this all in, the larger your site is the more bandwidth you’re using each time your site loads. Makes sense, right?

This past month I came damn near close to exceeding my bandwidth allotment. This has become an increasingly common problem so I began investigating. The size of my blog was weighing in around 1.7MB. I couldn’t believe it! I use Word Press and there’s a lot going on with it to begin with. I also have some plugins installed which add functionality to my blog. Every little thing I add to my blog increases the size of it and makes it slower and causes me to eat more bandwidth. It was time to fix some problems.

I use a Firefox and have an add-on called Web Developer Toolbar and one of the features with it is I can view the size of a page and it breaks the page down into categories like documents, images, scripts, etc. It’s a great add-on for doing this stuff so you can see where the big offenders are.

Images are an easy category to deal with so we’ll start there. I use a plugin for WordPress called Social Blogroll, you’ll see it to the right of this article. Most of us bloggers have a blogroll. My blogroll has around 60 blogs in it and I had an option enabled to pull the favicon for each blog. You know, those little images you often see in your browser’s address bar at certain sites. It’s a cool feature and in the blogroll it allows you to quickly and easily recognize certain blogs. As much as I hated to I turned this feature off. In doing so the site was no longer loading 60 little images and I saved around 100KB in file size.

Secondly, I went through all the images I load on my site and ensured I was loading appropriately sized images. There’s two ways to re-size an image on your site. The recommended way is to physically re-size the image to the size you need. If you only plan to show an image at say 100px wide then re-size it to 100px wide. The other method, which is not recommended, is you can add width tags to an image to re-size it. If you have an image that’s 800px wide then you can add a tag to make it appear as 100px wide. The problem is you’re actually loading the full-sized image, you’re just displaying it smaller. So, you’re needlessly increasing the size of your site. It’s not often a big deal if it’s an image or two but if you’re doing it for a lot of images then the size adds up quick and the site slows down significantly. Whenever possible you want to physically re-size them, even if it’s just an image or two. It all adds up to size savings.

If you’re using images in your articles then it’s best to create thumbnails, smaller versions of the images, and use those in the articles and let the person click the image to see the full size.

I had a few images I had not re-sized yet so I did that and just those few images saved me close to 100KB. Between this and the previously mentioned bit about the favicons in my blogroll I already reduced the size of my blog by around 200KB. Not bad for a few minutes of work.

The second part of this article will focus more on some of the technical aspects and things you likely have never thought about or heard of. You won’t have to be a techie to get it though and fellow WordPress users will be in luck as I’ll be recommending some plug-ins that do all the work for you. If you’re not a WordPress user then I still recommend reading the second part once I write it as you may find something comparable with the platform you use.

Series Navigation

Blogging Tips: A Faster Loading Site (Part 2) >>
%d bloggers like this: