| |
|

|
|
Faster Web
Pages
by Adult NetSurprise
Did you know that on
the average, home pages that weigh more than 40K have a 30% bailout rate?
Reducing that page weight down to 34K decreases the bailout rate to 6%!! That's
a significant amount! Do your web pages need to go on a diet? Not sure how you
can trim the fat from your pages? You're in luck!! Here are several ways in
which you can make pages that load faster!!
Shorten the names of files and
directories
Wrong:
- customerinformationpage.html
- summer2001.gif
- href="product_images/product_logos/logo.gif
Right:
- info.html
- sum2k.gif
- href="img/plogos/logo.gif
|
Use Cascading
Style Sheets
- Most weighty pages result from complex HTML
tables used for layout. Using CSS positioning uses less code and improves
design control
- Use Linked or Embedded CSS instead of
inline CSS.
- Use tags, not classes or IDs, as selectors.
For instance <p> not < p class="name">
- If you have to use class and IDs then keep
the names short
- Don't use default values. For instance font
color: black Black is often a default color for fonts
|
Use relative
links
Wrong:
- href="http://www.mywebsite.com/products/
product_logos/company.html"
- scr="http://www.mywebsite.com/public/news/products/logo.gif"
Right:
- href="../company.html"
- src="logo.gif"
If you do use absolute links, qualify them
(add the foward slash) to speed it up.
For example:
href="http://www.mywebsite.com/" |
Use HTML to
control spacing
Instead of using transparent spacer gifs to
control horizontal and vertical spacing, use (non-breaking space),
<p> tags, and <br> |
Don't Repeat Tags
But DO Nest Tags
Too many font tags (Frontpage does
this)
<font face="arial">
<font size="3">
<font
color="blue">
<p>Hello World</p>
</font>
<img src="smiley.gif">
<font face="arial"<
<font
size="3">
<font color="blue">
<p>Hello
Universe</p>
</font>
This is better:
<font
face="arial" size="3" color="blue">
<p>Hello World</p>
<img src="smiley.gif">
<p>Hello Universe</p>
</font>
|
Use Tables
Intelligently
- Table codes can increase rendering time
significantly
- Put the banner at the top of the page
outside the table. It will appear before anything else and give your surfers a
quick escape -- to your sponsor!
- Avoid nesting tables. Instead try to use
one table using rowspan and colspan to reduce number of cells.
- To align images, use align attribute
instead of using a nested table.
- KISS (Keep it --the table-- simple
sweetheart)
- Fill empty cells with a instead
of a transparent spacer gif
- Use images instead of complex tables
- Use CSS for faster table rendering
|
WYSIWYG
Apps
What-You-See-Is-What-You-Get applications are notorius for
producing code that is full of repetitive tags and proprietary code. Beware!! |
Graphics
Use images only when nothing
else is appropriate
- Some cool affects can be achieved using
HTML and CSS.
- Table cell coloring is a good
alternative.
Choose the right format for images. JPG,
GIF, and PNG.
Optimize your images!
- On a free site quality images are not even
necessary. Reduce the file size to something manageable.
- Crop images very close. Again, on a free
site, small images are okay. Your surfer will see the beautiful pix on your
sponsor site and surf there.
- Specify height and width only on images you
want to render fast. Sponsor ads should always have the size dimensions. If you
want your page to download fast, then add dimensions to all of your
images.
|
|
|
 |
Copyright © 2000 -
Adultnetsurprise.com, all rights reserved
|
 |