Forum Moderators: mack
<style type="text/css" media="all">@import "css-code.css";</style>
or
<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%
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?
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
]
www.rebol.com -- Click download. All you need for this application is Rebol/Core.
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.
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.
[edited by: menyak at 11:11 pm (utc) on Dec. 30, 2002]
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.
HTH,
Jim
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.
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.
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. ;)
AW
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]
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.