10K Web Pages

NogDog

Inspired by this WebDeveloper.com thread, I have set up www.10kWebPages.com. If your web designer creative urges get you interested, stop by, sign up, and submit your best 10K web page (and maybe give it a link in your blog or whatever? 😉 ).

Enjoy.

jazz_snob

Rats, thought I had something to submit but analysis shows my sites are 100k and 50k and 20k. I do believe smaller is better, eventhough people have broadband connections.

NogDog

Serve up all text files via PHP using [man]ob_gzhandler/man and maybe the 20K page will fit. 😉

Weedpacket

jazz_snob wrote:
I do believe smaller is better, eventhough people have broadband connections.

Especially when the site is busy, and server bandwidth becomes an issue.

nrg_alpha

Interesting contest Nog! I just might try it out.. heck, if I can make my site roughly 60k in size (homepage), I'm sure I can reduce the weight by 6 times..

I checked ouy your sample book site. Very nice!
Just two notes off the top of my head that I can think of..

As far as images are concerned, have you heard of smush-it.com? (without the dash though... funny, when I previewed this post, the s h i t aspect got asterisked) It is a tool (I believe written by someone over at Yahoo) that does exceptional under the hood image optimizations which don't effect visual quality, but reduces image overhead (to which degree depends on many variables I'm sure).

So I examined your book site through smu**** and found you can squeeze an additional 96 bytes!!!! OK.. over the top, I know.. but you get the idea.. a great tool if you want to maximize the most out of image optimization.

I also checked you site through Yahoo's Yslow plugin for Firefox, and noticed that your source code isn't gzipped. Not sure if your server supports it or not.. but something to check into.. might be able to shave some more off there.

Overall, at 5 http requests and 9.2k, very nicely done!!

Very interesting concept.. I really should give it a whirl 🙂

NogDog

I could easily make the HTML and CSS pages PHP files and use ob_gzhandler(), but I figured since I got it in under the 10K limit anyway, I'd stay "pure". 😉

