![[The HTML Writers Guild]](/images/lo-025.gif)
HWG.Org |
|---|
| Resources |
| Lists |
| eClasses |
| Services |
| Books |
| Interact |
| Join! |
| News |
| Events |
| Contact |
| Sitemap |
| Search |
| HTML Writers Guild | Guild Operations | Newsletters | Tips | Jan00a |
HWG-News Tips Early January 2000
Optimization Techniques Tips
HWG-News features member-submitted "tips" in each issue, in the space between articles and announcements. These were the tips submitted for the Early January 2000 newsletter, for the category 'Optimization Techniques'.
This issue's winner!
When designing a site, try to know and understand your target audience. As as example, for my personal site, fully 48% cannot view CSS, and of the ones who can it's a 60/40 split between IE and Netscape. And a little more suprising, 38% of the total cannot view frames!! So if I were to use frames for navigation I would need a good alternate site available, and if I used CSS heavily, the site wouldn't function or look proper to very many of my visitors. So I always try to keep in mind who the visitors to any site may be.
Other Submitted Tips
Chop your image file sizes by reducing the number of included colors. Most images can lose about half the colors they begin with -- and not lose quality! Try Fireworks's export feature to quickly learn about this technique (free trial at http://www.macromedia.com/). Photoshop and other image program pros can do this manually.
One way I have found to speed up the loading of a page is to take large images and cut them into small images to make up the large image. You also can reduce the number of colors used in the image to reduce file size without changing the appearance of the image. Both ways of changing image files will help speed up the page loading.
Want to make your pages *seem* like they display faster? Always divide one TABLE into two (or more) chunks, so your visitors will have something to view, while the bottom areas are still loading.
When using tables and other sorts of alignment tags, always be sure to test them on other monitors with different resolutions. This way you can be sure that all of your viewers get the relatively same information in about the same format. This is especially important if your are designing on a computer with an inferior monitor with bad resolution settings.
Netscape supports an element in the IMG tag called lowsrc. If you use it, Netscape will load the lowsrc image first and load the src image after. This is great for pages with several large images.
First CROP your graphic! By cropping you focus on the subject, giving it better definition, while losing unnecessary space.
Do you want to use frames, but don't want to hurt the Search Engines' capabilities of indexing your site? Go ahead and insert your META tags into the <HEAD> as you normally would, and then use the <NOFRAMES> tag to put in at least a paragraph of Search Engine optimized text.
Avoid blank lines. Blank lines take up extra space and slow down page loading times. This can occur on any HTML-editing program, so check the results AFTER saving, since many programs re-format source HTML (even edited source) before saving.
Speed up the loading of small style elements by reusing the same small graphic images more than once and on more than one page. You can vary the look of small colored icons used as bullets and lines by varying the HEIGHT and WIDTH attribute. Download once - use many times.
Does your table cell background not show in Netscape but does in IE? Solve it by inserting a nbsp; into the cell and the background will appear!
In my experience in working with subcontractors who are familiar with
design for print, I have found that the simplest, yet most often
overlooked, way to optimize a JPG photo file is to convert it from 24-bit to
8-bit format.
Using an optimized pallette and error diffusion there is not a noticable loss
of quality, yet the image file can be reduced to 1/2 its original size or
less.
Decrease your image colors using Paint Shop Pro or other graphic program before posting on your web site.
Pre-load images for your entire site by inserting them at the bottom of the opening page or splash page (usually named "index"). Set the image HEIGHT and WIDTH attributes to 1x1 pixels, so they'll be virtually invisible to the user. Subsequent pages using those images will load much faster.
When using tables, set the width attribute to 100% or less. The table will then size itself to conform to any viewer's browser and/or screen size, and also prevent the need for left/right scrolling. Just make sure that your graphics will fit in a browser/screen size that is smaller than the one you are designing on. An example where I used this technique is at http://members.xoom.com/thunder_fans/thunder.html.
Comment out lines in a CSS file using:
/* your website name or other reference */
This is useful if you use a template CSS file for a number of websites, and
even more so if you have a base CSS file for a website, and then refer
pages in different directories to a specific CSS file generated from the
template.
So the above might become:
/* your website name - dir name - page name(s) */
On large sites this aide is invaluable.
If you have an image that takes ages to load, specify the path to a low-res or black/white version of the image in the LOWSRC attribute of IMG. It will come up first, and gradually disappear as the better quality one loads.
Want to have smaller pages that load faster and that contain the same amount of information? Then NEVER use WYSIWYG (what you see is what you get) programs, they always put extraneous lines in the code. If you use programs like that, always clean up the files before you upload them.
![[Valid HTML 4.0!]](/images/vh40.gif){kind=small}