homepage Welcome to WebmasterWorld Guest from 54.198.148.191
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
HTML Page Size, in KB
Seattle_SEM




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

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




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

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




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved