I'm trying to figure out if I've got too much graphics for my site that I'm making for a small business (which should probably be 56k friendly-ish). It's probably the largest I've made so far graphic wise. As is the thing loads 150k of data on the first load. OnMouseOvers which seemingly load after you actually go over 'em adds another 40k. This doesn't include the Flash gallery at the homepage which is pretty sizable itself. \I've also been thinking of converting some of the graphic buttons to text buttons but this only helps after the initial load (which again doesn't seem to include onMouseOver things) so in all doesn't help much at all. XP
Since nobody wants to reply I'll talk to myself. After further research it seems half a meg would take up to 2 minutes for a 56ker to download. How do those people live? The homepage to the site I'm designing includes a flash file. Together with the graphics of the page the thing will be about 450-500k total. Is this completely unreasonable for a 56ker? I might have to reduce the quality of the flash and graphics a bit. EDIT: Doing further research it seems that 56kers on average download about 5k per second, aka a lot less then I thought. I face possible massive reductions of quality of the images on this site. Since it's a small business site I kinda want 56kers to have the option of going there. I'm going to try to reduce it to about 300k total including the Flash. The Flash Gallery on the Gallery page is probably going to be freakin' huge...
Hope people don't mind multiple posting if it's not spam. XP Anyways someone want to give me an idea of what's acceptable? I've got it this low so far: 81KB - Graphics Mostly jpgs, some pngs for transparency, there might be room to lower the quality of some of these a tiny bit. 8.66KB - Code (Index) Guess I have a lot of code. It'll be about the same for each page. I can probably get it a bit lower by cleaning it up but that step comes after I've got the page up good and done. 231KB - Flash Big, 56k friendly? Idunno since I haven't used 56k since I was a tiny kid. This is a small business site and this flash is pretty big dimension wise and I've already gone a bit past what I'm comfortable with in the lowering of quality of the images in it. I might actually need to up this a bit to save some of the photo quality since these guys plan to sell based on showing what they can do. So that's 320ish KB for the homepage with most sub-pages being much less since there's no Flash. This doesn't count the Gallery which will probably be based in Flash and be a relatively huge file. XP I still feel that I probably need to get it a good amount lower...
Unless I missed it, you haven't shown us the site. Maybe the size is justified, maybe not. From studies done years ago, about half the visitors bail for each 10 seconds of loading time. On 56k dial-up, that means 50% of potential customers don't hang around to see a 50kB page. Obviously, the numbers are different for broadband—but expectations are higher too. Broadband users probably start bailing at 3–5 seconds wait time.* A good rule of thumb is to keep the entry page (the home page or any other page that people might bookmark) lean and mean; around 50k total, including images, scripts, multimedia and Flash. Other pages may be larger, because you have them on site, and they're looking for specific things. They're more willing to wait. To decide what to keep and what to ditch, ask yourself of each item, how does this improve the visitor's experience. Forget how cool it is, or how much the marketing dweebs like it. All that really matters is whether it helps the customer do what he came to do. Use white space, borders and light-weight graphics by all means. The well done graphic design is important to affordance. I strongly doubt the Flash animation has any redeeming social value to the customer. cheers, gary * Where there are multiple files to be downloaded, network and server latency become a significant part of the total time. To illustrate with an unusual example, I recently had cause to download about 22gB containing nearly 20,000 files. The files were requested under script control (jigdo running wget) with a GET, just as a browser or ftp client does, and where possible, using simultaneous downloads from multiple mirrors. After just shy of 24 hours, I had my files. Five hours of that time was spent on network and server latency, in other words, waiting. The moral of the story is that high speed won't help the throughput as much as you'd like if there are a potload of files to GET.
Do keep in mind that you posted at 7ish Central time, after business hours in the US, and the middle of the night in Europe. That's midmorning or so in the Pacific Rim/ANZ, but they're less well represented here. cheers, gary
pft well looks like the client is getting a 250-300KB front page with 100KBish subpages. lul I'm just giving him what he wants anyways. My deadline is coming up.
Well the Flash is the problem now and I don't see a way to surpass it. The guy wanted a big flash with big pictures.
If that's what he wants then give it to him, that only a small number of visitors will hang around for the pages to load will be his problem. However, on the page with the big flash, I would suggest that you leave a simple link to follow for people to proceed to other pages if they don't want to hang around for the flash to load. That might save some of your customer's bacon
Agree. If that's what they would prefer then go for it. It is still worth considering implementing a non-flash version of the site for those not fortunate enough to have broadband.
I tend to only design with broadband in mind these days. However, as a hangup from the days when I was 'surfin' the net' with a 9.600 kbps modem, I always try to keep my pages small. That's usually way less than 100kb per page. But as john.fisher said, I'd always try to stick to less than 200, flash or not. Unless they wanted some kind of flash movie or whatever.
Check Your Website Elements Usage With http://www.websiteoptimization.com/services/analyze/ Reduce & Optimize Your Websit Graphical Elements Via http://www.winsoftmagic.com/ if You Wish To Optimize Your Scripts & Contents Go http://www.iwebtool.com/tools/
If you posted your front page, we may be able to give you better pointers. I just was working with someone's test page, where he used a PNG with alpha trasnparency for a shadow effect. Not only did that cause problems with IE6 (being a tard browser and all) but it was big. Not ungodly big, but if there had been a few of them, it would have been a contributor to page bloat. I took the image and put a white background on it (since the shadow was always on white background, it didn't need semi-transparency... if the background colour were to change, then by all means he should have kept a copy on his personal machine with the transparency so he could easily stick any other background colour or pattern behind it... I'm not sure what to call these extra files, but many sites have them sitting around, never asked by servers... they exist to give the graphic designer more flexibility) and made it a gif. Now it was like 300bytes. I forget what it was before, but it looked the same. Like Gary said, you can fake a lot of stuff, removing images if they are doing the work of borders or CSS properties. Same goes for semi-transparency. 99% of the time you can FAKE it with a normal image. Only if the background is moving (either from animations, scripts, or browser window resizes) should you even THINK about alpha transparency (see what you can get away with full, gif-style transparency first). Even then, if the difference between a PNG with alpha and a jpg or gif with maybe some CSS opacity tricks is large, then go for the CSS tricks. Often there are ways to reduce the numbers of images in things like menus using the so-called "css sprites". You metioned onMouseovers-- if they're for a menu, or if they change a colour, typography or an image on :hover then GET RID OF IT! Use CSS instead. You can make things appear on hover, change background images, all sorts of things that onMouseover is incorreclty (bloatedly) used for. You can seriously reduce the size of a onMouseover menu with 20 images to a single image, containing both normal and hover states, and that makes it a single image-- a single "ask" from the browser, a single file for the server to send, and no additional script to be loaded by the visitor (plus people without scripts get the cool effects too). Check out this page if you haven't seen it before: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites This is only a single example of reducing images. Here's another one: http://battletech.hopto.org/html_tutorials/eightcorners/template.html It DOES depend on what kind of site it is (for instance if the front page was silly enough to have the whole product catalogue sitting on it, with a different image for each product etc), but there's almost an unlimited list of things you could try to make this site lose some weight.