This page was printed from dotFAF.com on 21 Nov., 2008

dotFAF.com Version 2.3

Author: Faf
Date: Friday, January 10, 2003
Date/Time: 22:52 GMT
Permanent URL: http://dotfaf.com/archives/20030110_dotfafcom_version_23.php
Two days ago, I really started to worry about how long this page "takes to load". The problem wasnt a loading problem as such but i got round to fixing it anyway.

The difference it's going to make is so much obvious that I'm calling it a version change, albeit a small one.

The Problem:
I was using tables earlier. Here's a general idea of how tables are created in html:

<table>
<tr>[row starts]
<td>column 1</td> <td>column 2</td> <td>column 3</td>
</tr> [row ends]
</table>
Now one problem with tables is that, until the closing </table> tag is loaded, nothing at all is shown on the page. At least in internet explorer. Now that was being a bitch 'cos in my case, Column 2, which contained the blog always had a lot of text to load, which is why most people come here anyway.

As if that wasnt a problem, Column 3 contained images, buttons and worse of all scripts from other sites. Now imagine having one script for blogsnob[1] and another for wander-lust[2]. What happens if one of those sites is down? Well internet explorer tries to load the scripts for a few seconds before giving up. That's 10 seconds added to the loading of the page!!

The Solution:
Abe's current layout has the same problem. Difference between hers and mine though is that ther section of the page containing the blog entries loads first, but then the sidebar takes ages to load.

I had a look at her source and realised she uses CSS layer positioning[3] for the quick-loading section. Well I've gone a step further and used CSS for all my layout. Now if somehoe a bit of script is slowing the page down, all that happens is that the site is displayed up to that point and as the script loads it's displayed.

The result is that, as soon as you're on the site, you see most of the page loaded. You wont realise there's some bit at the bottom loading, not unless you scroll down real fast. And even with that, you might not see anything if the script loads quick.

Now I'm at peace. And i'll also look forward to not receiving mail from people telling me "Your site takes too long to load. Do something about it!!"


Comments on this entry:

Author: Doobs
Date/Time: January 11, 2003 8:10 PM

Faf... your page is loading funny! :)


Author: Faf
Date/Time: January 11, 2003 8:35 PM
Email: nafos2002@hotmail.com

you should know better than to describe anything as "funny". sure... there are a million and one kinds of funny. care to be specific?


Author: Doobs
Date/Time: January 13, 2003 11:43 PM

umm.. weird funny?


Author: Dawn
Date/Time: January 15, 2003 6:03 PM
Email: beatnik@onebox.com
URL: http://www.drivingwithdawn.com

I want to use CSS for all of my layout, too. I think it is so cool and I am *so* tired of using tables and clearpixels for layout.

How do you handle the lower browser versions like NS 4.7? Everytime I try to lay something out with CSS, it looks funky in the old Netscape.

Please tell me that it's OK just to ignore the old versions. That's what I want to hear. :)


Author: Faf
Date/Time: January 15, 2003 6:07 PM

yeah... u're right. ignore NS 4.7- and any other browser that is more than 5 years old. You can follow a discussion on http://goateestyle.com about CSS and dinosaur age browsers.


Author: Dawn
Date/Time: January 15, 2003 9:28 PM
Email: dawn@drivingwithdawn.com
URL: http://www.drivingwithdawn.com

Thanks for the link. I thought you'd agree with me. I don't feel as bad, now. I can't wait until my site uses CSS...

Some people who work with me may not agree with this, but who cares? These designers still think it is vital to code for 4.x browsers. They were still coding for 3.x browsers until recently!



TrackBack URL for this entry:
http://www.dotfaf.com/cgi-bin/mt/mt-tb.cgi/172

Trackback Pings Received count (0)


Trackback Pings Sent count (0):


Hyperlinks in entry:
1) http://blogsnob.idya.net/
2) http://wander-lust.com/
3) http://www.echoecho.com/csslayers.htm