homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

This 39 message thread spans 2 pages: 39 ( [1] 2 > >     
Webpage Size...
Making my page load faster...

 11:16 pm on Dec 26, 2002 (gmt 0)

I am trying to reduce the size of my webpage to the minimal. I have tried taking out all images that aren't necessary. I am really trying to cut back. It is very frustrating and I really want my page to load faster, so I don't lose any potential customers. Does anyone have any suggestions. I've reduced image size, tried keeping the page as simple as possible, but my page still has a size of 90KB. Any help will be GREATLY appreciated!
BTW: This is the best webforum I've ever been to. Everyone here has so much knowledge!



 11:20 pm on Dec 26, 2002 (gmt 0)

So where does the size come from? Is it a matter of code bloat or is the page just too long?
Reducing code is one thing, which can be achieved by several things like externalising script elements or applying stylesheets.
Breaking down pages to parts better suited for online reading is a whole nuther matter.
So first it would be neccessary to anlyze what the 90kb are made up of?


 11:57 pm on Dec 26, 2002 (gmt 0)

I think it might be code bloat, but I am not sure.
Page size is as follows:
Total Page Size: 87956 bytes
Total Graphics: 54824 bytes - 35 images
HTML: 28195
I am so new to this, I am not aware of how to make external scripts, and also have no experience with external style sheets.


 12:10 am on Dec 27, 2002 (gmt 0)

Do you have css styles? If so, having an external file for them, with a command such as:

<style type="text/css" media="all">@import "css-code.css";</style>
<LINK REL="stylesheet" TYPE="text/css" HREF="/css-code.css">

will reduce page size for a repeat visit (or a linger on you site) as many browsers cache these.

Similar for javascript, if you use it.

Also, you may have unneeded spaces, tabs and newlines in each page -- many web pages are bloated this way WebmasterWorld is almost exemplary in this regard). Write a script to remove most if these before you upload.

And look at compressing those images a bit -- 80% or more may easily be acheivable using commonly available image optimisers.

Aim for a home page of no more than 40K -- so you need to save about 50%


 12:15 am on Dec 27, 2002 (gmt 0)

Hi, here's a great thread started by rogerd on Cutting Bandwidth Needs [webmasterworld.com].


 12:35 am on Dec 27, 2002 (gmt 0)

>>Also, you may have unneeded spaces, tabs and newlines in each page -- many web pages are bloated this way WebmasterWorld is almost exemplary in this regard). Write a script to remove most if these before you upload.<<

I may sound "stupid" but I'll ask anyway. You stated I should write a script to remove extra lines, spaces, etc. How do I do this? (If that was what you meant) I am very new at this, so please be nice...:-)
I just compressed some of my images with Netmechanic (I hope this is a good tool) and its reduced my page size down to this:
Total Page Size: 58677 bytes
Total Graphics: 25587 bytes - 35 images
HTML: 28153 bytes

I still have to achieve the 40 K or at least under 50K from what everyone says. I will try to remove spaces. I would like to use an external style sheet, and external scripts, but am not that websavey yet. Is there anything else I can do?


 12:42 am on Dec 27, 2002 (gmt 0)

oops, almost forgot to thank for the help.


 9:26 am on Dec 27, 2002 (gmt 0)

I use the Rebol programming language.

My upload code looks something like this (stripped of all sorts of other issues like uploading a page only if it has changed):