Anyway, I know your artisitc abilities are better than mine (but then most people's are), so give it a whirl. I need to get a few "real" entries there and start getting things toward a critical mass wore more people will start visiting and contributing.

nrg_alpha

Ok, I am almost done my 10k challenge... I do have one question. With regards to copy, can it be your typical lorum ipsum placeholder stuff? Or does it have to be actual english text?

NogDog

Anything goes as far as I'm concerned (within the rules of basic decency).

nrg_alpha

Ok, I'll leave the main bulk of text as lorum ipsum (but the side bar, headline and title is in english).
I'll sign up and post soon (either later tonght or tomorrow). Just be warned that I did make use of gzipping and smush-it (otherwise, I am indeed over 10k [by like 2k], but with these compressions, I am currently sitting at 8.8k when all is said and done... hope none of this invalidates my attempt, because that was harder than I thought [although I do believe I did a respectable job].)

NogDog

No problem: the goal is to get people's creative juices flowing and finding ways to supply decent-looking, user-friendly content that eats up a minimal amount of bandwidth.

On a side note, do any of you think there should be an ability to add comments for each entry (both by the submitter and any member who wants to comment)? Or is it better to just let each entry stand on its own and not open up the possibility of spammers, flame wars, etc. (in other words, me having to do a lot of admin stuff to deal with those things)?

nrg_alpha

NogDog;10908599 wrote:
On a side note, do any of you think there should be an ability to add comments for each entry (both by the submitter and any member who wants to comment)? Or is it better to just let each entry stand on its own and not open up the possibility of spammers, flame wars, etc. (in other words, me having to do a lot of admin stuff to deal with those things)?

Well, I suppose it depends on whether you feeling moderating those or not 😉
I for one would vote for comments.. that way, the authors can explain some things to help illustrate how they arrived at that final state (unless of course, you are referring strictly to visitor feedback, which could be good, but again, depends on whether you feel like moderating those things). I vote yes for comments in general, but the ball's in your park 😉

nrg_alpha

Ok big guy, I registered, logged in and submitted it. Please let me know if there are any issues with it or not. You have my email.

It was a fun (yet harder than expected) challenge! I thought I would be able to get away with more even with only 10k, but seems it's smaller than I thought lol. No matter, it was definitely an exercise in performance/ resource management! I tend to think of myself as quite anal when it comes to things like site optimizations (if I can even shave 500 some odd bytes off of an image, I prefer to do so), so this contest was attractive to me from the get go!

Thanks again for bringing this to attention here! Had a blast, and learned how to really crunch things down a bit. I think if every web developer was put through their paces for small fun stuff like this, they might learn enough to start implementing better optimization practices into their own / client sites. Way too much bloated garbage out there... I would be interested in seeing the before / after bandwidth savings from a lot of sites out there... I bet users and companies alike would fall out of their chairs if they could see the savings 😉

NogDog

LOL: Thunderbird sent the email the entry submission generates to my junk mail folder. :rolleyes:

With your entry only using 3K or so, you've got lots of room to throw in some fancy-schmancy JavaScript effects or something. 🙂

nrg_alpha

3k?! According to Yslow, my entry should be clocking in at 8.7k (with gzipped code however). Unzipped, it should bust the budget by a couple of k. Are you sure you didn't misread it or something? My windows files definitely confirm it is collectively larger than 3k.

EDIT - Perhaps you are only seeing the gzipped php file? The graphics alone clock in at around 6.2k

NogDog

Hmmm...that's weird. I've been using http://analyze.websiteoptimization.com to check it, and it only seems to report the main HTML page. 😕

PS: I wonder if that script doesn't handle CSS images when within <script> tags instead of as a separate CSS file?

nrg_alpha

Yeah, I just checked it myself. Indeed, it is only reporting the xhtml document. You know something's wrong when it reports 0 images, yet clearly the site has images in it. So I don't know how reliable that system is to be perfectly honest (granted, it could be that the smush-it optimizations made changes under the hood that effects image detection within that program).

I would suggest downloading / installing Firebug for Firefox, then download and install Yahoo's Yslow. Once firefox is rebooted, load up the page of your choice, and click on the small yslow speedometer at the bottom of the browser screen. The firebug panel will pop up with performance, stats and component tabs which reveal all sorts of interesting statistics about the site you are viewing.

My page was so tight for space that I had to eliminate one of the leaf bulletin points in the 'Some Global Warming Facts' panel, as it busted the compressed budget to 10.1k. So that's how little wiggle room there is with that thing 🙁

Krik

Hmm, very interesting idea.

I must admit that my personal interest are in finding ways to make code do things a bit out of the ordinary, or getting code to do some new trick. Unfortunately that usually entail things that exceed 10K.

If I didn't have 3 projects on my plate I would defiantly look into making some trick work in a sub 10K web page.

Good luck to all that try.

nrg_alpha

Hey Nog, I noticed you gzipped your 10k submittion! Fantastic. 🙂
I also noticed you made your external css style sheet gzipped by using the .css.php extension. Never knew you could do that! I wondered how to gzip those things.. In hind sight, the solution was simpler than I thought. I should give that a go!

Here I was embedding CSS (which for the record I don't normally do) just to have it lumped in with the xhtml document for gzipping purposes... geez..

Live and learn.... live and learn.

NogDog

I found that I had to add a header for the CSS:

<?php
ob_start('ob_gzhandler');
header('Content-Type: text/css');
?>
body { . . .

NogDog

Krik;10908639 wrote:
Hmm, very interesting idea.

I must admit that my personal interest are in finding ways to make code do things a bit out of the ordinary, or getting code to do some new trick. Unfortunately that usually entail things that exceed 10K.

If I didn't have 3 projects on my plate I would defiantly look into making some trick work in a sub 10K web page.

Good luck to all that try.

I don't plan on closing submissions any time in the foreseeable future (if ever), so stop by whenever the muse hits you.