![]() |
|
Article Options |
How Design Affects Performance : Progressive Rendering
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
by
![]() Progressive rendering is the act of displaying each object as it is downloaded. ![]() 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. PROSMozilla 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. PROSStill 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
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) Learn More about Princeton No members have liked this post.
Last edited by Princeton; 26 Oct 2007 at 03:02.. |
Views: 98121
|
Comments |
#2
|
|||
|
|||
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.)
No members have liked this post.
|
#3
|
||||
|
||||
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. ![]() If I can help one person - than I've done my job.
__________________
Former vBulletin.org Staff Member Latest Articles: Liquid Layout = Less Ad Revenue? How to Monetize Your Site Improve Web Page Performance How To Write For The Web If it needs instructions, there's room for improvement. Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them! No members have liked this post.
|
#4
|
|||
|
|||
where is the different between
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 No members have liked this post.
|
#5
|
||||
|
||||
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
__________________
Former vBulletin.org Staff Member Latest Articles: Liquid Layout = Less Ad Revenue? How to Monetize Your Site Improve Web Page Performance How To Write For The Web If it needs instructions, there's room for improvement. Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them! No members have liked this post.
|
#6
|
|||
|
|||
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.
No members have liked this post.
|
#7
|
||||
|
||||
Not using nested tables, and avoiding tables for designs would help fix alot of problems
![]()
__________________
Looking for ImpEx?
No members have liked this post.
|
#8
|
|||
|
|||
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.
__________________
EnjoyCG : free CG tutorials & community No members have liked this post.
|
#9
|
||||
|
||||
Because the style was designed in 2003, and it won't be updated till 4.0.
__________________
Looking for ImpEx?
No members have liked this post.
|
#10
|
|||
|
|||
please let me know what template I should use to get exactly the same background and look like this forum
No members have liked this post.
|
#11
|
|||
|
|||
great... these articles (and your site, allnurses) are wonderful.. i have learned a lot here!
when can we read the part 3 of How Design Affects Performance? No members have liked this post.
|
#12
|
||||
|
||||
Originally Posted by Princeton
You are right brother, now I want to redesign some stuff, my site actually takes long to load and it does affect people to stay.![]()
Thanx a lot man! ![]() No members have liked this post.
|
#13
|
||||
|
||||
Excellent, Thank you very much
![]() No members have liked this post.
|
#14
|
||||
|
||||
thx
when i show my style in frontpage or microsoft expression i see the css codes like this body { background: #000000; color: #000000; font: 11pt tahoma, arial, helvetica, verdana; margin: 0px 1px 10px 0px; padding: 0px; } a:link, body_alink { color: #FFFFFF; text-decoration: none; } a:visited, body_avisited { color: #FFFFFF; text-decoration: none; } but in vbulletin.org/forum i not see the css codes !! why ? and how i hide it ? No members have liked this post.
|
#15
|
||||
|
||||
admincp/vbulletin options / Store CSS Stylesheets as Files?
enable it and follow the directions
__________________
Former vBulletin.org Staff Member Latest Articles: Liquid Layout = Less Ad Revenue? How to Monetize Your Site Improve Web Page Performance How To Write For The Web If it needs instructions, there's room for improvement. Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them! No members have liked this post.
|
![]() |
«
Previous Article
|
Next Article
»
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
Article Options | |
|
|
New To Site? | Need Help? |
All times are GMT. The time now is 22:32.