List-of-files-to-upload: [%index.htm %welcome.htm %about.htm]
foreach file list-of-files-to-upload [
temp: read file
trim/lines temp
write join ftp://USERNAME:PASSWORD@MY-SITE.COM/ temp

And that's the whole program. Rebol is a 500k download, runs on almost any platform, takes maybe 30 seconds to install. Programs are interpreted -- no compiling. Give it a try:

www.rebol.com -- Click download. All you need for this application is Rebol/Core.


 10:01 am on Dec 27, 2002 (gmt 0)

Lets perhaps get back to step one once again, before jumping to programs and such:
How long is your page? Do you have to scroll down?
How much text is on the page, in words?


 10:16 am on Dec 27, 2002 (gmt 0)

You are right. Stripping whitespace is the icing on the cake.

For sites who don't do it, the saving is maybe 10% of the text download (example: www.teoma.com can save 572 bytes out of a home-page text size of 5770).

But the bigger savings are likely to come from optimizing images and using external files.


 3:57 pm on Dec 27, 2002 (gmt 0)

yes, you have to scroll down. My page is pretty long. How many words I am not sure, but there is a lot. Do I try to shrink it? Bring it down to just a couple of lines? Is that what you meant by getting rid of all of the spaces?


 4:31 pm on Dec 27, 2002 (gmt 0)

Well, what I'm suggesting is you look at the page and try to figure out if it has to be so long, if you need/want it to be so long.
Two aspects to look at:
- user friendliness
- spider friendliness

For a user everything that is visible without scrolling is what is important. Chances are what must be scrolled doesn't get read/looked at very often.
Add to that the longer download time and you have a strong incentive to make shorter pages.

Second for spiders it's usually better to have shorter pages too. There's a graph somehwere here which clearly shows most highranking sites are very very small.
This is also an effect of better targeting themes/phrases.
You should ask yourself: what phrase/searchterm are you targeting with your page? Does the page really focus on that?
Chances are, if you target one keyword or a combo, you are better off with a short focused page. Which in turn makes for much better usability.

That is what I'd be looking at first.
Then you might start looking at your code. Which is a whole different story, and should be treated seperately therefore.


 4:48 pm on Dec 27, 2002 (gmt 0)

Thank you! I will start at making the page smaller.


 7:03 pm on Dec 30, 2002 (gmt 0)

>Thank you! I will start at making the page smaller.

You don't have a URL in your profile- so sorta tough to get specific recommendations.



 8:49 pm on Dec 30, 2002 (gmt 0)

I actually have it in my profile but It doesn't show. I think it's because I am a new user. I am still trying desprately to make my page size smaller. I've tried all the advice. I've downloaded a html shrinker and have shrunk my html, I've used an image compressor and made my images smaller. I am not sure what else to do. my page size is still 58K and I need it to be 40K! Very frustrating! I thank everyone for giving me the great tips and help! :-)


 8:51 pm on Dec 30, 2002 (gmt 0)

You can see my site though at the end of my email address...after the webmaster@.... Maybe you can take a look and let me know what I can do to make it smaller?


 9:37 pm on Dec 30, 2002 (gmt 0)

There is a lot of code bloat because you use FrontPage. I suggest you read the thread: Turning your Front Page into real Web Pages [webmasterworld.com]. You also have JavaScript from line 16 to 52 that can be loaded as an external .js file [webmasterworld.com]. Finally, .art is not a graphics format that will load in a browser


 10:12 pm on Dec 30, 2002 (gmt 0)

ExtremeExports, as you're new (I think) to HTML, why don't you try using XHTML and CSS [stopdesign.com].


 11:02 pm on Dec 30, 2002 (gmt 0)

ExtremeExports, listen to sun818! I know it's a pain if you're a newbie, but if you're serious about web programming, you'll have to learn some basic HTML anyway. Dumping that editor and writing the code yourself (or at least re-writing it and throwing out all the unnecessary trash) will reduce your file size by 50% (just a rough estimation).

[edited by: menyak at 11:11 pm (utc) on Dec. 30, 2002]


 11:09 pm on Dec 30, 2002 (gmt 0)


I'll give you one hint here: You have used graphics to implement all or most of your navigation links, using one unique graphic per link. You could easily replace these links with text links, and then use a common, single arrow graphic at the end of each one. That common arrow graphic would be loaded once, cached by the visitor's browser, and then displayed at the end of each link. Without all those unique link-graphics, your page would easily shrink to fit your 40k budget.

A second issue with using graphics for links is that they are useless for helping spiders determine what the pages on your site are about. Alt-text on the image will help, but using graphics for links is an excellent way to guarantee low (bad) placement in search engine results. If this were my site, I would dump those graphic links pronto.

As a note, .art is an AOL-proprietary graphics format, which some browsers do support with an add-on optional module. But I agree with sun818 that .gif, .jpg. or .png would be safer to use to get best cross-browser support.



 11:20 pm on Dec 30, 2002 (gmt 0)

Wow! Thanks a bunch. I will get to work right away. I am so glad I joined this forum. Everyone has helped me out so much. With this information, my site should be in tip top shape in not time. :-)Thank you to everyone for their input, I greatly appreciate it.


 11:37 pm on Dec 30, 2002 (gmt 0)


I think your page code could come down to about 10k if coded to take fuller advantage of CSS.

If you find handcoding to be too daunting at this tage, a far far superior WYSIWYG tool is Dreamweaver MX. You can download a trial version Free from Macromedias own site.

The beauty of this app from a beginners point of view is that you can view the code as you manipulate the visual layout using a split window. This teaches you quite quickly what is behind the scenes in code as you author an HTML page.

If you incorporate CSS more fully and use DW MX trial version, by the time your trial runs out you will have a tidier site and learnt a reasonable amount of HTML and CSS.

Then your problem is the purchase price.


 11:40 pm on Dec 30, 2002 (gmt 0)

Dumping that editor and writing the code yourself.

