« Integrated Stats - Finally! | Main | YouTube Video Of The Day »
Loading Fast
There is no question that page load times are critical in the popularity of a web service. Google has been the master of this. GIve people what they want and don't make them wait.
So it's been bugging me for the past year that this blog takes half the afternoon to load fully. We all know the reasons, it's the sidebars full of widgets and calls to other web services. I've tried a number of approaches to solving the problem, but I think I've finally cracked the problem (as usual thanks to a reader's suggestion).
You'll probably note that the page loaded differently today. It is now loading the center column first. No waiting to see the posts. They come up instantly.
The sidebars still take half the afternoon to load, but you can be on to your next task by then if you want to be.
You'll probably also notice that I went back to a fluid page width, but this time the sidebars are set at 200px and only the center column floats. I'd like to thank Ivan at Federated Media who helped me figure out the CSS to do all of this. If anyone wants to see it, I will happily publish it.
Another cool thing about this redesign is that when you visit my blog page on a mobile browser (at least on my blackberry browser), all you get is the center column. Which is going to make it much easier to read AVC on a blackberry.
Comments (18) | Posted January 5, 2007 in Venture Capital and Technology
Comments
it *is* faster! One little bug on IE 6(craphole) for Windows XP (even crappier, but I'm dogfooding), is that while the page is loading, teh left margin keeps hopping back and forth a few pixels. One second it will cover the first few letters in the lines of the middle column, then it springs back. This happens every 1-2 seconds until the entire page loads.
Posted by: scotty | Jan 5, 2007 7:04:53 AM
Sadly, on a Motorola Q, avc.blogs.com still requires downloading the whole page. After 147 KB the title shows up; I'm still waiting for the whole page to download so that I can see the content (704 KB and counting, and I have nothing but endless white (literally) space).
I'll blame the rendering more on the pitiful Smartphone browser than on your page, but the page is still just too darn heavy. Maybe a dedicated site with just the rss content is needed?
Posted by: Oskar Austegard | Jan 5, 2007 7:31:42 AM
I to have the same issue, that my blog takes tons of time to load. I think this trick would help me gain the momentum.
Posted by: Rajesh Segu | Jan 5, 2007 9:17:56 AM
Fred, Thanks for making this change. I often view your blog over a dial up connection. This saves my a ton of time. Get the content out there first, and they will stick around for the widgets if there interested.
Posted by: Mike Iley | Jan 5, 2007 9:22:23 AM
Update: Fred was gracious enough to respond to my comment - pointing me to http://fastavc.com (which redirects to http://feeds.feedburner.com/fastavc/). After clicking OK to a scripting error alert that appears 21KB into the loading (recommending me to upgrade to IE6 - the Windows Smartphone browser identifies itself as "Mozilla/4.0 (compatible MSIE4.01; ... Smartphone;...", which leads most websites to believe I'm using an antiquated IE4 browser - they ignore the Smartphone part), the page does indeed load in a mobile-friendly format, after only having loaded 33KB.
The full page is still heavy - while the html itself is only 76KB, with all the associated images, etc, the grand total was around 350KB (my backlight timed out just before it finished loading, so I couldn't get the final size). But thankfully you don't have to stick around for the full download, you can read and move on before it finishes.
Added to my mobile bookmarks.
Posted by: Oskar Austegard | Jan 5, 2007 10:05:13 AM
very nice.
i'm using advanced templates in typepad. how do you move your feedflare's to the footer of the posts? i must be missing something obvious.
Posted by: bijan | Jan 5, 2007 10:19:10 AM
Great improvement. Mobile version works great, too.
Posted by: Rick | Jan 5, 2007 11:01:10 AM
It has always loaded perfectly fast...in an RSS reader. Blog posts are the good stuff. And while sidebar content is fun (and useful) sometimes, if I read a blog regularly, I read it in RSS.
Posted by: David Kluskiewicz | Jan 5, 2007 11:16:19 AM
Nice work, Fred! This is great.
Posted by: sippey | Jan 5, 2007 12:03:01 PM
i wonder if there would be a viable business plan in being a "bling" host service....someone that standardizes API's for interaction, standardizes any special tweaks that are needed for TypePad vs. blogger.com vs. any other feed tools. Most importantly, it would be a service that optimizes a la akamai the loading of sidebar bling on blog pages....hmmm...
Posted by: rob | Jan 5, 2007 12:18:16 PM
Yes, please do publish the CSS.
Posted by: D. C. | Jan 5, 2007 2:25:04 PM
D. C. I was gonna make the same request, but instead I just used "view source" to find the link to the CSS and then pasted the URL into the browser window to see it. I'll save you the first step:
http://avc.blogs.com/a_vc/style2007.css
There you go. It's even properly commented so you can see where it came from and what it does.
Nice work Fred and Ivan!
Posted by: john t unger | Jan 5, 2007 4:29:41 PM
On this subject, I was wondering whether there was any value in being able to:
- not show visitors any widgets on a second and subsequent visit
- show visitors a subset of widgets on a second and subsequent visit
- show visitors a different set of widgets on a second or subsequent visit
- rotate a set of widgets so visitors see different stuff at the top each time they come along
We can offer any or all of these at Snipperoo - and other variants. Any use?
Posted by: ivan | Jan 5, 2007 4:56:53 PM
Dude, you've got so much crap in your sidebars! (sarcastic crap, not literally bad content... just lots of stuff)
Posted by: Toby Getsch | Jan 5, 2007 9:27:06 PM
D.C. and John:
Also take a look at the HTML source code for the page, there are some IE-specific conditional comments included there as well.
They look something like this:
[if lte IE 6]
..
![endif]
These are necessary for proper browser compatibility. I'm working on a version of this layout that doesn't require these or, at least, uses them in a more elegant way.
The mobile style sheet is pretty basic and needs to be fleshed out further for greater compatibility.
Posted by: Ivan K | Jan 5, 2007 10:12:32 PM
Ivan K,
Thanks for amending my quick comment there… Didn't think to check the HTML off the cuff. Was kind of planning to dissect in detail later.
Posted by: john t unger | Jan 6, 2007 12:58:00 AM
Please do post the CSS. I want to do the same changes on my blog.
Posted by: Bryan Starbuck | Jan 6, 2007 12:29:51 PM
Fred your new page design does not work. While it is loading the left col blinks on and off and when it is finished it covers the left 3-4 letters of your posts. Please fix. See other posts. Maybe this is due to IE 6, but I think enough readers use IE6 that it should work.
Posted by: anon | Jan 8, 2007 10:11:45 PM
A VC
