Solved

Optimizing

Posted on 2000-03-01
9
261 Views
Last Modified: 2010-04-09
Hi There,
I was reading a note in a job advertisement and it mentioned the need to know how to optimize tables and pages to load fast, they referred to it as production code.

I know about page size and such, but what are they talking about when it comes to optimizing tables and pages for speed?  What tricks are they referring to?

Thanks for any help,
davlun
0
Comment
Question by:davlun20080
  • 5
  • 3
9 Comments
 
LVL 2

Expert Comment

by:egbservices
ID: 2575792
I have learned to keep the pages and the graphics small in size, uncluttered, cross platform compatible, use the standard colours, us standard fonts, no frames, no automatic links to other sites (counters, statisical stuff, public cgi-bins, etc.) stay away from sounds and so on! The real idea as far as I can see is to speed up the loading of the pages...
The to URL's can give you some ideas too!
http://websitegarage.netscape.com/
http://www.delorie.com/web/
0
 
LVL 19

Expert Comment

by:cheekycj
ID: 2576904
optimizing tables is referencing to nesting of tables and absolute sizing vs relative sizing, etc
go to this ongoing discussion:
http://www.experts-exchange.com/jsp/qShow.jsp?ta=html&qid=10299084 

It is really informative.

CJ
0
 
LVL 3

Author Comment

by:davlun20080
ID: 2577181
Hi CJ,

I think I was looking for more that a link to an ongoing questions but the info on the table was similar to what I thought.

I am really trying to find out what separates the production code from not, the tricks to making a page load fast in the different browsers and so forth.

Will reopen for now to see what other discussion can be generated to see about the rest of the question.

Thanks and feel free to add info here for the points.

davlun
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 19

Expert Comment

by:cheekycj
ID: 2577514
OK.

Check out these URLs:
http://www.netscapeworld.com/netscapeworld/nw-02-1997/nw-02-bestpract.html
http://www.pantos.org/atw/speed.html
http://www.netmechanic.com/

The main page of your web site should load in 8 seconds or less with a 56K modem. According to two recent surveys, conducted by Forrester Research and Gartner Group, ecommerce sites are losing $1.1 to $1.3 billion in revenue each year due to customers click-away caused by slow loading sites. If a page takes too long to load, your potential customer will not wait. Ultimately costing you business.


Use graphics sparingly to convey information. Each graphic takes another trip to the server. Consolidate neighboring graphics or use CSS'd text or table cells with background colors to speed display. WebMonkey has a policy "use graphics for graphics and text for text, not graphic text." Size graphics to fit in a typical user's window (a maximum of 465 to 532 pixels wide [i.e., the default Netscape screen to a printed page], or for max screen space viewable on all platforms use a max of 580 pixel wide tables to fit on Mac screens). It's easy to see if a site's been designed on only a PC, the page is too wide on a Mac, typically 620-640 pixel wide tables fit a PC's monitor but are too wide to display on a 14-15" Mac monitor.

Break up your tables vertically for a cascading load to appear more responsive (we use this technique on our front page). One huge table takes much longer to display content than stacked smaller tables which display one at a time. Microsoft's IE5 has a FIXED table width feature that speeds table display, unfortunately this is proprietary and does not work on Netscape's browser.

Optimize graphic file size for Web display (a maximum of 20 KB per graphic). Utilize page display speedups such as the WIDTH and HEIGHT attributes for images. Use JPEGs where possible and appropriate (continuous-toned images) and minimize the color palette of GIFs to optimize file size. Provide text alternatives to graphics for low-bandwidth users, the blind, and for speed. ALTernate text tags for images should be functional, not descriptive. If the graphic has no function, use ALT="" (i.e., <IMG SRC="pics/splash.jpg" ALT="">).

Optimize your HTML by removing excess spaces, comments, tags and commentary, especially on your home page, to minimize file size and download time. Products like Antimony Software's Mizer and VSE's HTML Turbo automate this process by removing excess characters and HTML to optimize your HTML and JavaScript. I manually tune our home page for minimize file size (typically 14-15K for the HTML page), but these products can help even file-size obsessed webmasters like myself. These products are drag and drop, and should be used as the last step before you upload your page (the files are harder to read after many of the returns are removed). After optimization your pages will appear to snap onto the screen.



0
 
LVL 19

Expert Comment

by:cheekycj
ID: 2577522
0
 
LVL 3

Author Comment

by:davlun20080
ID: 2577617
CJ,
Can you give me your home page so I can see what you mean by breaking up tables verically.
do you mean:
table
***
table
***
table

or:
 
t     t     t
a  *  a  *  a
b  *  b  *  b
l  *  l  *  l
e     e     e

Thanks,
davlun
0
 
LVL 19

Accepted Solution

by:
cheekycj earned 75 total points
ID: 2577731
I can't show you my front page because it is on an intranet and our internet site uses FLASH so tables aren't needed but what I mean is instead of using a table that is large:
<table>
<tr> <td colspan=2> header</td></tr>
<tr> <td> left bar</td>
     <td> content</td></tr>
<tr> <td> footer</td></tr>
</table>

it is better to have:
<table>
<tr> <td> header</td></tr>
</table>
<table>
<tr> <td> left bar</td>
     <td> content</td></tr>
</table>
<table>
<tr> <td> footer</td></tr>
</table>

CJ

0
 
LVL 3

Author Comment

by:davlun20080
ID: 2578580
Thanks for the comments and the links,
davlun
0
 
LVL 19

Expert Comment

by:cheekycj
ID: 2581257
Just glad to help.

CJ
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Border and image sizing 5 29
Hide un-named HTML Label with CSS 14 36
html border input line 7 16
Set time on Session (ASP) 14 23
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question