It seems that the above would be your easiest solution. But, I'm going to ask you to step back and learn how to use the program a little more efficiently. There are a handful of us around here who have managed to tame the beast and make it spit out fully optimized, and completely valid unbloated code.

Your first major problem is that you are using a Microsoft Theme. Myself along with thousands of others would like to get a hold of the person who did the programming for these monsters... <!--mstheme-->!

Whenever you use a Microsoft Theme in FP, your code will be approximately 30-60% more than what it should be if you were to use plain old html along with some of the other FP features like Include Pages.

There really is no need for you to be using the mstheme anyway, it looks like you are using it mainly for link colors and such. I'd probably suggest that you sit down and discover the basics of html, you'll need to know that if you are going to work with any WYSIWYG program like FP.

You should fully understand the concept of FP Include Pages also. This will be your biggest leap in using the program.

You'll need to learn basic css and how to use external file references to call in the style sheets to your pages. You'll most likely end up with two external file calls; one for css and one for javascript when all is said and done with.

I would take a few steps back and learn the basics first, then attack the code bloat issue later. If you can't see where you are going wrong through trial and error, it will be more difficult to learn. We learn from our mistakes.


 11:47 pm on Dec 30, 2002 (gmt 0)

Ditto what what the other's recommended.

If there's any potential for this website to make money and you want to do the site yourself- invest in proper tools.

More to the point invest time and energy in learning how to expoit the programs you have..at least.

Macromedia Studio MX can do a lot of powerful things for you. Then you can buy add-on's that can do even more cool things.

Whether it's notepad, Dreamweaver, Frontpage, GoLive, etc... buy solid books that explain how to use the programs and teach good workflow at the same time.

I'd also suggest a book called "Don't make me think!" by Steve Krug. It's small, cheap and ___very___ informative. Don't shirk this suggestion... ;)

For your site the above book is a must have.

Finally, search the web for Cascading Style Sheet tutorials.

Perhaps check out a book by Eric Meyers called "Eric Meyers on CSS".

Your mainpage does not have a DOCTYPE.

Have fun. ;)



 11:50 pm on Dec 30, 2002 (gmt 0)

Can I just remove the MSTheme from my site without causing problems? And also what are "Include Pages"? Is this something you can explain quickly? I don't mean to teach me, just am curious what it is. :-) Yes, I have a long ways to go. But everyone here is so helpful in letting me know what I am doing wrong. I am very greatful for everyone's input.


 12:19 am on Dec 31, 2002 (gmt 0)

Can I just remove the MSTheme from my site without causing problems?

For you, I wish it were that simple, unfortunately it is not. To replace the mstheme will require that the site be built from the ground up. What you'll end up doing is taking all of your static content like the header, the left nav and the bottom footer information and placing those into Include Pages.

FP Include Pages are similar in nature to SSI or Server Side Includes. You basically make one file for each of your static components; header, left nav and footer, and then insert those pages within your other pages.

I can't recall right now which book it was that I studied day in and day out for about a year before it all finally clicked. I believe it was a Microsoft Press book titled Using FrontPage, that was back then.

There are also two valuable online resources in addition to WebmasterWorld where you can learn a lot of the basics quickly. One of those is the Outfront Forums. Study some of the tutorials that are there as they are very well written and in laymens terms.

There is also quite a bit of valuable information in the archives here. In fact, this one thread alone is worth it's weight in diamonds!

Things to be aware of when using FrontPage [webmasterworld.com]


 1:44 am on Dec 31, 2002 (gmt 0)

The answer to the original question seems pretty simple - 35 images!


 2:14 pm on Dec 31, 2002 (gmt 0)

...and the graphics are not optimised. The french flag is a 125 byte file using the colours (1)black, (2)white, (3)red, (4)blue and yet the file is set to an 8 colour palette. Surely 4 colour would be better. The graphic in the middle takes an age to load (and the ActiveX component - I blocked that so I can't comment - but if its not needed or could be done another way...)

It is definately the graphics slowing it down. Perhaps you should use the imagemap ability of browsers and have all the flags in one graphic.


 4:43 pm on Dec 31, 2002 (gmt 0)

Thanks a lot. I now have my flags in one graphic. After I get through this thread and the other threads Sun818 and Pageonresults recommended I will be uploading my site. Thanks again! :-)


 1:43 am on Jan 2, 2003 (gmt 0)

Just wanted to thank everyone. Thanks to this site and all of it's resources, I now have a CSS Stylesheet and have been able to reduce my webpage size from 90K to 36K! My page loads very quickly now, and I have learned so much. Thanks again to every one who commented in this thread to my question! :-)

This 39 message thread spans 2 pages: 39 ( [1] 2 > >
Global Options:
 top home search open messages active posts  

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved