Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
How Design Affects Performance
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-17-2007, 10:00 PM

The first few seconds when visiting a site is important. You need to grab the reader's attention immediately. So, if your site is slow to load - you have a problem.
[rft]Success is based on
how the reader
perceives your site.
[/rft]
Complaint I
Members complain that your site takes forever to load.

Complaint II
Members complain that some parts of your site takes forever to load. For example, the body will load but the column navigation is slow (delayed).
If you heard any of the above complaints and you wondered why - then continue reading.

Introduction

This 6 part series will focus on a few key areas that affect performance on the client-side. Our focus is specifically on first-time visitors as their experience determines if they become a member.

Let me clarify a few terms before we continue:
  • Performance - the reader's overall experience when visiting your site
  • Design - the generated page (everything - not just the eye-candy)
What Affects Performance

The following affects performance:
  • Progressive Rendering
  • HTTP Requests
  • Style sheets / Javascript Files
  • Size of Page / Objects
  • Other
Progressive Rendering

Progressive rendering is the act of displaying each object as it is downloaded.

There are 2 popular browsers right now: Internet Explorer and Firefox.
Both support progressive rendering but they differ on how they render tables. Hence, your choice of design and the reader's choice of browser can affect performance.

HTTP Requests


An HTTP Request is a request from a browser to a server. A request can be made for an HTML page or any object included within the page. Too many requests can affect performance.

Style sheets / Javascript
  • Style sheets describes how an object on a Web page are presented. It's a means of adding style such as font, color, position, etc to objects on a Web page. There are 3 methods you can use when styling an object: inline, internal, or external. The method that you use, it's location, size, and number can affect performance.
  • JavaScript is a client-side scripting language. It enables Web authors to create interactive sites. Size, location where JavaScript is embedded, and the number of files (external) can affect performance.
Size of Page / Objects
  • The size of an object can affect performance.
  • Location of an object can affect performance.
By understanding what affects performance, you can create a better user experience. Visitors who have a good experience will spend more time on the site. The longer a visitor stays on your site the more revenue you can earn and the more members you will have.


Next Article in this 6 part series:
How Design Affects Performance : Progressive Rendering

[hr]black[/hr]Learn More about Princeton
Reply With Quote
  #2  
Old 10-18-2007, 07:43 PM
amnesia623 amnesia623 is offline
 
Join Date: Jul 2006
Location: Glendale, AZ
Posts: 226
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

thank you!
But don't forget to mention that Safari is the Mac's browser that ships with OS X and IE isn't available for the Mac.

http://www.microsoft.com/mac/product...texplorer.aspx
Reply With Quote
  #3  
Old 10-18-2007, 10:17 PM
davidw's Avatar
davidw davidw is offline
 
Join Date: Jul 2005
Location: Arkansas
Posts: 2,815
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Very good! Design is very critical to a site's performance. Most people consider design as visual when actually most of the site's design is the backbone and can make or break the site.
Reply With Quote
  #4  
Old 05-02-2008, 03:37 AM
fourat fourat is offline
 
Join Date: Mar 2008
Posts: 174
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

very nice ... waiting for the next articles

--------------- Added [DATE]1209706830[/DATE] at [TIME]1209706830[/TIME] ---------------

i have a question .. when i but javascripts codes for Ads and check the page in w3schoole i see there are errors

how i but the javascripts codes without errors in validation ?

--------------- Added [DATE]1209717337[/DATE] at [TIME]1209717337[/TIME] ---------------

what the function of this code ?
Code:
.aimgbox {position: relative;overflow:auto;height:auto;width:98%;padding:5px}
img.aimg {max-width:96%;cursor:pointer}
<!--[if lte IE 6]>
.aimgbox {width:99%}
img.aimg{width: expression(this.width > 530 ? 510: true)}
<![endif]-->
is it for resizer images ?
how i use it ?
Reply With Quote
  #5  
Old 05-02-2008, 12:39 PM
Jasem's Avatar
Jasem Jasem is offline
 
Join Date: Feb 2006
Location: www.menokia.com
Posts: 594
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thank you very much
Reply With Quote
  #6  
Old 05-04-2008, 04:22 AM
fourat fourat is offline
 
Join Date: Mar 2008
Posts: 174
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

can you answer me please
Reply With Quote
  #7  
Old 09-03-2009, 12:02 PM
seostudio seostudio is offline
 
Join Date: Apr 2009
Posts: 7
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Very good!

Design is very critical to a site's performance
Reply With Quote
  #8  
Old 09-04-2009, 01:10 AM
yahoooh yahoooh is offline
 
Join Date: Oct 2002
Posts: 567
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

i use YSlow to chick my design and site
it give me: A complex page means more bytes to download, and it also means slower DOM access in JavaScript. Reduce the number of DOM elements on the page to improve performance.

how to fix this ?
Reply With Quote
Reply

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 06:18 PM.


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.04135 seconds
  • Memory Usage 2,264KB
  • 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
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (8)post_thanks_box
  • (8)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (8)post_thanks_postbit_info
  • (7)postbit
  • (8)postbit_onlinestatus
  • (8)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_postinfo_query
  • fetch_postinfo
  • 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
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete