SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard Rabies's Avatar
    Join Date
    Apr 2005
    Posts
    1,515
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Designing HTML for fastest page loading

    Hi, I'm Troy McRabies. You may know me from such forums as "Flash & Actionscript", and "Advertising Sales & Affiliate Programs". I'm here to get some solid advice on page formatting for optimal fast loading.

    OK I am trying to solve a problem and it may require some techniques I am not familiar with. (My background is that I've been building websites since '96, but I have never delved into really advanced stuff. I use the basics that work, and what works are the basics. I make HUGE use of TABLES for layout. I know enough to code HTML "by hand" but I mostly use Dreamweaver. I'm pretty much an expert on graphics optimization.)

    So my problem is this. I have a site which I originally built around 2001. I used Tables for layout of everything, as well as SSI for inserting content that repeats throughout the site pages. As you may know, tables are great, except that in IE the content will not render until the whole table is done loading.

    My site is considered "slow" by systems that rate site speeds. While I realize my site is a little heavy on the graphics side, I have done a couple tests and it would appear that my advertisements are what really bog down the page loading. Ditching the advertising is not an option. Ditching tables.... well, only if there are other methods to get equal type of layouts without delving into anything too complicated.

    So the main questions for the experts are: What can I do so that my page content appears quickly, and is not dependant on the entire layout table being loaded? What can I do to "prioritize" my page content so that main content loads and appears quick, and advertisements appear "whenever"? I have heard of possibly using DIVs instead of tables??

    My site is here: http://www.lilgames.com
    I'm mainly interested in optimizing the front page.
    Last edited by Rabies; Jun 20, 2006 at 11:32.

  2. #2
    SitePoint Guru hifigrafix's Avatar
    Join Date
    Oct 2005
    Location
    Nashville, TN
    Posts
    628
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've basically got a 4 column layout. If you simply setup 4 css columns it will load significantly faster. I just transitioned a few of my old pages and some are loading 4x-6x faster (2 pages w/ embedded video were taking upwards of 20 seconds on 56k ).

    I didn't know this but evidently a table will not load until all of the elements nested inside it are ready to load causing the whole page to be slow.

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Going with a css layout may help a little with download time, but I don't believe it would be as much as you'd think.

    I didn't find that the page loaded that slowly for me.

    These are the results of putting the page through the optimiser
    http://www.websiteoptimization.com/s....lilgames.com/

    I'd say optimising the images a bit more, looking at all the scripts associated with the page etc., may also help. Try and use a correct and full doc type. Removing the deprecated code in your html and removiung other redundant code from the page will help speed things up also.

    Nadia

  4. #4
    SitePoint Member jeffreyblove's Avatar
    Join Date
    Nov 2004
    Location
    maple ridge
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page Speedup

    Hi Tony
    One thing that I did not understand when I first started designing web templates was the overhead in using many small images on one page. The overhead is in the http negotiations required rather than the size of the individual images - when we all used 2400Baud modems, image size was a much greater factor. You have 41 images on the page which can really tax your server. One image is 16k and should be much smaller. A total size of 225K is about double what you could achieve I think.
    Also, many components of the page come from other servers so you cannot control their display time.

    My strategy in upgrading mec.ca was:
    1) to remove tables and use divs and css wherever possible. Long lists of things especially, as they really did slow the display down. With divs, individual list items can display as soon as they are downloaded.
    2) use text-over-css images (background-image('image')) or pure css to decorate menu items - I think you could do all your menus with two background images and have an identical visual result.

    I was able to cut the size of our biggest pages by 60% and decreased load-and-display time by 30-40%. Our code is much easier to read and maintain to boot!

    Hope that helps,

    JeffL

  5. #5
    SitePoint Wizard Rabies's Avatar
    Join Date
    Apr 2005
    Posts
    1,515
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like I need some CSS and DIV edumacation!
    Thanks for all your tips, and especially that great page analyzer!

    PS: When they suggest using CSS for buttons instead of images, do they mean using type rollovers on regular text links? Does that not mean I would be limited to the standard fonts then? (Arial, Verdana, Times, etc)

  6. #6
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rabies
    PS: When they suggest using CSS for buttons instead of images, do they mean using type rollovers on regular text links? Does that not mean I would be limited to the standard fonts then? (Arial, Verdana, Times, etc)
    Basically, you can alter the background color, the font color, border colors using the CSS instead of loading one image and then replacing it with another.

    You can specify any font you like but suggest you use a font-family (e.g. "comic sansMS", verdana, sans-serif). If the users computer does not have comic sans it will degrade to verdana, if no verdana then a generic sans-serif font). While you lose a little control over the exact view the visitor gets you have the benefit of increasing the page load speed.

    Good luck.
    fisherboy
    Web Site Design

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only way to make a page load faster is to reduce its 'weight'.
    • Use fewer images and/or optimise the images.
    • Minimise the HTML markup; use an external CSS file to control all presentation.

    By using layout tables, you're asking for performance trouble. A table requires much more HTML markup than the equivalent semantic structure + CSS.

    There's also the issue of perceived loading speed. A browser needs to read an entire table before rendering it. This is necessary so that the browser can get information about the number of columns and the relative widths of the content in each column. It then has to go through the entire table again to re-read and render.

    With semantic markup and CSS, the browser can render elements as they appear in the response. Even if the total load+render time isn't much shorter than with layout tables, the perceived speed is much higher with CSS since things start happening much quicker on the screen.

    If you cannot abandon layout tables yet, e.g., due to your admitted lack of knowledge about modern web design, at least try to break up the layout into multiple, consecutive tables. That way the browser can read and render one small table before getting to work on the next one, and the perceived speed will improve (although the total load time will actually increase a bit).
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Wizard Rabies's Avatar
    Join Date
    Apr 2005
    Posts
    1,515
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like I may take the short route first, and attempt to split the page into more consequtive tables. I may also have to resort to cut n paste of elements I currently use SSI for (that web page analyzer mentioned it's bad to have too many external files). Sucks though because SSI lets me have one file for content that gets repeated throughout the site.

    PS: I did a quick test where I have the EXACT same page but with all external advertising removed. It sped load time up by 25 to 30%

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The use of SSI shouldn't have much of an impact, unless your server is under very heavy load. I'd guess that anyone talking about 'external files' mean files that require additional HTTP requests (such as lots of <img> elements etc.). Even that isn't all that much of a problem for user agents that supports Keep-Alive connections.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Wizard Rabies's Avatar
    Join Date
    Apr 2005
    Posts
    1,515
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    The use of SSI shouldn't have much of an impact, unless your server is under very heavy load. I'd guess that anyone talking about 'external files' mean files that require additional HTTP requests (such as lots of <img> elements etc.). Even that isn't all that much of a problem for user agents that supports Keep-Alive connections.
    Ah. I misinterpreted what the Analyzer reported. I see now SSI files are not counted in the external file list.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •