Welcome to WebmasterWorld Guest from 107.20.107.165

Forum Moderators: incrediBILL

Message Too Old, No Replies

HTML Page Size, in KB

     

Seattle_SEM

4:22 pm on Feb 1, 2011 (gmt 0)

10+ Year Member



I am looking at a web page that may be around 500kb, but most of the content is hidden, and revealed upon user action.

Do you all think this is ok in todays day and age? I know a decade ago this would have been heresy, but what do you think, today?

Fotiman

4:59 pm on Feb 1, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



500kb seems slightly excessive to me. The average page size is about 320kb
[code.google.com...]

If users find your site too unresponsive, they may go elsewhere. So I would try to find ways to trim it down if possible. Just my opinion.

rocknbil

5:58 pm on Feb 1, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I still think it's heresy. :-) But my hand is forced, all the time. Today's web is driven, in many cases, not by accessibility and portability as it should be but by graphics and coolness. Full page background images and hundreds of tiny graphics per page are fairly commonplace, I recoil a little bit every time a new one comes across my desk . . . I make a small noise, no one listens . . . and on we go.

My point is, the straight answer would be yes, that's huge, I mean, it's half a megabyte and likely far too many object requests. But as long as you're doing all you can do to control it, well, it's all you can do, isn't it?

- Optimize images - experiment with different formats, and how much "quality" can you lose while still maintaining integrity? One good example is the proliferation of png images, which in my experience have been far larger than their gif counterparts - BUT - one thing you can't do with gif is render the image itself transparent over other page objects. Compare a jpg, against say, a 16 color .gif, against a png - what's smallest? Note that the overpowering advantage of .gif is that when you reduce the color palette, you can reduce the file size, sometimes exponentially.

Can you reduce the number of images? Look at this oldie but still well used:

<a href="#" onmouseover="swap_image('myimage','mouseover.gif')"><img src="nonmouseover.gif" id="myimage" alt=""></a>

What we have here is two images. Now look at this.

<a id="some-nav" href="#">some text</a>

...

<style type="text/css">
#some-nav { display: block; width: 100px; height: 50px; background: url(nonmouseover.gif) top left no-repeat; text-indent:-50000px; }
#some-nav:hover { background-position:bottom left; }
</style>

One image, stacked,

nonmouseover part of image
--------------------------
mouseover part of image

We've done not two, but three things here.
- reduced the number of objects
- reduced code bloat, leaving static html - which makes the document itself smaller
- reduced Javascript dependency, and reduced the document even more by removing it

(The argument can be made is that all we've done is move the code into CSS - but the CSS gets cached, once, and for all pages on a site. So while that's valid argument, it's only valid on the first load and is still faster.)

The last thing is stripping **all** inline styles and presentation elements from the document and addressing them with CSS or external scripts. You should have nothing but paragraphs, divs, anchors, UL's, and other semantic elements in your document. This forces your hand to learn how to externalize the presentation elements in CSS, the behaviors in external Javascript.

Multiply small concepts like this over a 500K page . . . . and you'll have it under 200K in no time. :-)

Fotiman

6:07 pm on Feb 1, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Right, I have to agree with what rocknbil said. Keeping a clean separation of content (HTML), presentation (CSS), and behavior (JavaScript) and using semantic markup will generally result in smaller files.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month