I've come across an interesting issue with the redesign of my website: what is a respectable file size for everything (code/css/images) on the average page?

 

At the moment my new home page is weighing in at 175kb (ish), as it uses a few images for backgrounds, and has a fairly intricate illustration.

 

What do you consider too high?

I've no idea - my new home page weighs in at a smidgen under 60kb. Don't know whether I should be proud or feel inadequete It's a very stripped down design though - about half of it comes from fancy js files!

I don't think this does really matter because most people are using broadband these days. As long as you don't use background-images when you could've used a normal background-color, I think it'll work just fine. If you are using photoshop, select "Save for web" and you can make a descition between size and quality.

 

Also Remember that big CSS docoments are better than table based design because the CSS files are cached. Good luck.

Back when I was a fledgling web designer all those years ago.. (lol) a website HAD to fit on a floppy....disk.

 

So 1.44 MB - therefore your website sounds fine.

 

Keep it to a minimum, less is more and all that jazz, if you're even thinking about the size that's a good thing.

I'm a perfectionist, so I worry about the tiniest of details, including file sizes. I often find myself spending ages tweaking 1 pixel..

 

Interesting story about the floppy disk though, never heard of that before. Makes sense I suppose!

Depending on who you listen to, UK broadband use is around 90% of net users. Depending on who a particular website is targetted towards, it may still be worth developing with dial-up in mind.

Yeah, but if you are using valid and semantic Xhtml and use proper CSS, that shouldn't really be a problem. A web site with very large images could cause some trouble, but the images will be cached after the first time.

...the images will be cached after the first time.

 

great - IF the person returns after wading through your hugeass images

This is common sense, bumfluff. You just don't use lots of big-ass images, but I sure get your point. The problem is that you are getting very theoretical. As long as you use bg-colors when possible, this won't, probably, be a problem.

Personally, I'd ask how does the image loading affect the user?

 

i.e. I'd still wait for a "big" site if I got an interesting tidbit to keep me going for those extra couple of seconds

 

e.g. the new BBC homepage often has images delayed, but I can still glance over the text in the meantime and am often off the homepage before the last image has loaded, even if it's a couple of seconds delay it keeps me going. So if you had some "interesting" text elements visible high up the page, a few header images that just make it look better can come along (fractionally) later.

 

But, this is purely a "users" opinion, I don't proclaim to know enough about web dev yet to offer a figure for sizes etc.

I think lots of people think like you, DustyWeeks.

I still aim for around the 100k mark.

 

Just because more and more people have broadband does not mean you can churn out heavy 500k pages. Sure on a good connection it will load pretty fast but it should be remembered that broadband users's expectations are far higher than those using dialup.

 

In the old days of 56k modems people would be happy to wait 10-20 seconds for a page to appear, but nowadays with broadband people have a lot shorter attention span and expect things in a much shorter time. Anything more that 3-4 seconds and you risk losing them.

As I said in my previous post: You'll never get those numbers with clean, semantic and valid Html and CSS. Use the highest optimation for images.

 

But, of course. I agree. Keeping web sites relativly small is very important.

my entire site is less than 900k, I think my home page is about 50

Are you talking about EggMan Designs? That racked up just under half a MB for the home page.

 

Your blog comes in at around 350kb

It's good to know all about this.

How do you acctually measure this? Do anyone bother to take a look at my site?

 

Thanks for the help.

 

Edit: I counted it the old way. My homepage is around 330kb.

Yeah, I've been doing it using "Window" -> "Activity" in Safari, or "Tools" -> "Page Info" -> "Media" in Firefox, and then adding up all the sizes.

I'm slowly nearing completion of the layout, and I've actually managed to trim 10kb off the file size, while adding a bunch of new elements.

 

Right now, the home page weighs in at 164kb. I reckon is fairly respectable, considering most users will only need to download the larger (30-50kb) images once.

 

If you guys are good, I might post a version of the layout for you to see, although I'm torn between keeping it a surprise, and showing the public early. A few people have already seen an early version of it, though. *cough* Ben *cough* Rachael *cough* ErisDS. I should really get that cough looked into!

One thing is first time load. Allot will usually be cached.

Yeah exactly, but it still doesn't hurt to try and get the site as small as possible

How big should it be?

 

As small as possible!

 

For example, my homepage is 4.35kb.

Dang, is your site on a diet or something? You make mine look fat now!

You need the wonderful Website Weigh****chers TM!

My homepage is around 330kb.

 

Looks kind of odd quoting yourself.

 

I looked at "View page info" in Firefox and my site's page is 7,77 KB (7 958 bytes). 4 big images.

 

http://2dropsdesign.com/v2/

Don't forget all the images in the "Media" tab of "View page info"

Are you talking about EggMan Designs? That racked up just under half a MB for the home page.

 

Your blog comes in at around 350kb

 

Shows how much I know

 

That site is a shambles, redesign has been in progress for TOO long now *gets out violin*

What will you do in cases where you had to put images on your web page.

How big of a file size do you guys prefer? just wondering because to small of a file size will ruin the image quality, unless their is a way of compressing the image file size really low and still keeping the quality.

Optimising images will not ruin the file size, so long as you control the optimisation. I can happily shrink a JPG to 3 times less than it's original size, without showing a noticeable quality decrease.

 

It all depends on the content on the image as well, you should be choosing the right image type for the job. For example a photo or many colour illustration would be JPG, where as a <=256 colour illustration/design element would be a GIF, or a graphic that needs alpha transparency would be saved as PNG.

 

If you follow those rules, you will get some pretty tiny file sizes.

I was just wondering because I was just in the progress of creating a forum style homepage, where you have to use pretty much a lot of images. and I am pretty sure that I won't be able to keep the web file size as you guys have, but wanted to keep the file size as small as possible.

Well the thing with forums, is that a lot of the buttons and images are repeated (Avatars, post buttons, smileys, etc), so they get cached. You only need to count each image once when working out the file size.

 

For example, this page of Web Designer Forum is only about 300kb, as most of the images are less than 1kb in size. The heaviest images are the ads and the banner.

but not when your planning to do something like this:

http://www.cgsociety.org/

That is a perfect example of tweaking optimisation settings for low file sizes. All those images on that page will have been saved at a relatively low JPEG quality, as they are quick preview thumbnails. Each one is only about 4kb, which makes 10 40kb, which is nothing.

That is a perfect example of tweaking optimisation settings for low file sizes. All those images on that page will have been saved at a relatively low JPEG quality, as they are quick preview thumbnails. Each one is only about 4kb, which makes 10 40kb, which is nothing.

 

I only use JPEGs for photos. For graphical elements the compression artifacts drives me nuts. I play around with various settings for GIFs or PNGs to keep the size down. Often I get away with redusing the number of colours.

I was talking about the photos / screenshots . I totally agree that graphical elements under 256 colours will sometimes be smaller if you optimise as a gif or png.

Thanks Rob,

I guess I'll just have to try my best to keep things small, doing it in the proper way.

Hi guys

 

The other thing to use to check your site are the tools provided by http://www.websiteoptimization.com/ this will supply a whole host of info regarding your file sizes, speeds for download and http requests etc. I have the web developer extension for firefox which gives you easy access to this and w3 validation etc as well as a whole host of other tools, and I find it an invaluable tool for developing. That along with firebug and I'm set.

 

Lloyd

That Website Optimisation Tool is pretty good, just a shame that it counts all the images in the CSS, even ones that won't be loaded on that page - so it's not a truly 100% gauge of the file size.