Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
Reload this Page How Design Affects Performance : Progressive Rendering
FAQ Members List Calendar Search Today's Posts Mark Forums Read

Reply
Page 1 of 3 1 23
 
Thread Tools
How Design Affects Performance : Progressive Rendering
Princeton's Avatar
Princeton
Join Date: Nov 2001
Posts: 6,693

Joe Velez began developing for the web in 1998. He is an avid vBulletin user and volunteers his services as a vbulletin.org administrator. He currently spends his time maintaining and developing allnurses.com.

Vineland, NJ
Show Printable Version Email this Page Subscription
Princeton Princeton is offline 10-24-2007, 10:00 PM
Progressive rendering is the act of displaying each object as it is downloaded.

[imgrft]https://vborg.vbsupport.ru/images/portal/success_chart.gif[/imgrft] Currently, the 2 most popular browsers are Internet Explorer and Firefox. Both support progressive rendering; but, they differ on how they render tables. (Please note, we are focusing on tables because vBulletin utilizes tables throughout it's design.)

This article is part 2 of How Design Affects Performance.

Internet Explorer 7

When Internet Explorer renders a <table>, it downloads all the objects within the table before displaying it. This is required so that Internet Explorer can render the table with the correct width for each column.
PROS
The entire table is displayed as designed.

CONS
Large tables or tables with many objects will cause a delay in loading the page.
Mozilla Firefox 2

On the other hand, Firefox renders all objects progressively regardless if it's in a table. That is to say - each object is displayed as soon as it is downloaded.
PROS
The reader has something to read as they wait for each object to download.

CONS
Each object is displayed without knowing it's position. When the table is completely loaded, all objects are moved to their respective positions.
Still confused? Below are 2 animated images that visually displays progressive rendering between the 2 major browsers: Internet Explorer and Firefox.


Firefox users - clear cache and refresh page to review animation once it ends.

What You Can Do To Improve Performance

Performance Tips
  1. Ensure HTML code is valid.
  2. Minimize number of nested tables.
  3. Never wrap entire body contents within a table.
  4. Move towards a CSS-based layout.
  5. Move JavaScript to the very bottom of document (right before the </body> tag). If not possible, move JavaScript to the <head> of document.
  6. Pay close attention to the size of objects and their locations?
The Key Is To Understand

By knowing each browser's strengths and weaknesses, you can build a better design. A good design will never make the reader wait.

Next Article in this 6 part series:
How Design Affects Performance : HTTP Request (coming soon)

[hr]black[/hr]Learn More about Princeton
Reply With Quote
  #2  
Old 10-26-2007, 03:59 PM
Guest190829
Guest
  
Posts: n/a
Default
Great article, Joe. And research has shown that response time is a critical aspect on how users judge a website (amongst other factors, but response time could be the first impression that sends your user away.)
Reply With Quote
  #3  
Old 10-28-2007, 05:09 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Design and structure plays a big part on success.
It's all about perception (psychological) - how the end-user "sees" your web site.

99% of the time, it's the design and structure which is at fault (for failing) - many users do not understand this.

By the time I finish this 6 part series - I will have everyone thinking differently about their choice of design and structure .. at least that's my goal. :up:

If I can help one person - than I've done my job.
Reply With Quote
  #4  
Old 10-28-2007, 05:34 PM
ragtek ragtek is offline
 
Join Date: Mar 2006
Location: austria, croatia
Posts: 1,630
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
where is the different between
Quote:
# Move JavaScript to the very bottom of document (right before the </body> tag). If not possible, move JavaScript to the <head> of document.
and js in the body?
i moved my anayltics code into the header instead of befor </body> as they wrote and since than it looks like the site is faster
Reply With Quote
  #5  
Old 10-28-2007, 06:12 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
a browser will download all the objects within the <head> before any objects within the <body> of a document...

a large javascript file (or multiple) will cause a delay in rendering the page (non-cached)

by placing the JavaScript files at the bottom of the page you are telling the browser to download all the objects on the page prior to downloading the JavaScript files (by placing the files at the bottom the end-user will not be affected by the delay in downloading the files)

the point here is to know the difference and to choose one or the other ..
you do not want to place JavaScript files in the middle of the <body> as it will slow the rendering of the page as the browser will have to
1)__ Stop,
2)__ Download the javascript file,
3)__ Parse/interpret javascript file,
4)__ Continue to next object

as you can imagine by placing a large javascript in the middle of the page will cause a visible delay
Reply With Quote
  #6  
Old 11-06-2007, 06:14 PM
aeturner89 aeturner89 is offline
 
Join Date: Sep 2006
Posts: 115
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Danny.VBT View Post
And research has shown that response time is a critical aspect on how users judge a website (amongst other factors, but response time could be the first impression that sends your user away.)
That's very true, When I visit a forum and the design is horrible I get turned off very quickly and I click off the site after a few minutes at most.
Reply With Quote
  #7  
Old 11-06-2007, 07:17 PM
Zachery's Avatar
Zachery Zachery is offline
 
Join Date: Jul 2002
Location: Ontario, Canada
Posts: 11,440
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Not using nested tables, and avoiding tables for designs would help fix alot of problems
Reply With Quote
  #8  
Old 11-08-2007, 08:16 AM
Jelmertjee Jelmertjee is offline
 
Join Date: Oct 2006
Posts: 47
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Maybe this is not really on topic, but why is vbulletin still using tables? div's with css would be far more efficient right? Furthermore you would have a better code - content ratio and better SEO, editing will also be easier because div's are much more simple.
Reply With Quote
  #9  
Old 11-08-2007, 03:28 PM
Zachery's Avatar
Zachery Zachery is offline
 
Join Date: Jul 2002
Location: Ontario, Canada
Posts: 11,440
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Because the style was designed in 2003, and it won't be updated till 4.0.
Reply With Quote
  #10  
Old 11-09-2007, 04:53 PM
helpmehost helpmehost is offline
 
Join Date: Nov 2007
Posts: 80
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
please let me know what template I should use to get exactly the same background and look like this forum
Reply With Quote
Reply
Page 1 of 3 1 23

« Previous Thread | Next Thread »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 12:57 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.06481 seconds
  • Memory Usage 2,285KB
  • Queries Executed 23 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (10)post_thanks_box
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (9)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete