Scott Hanselman

Low Bandwidth View and other Hidden (and Future) Features of MSDN

April 17, '09 Comments [37] Posted in ASP.NET | Microsoft | MSDN
Sponsored By

Ok, so I'm only 8 months late. ;) Last year MSDN quietly implemented a "low bandwidth" view.

Low Bandwidth MSDN

Basically, instead of visiting:

http://msdn.microsoft.com/en-us/library/system.xml.xmlnode.aspx 

you could add "(loband)" to the URL, like:

http://msdn.microsoft.com/en-us/library/system.xml.xmlnode(loband).aspx

Instead of the standard MSDN page:

XmlNode Class (System.Xml) - Windows Internet Explorer

You'd get a nice streamlined version. This is great for not only low-bandwidth situations, but also phones, pdas, screenreaders, etc. More on that in a second.

XmlNode Class (System.Xml) - Windows Internet Explorer (2)

Jon Galloway noticed this last August and even made a nice bookmarklet to make it easier to get into this view. Fast forward until last week when I noticed that this existed. I started digging around, because not only was it cool, but my spider-sense was telling me there was more underneath the story.

I called Kim, the Development Manager for the project and I asked as many leading questions as I could, in order to find out what they were planning to do with this, how it was done, and if there were any hidden features. Sometimes folks kind of give MSDN a hard time for having fat HTML, lots of scripts, etc, and generally being slow. Turns out there's a whole ongoing project to make MSDN way faster and it's already seen some really significant improvements. I've got some internal slides she smuggled my way that I'm going to share with you here, so don't tell. I figure show first, ask question later, right? This is great stuff.

MSDN Performance

They use a number of tests at MSDN to see how fast the site is running, including Gomez and Keynote. Keynote and other tools not only do testing like YSlow and the like, but they do location testing to make sure the site is fast all over the world. That means testing it on a modem in China and DSL in Australia, etc. For example, you'll see Guangzhou, China appear in the slide deck a lot because it happened to be where MSDN loaded the slowest. The roll-up slides (for bosses) show Seattle, Paris and Beijing. In some places there was missing data.

Here's a slide from last Feb before the big performance push started. Notice the page sides is between 200-250k and the response time in China is 10 seconds. Good, I suppose, but not fast.

image

They'd test MSDN on first load, then second (cached) load. They called that PLT1 and PLT2 respectively. The first load of MSDN was like 1.3 megs. Insane. Adobe's site was 800k+, Java's was 800k+, but library sites like Ruby and Eclipses around 200-300k. A meg is not cool. They broke it down by JavaScript, HTML/CSS, Images, etc.

image

Over the next few months, they started moving CSS and scripts to separate DNS for HTTP Pipelining, reduced the number of redirects, were smarter about JS caching, lazy-loaded the Table of Contents. They started caching scripts at CDNs like Akamai and ChinaCache, reduced or removed ViewState.

Then the idea of flipping the whole thing on its ear happened. Rather than removing this and that, why not remove EVERYTHING, and only add back what was needed. Hence, the loband version was created.

Here's some performance tests between the loband MSDN on an unnamed technologies very-fast library site (you'll have to click the image to see the numbers):

image

The loband MSDN site can get sub-second times in the states and very close to one-second times outside the states, including Guangzhou, our previously slowest location.

Early versions of loband were 25k, but some changes brought the average down to just over 15k. Caching changes and other optimizations brought the performance by region down to under 2 seconds basically world-wide.

image

Here's an interesting graph showing the size of JavaScript, HTML and images on MSDN and a bunch of other sites, including http://www.asp.net. In this chart, regular full MSDN in Feb of 2008 is the FAR left bar, and MSDN in July is the second from the left. The loband size is the second from the right.

image

image

You can click "persist low bandwidth view" if you want to make it your default. Also, they are paying close attention to the Feedback forum, so click that if you have more ideas. The next version of the loband site will be coming out in the next month and looks like this (sneak-preview):

XmlNode Class (System.Xml) - Windows Internet Explorer

They've removed the black bars, some markup changes, and the layout stretches horizontally better.

Additional MSDN "Switches"

I figured there can't just be the (loband) "switch" and I mentioned I thought that having to hack the URL was kind of wonky. Turns out that the whole MSDN system isn't a bunch of files on disk, but files in a database with an ASP.NET Virtual Path Provider. Tim Ewald wrote about how they did this WAY back in February of 2005. This was, at the time, kind of a poor-man's ASP.NET Routing:

The normalized path points to a file that does not exist on disk. Rather, the page data is stored in the content cache. The system uses a VirtualPathProvider (VPP) to bridge the gap between the two. In essence, a VPP intercepts all of the ASP.NET plumbing's requests for file streams and gives you a chance to load them from wherever you like. Every ASP.NET app uses a default VPP that simply maps to the file system. An MTPS-based site registers a custom VirtualPathProvider, which sits in front of the default VPP, forming a chain. The custom VPP uses the DocumentInfo and ContentSet objects that the HTTP module's OnPreResolveRequestCache event handler stored in HTTP context to load a topic from the content cache and return it as an .aspx file stream.

All of this is abstracted away, and what I'm calling a "switch" in the URL is what MSDN calls a "device" internally. The URL is just one way to indicate to their routing system that you are a certain device. The other way is via a User-Agent string, as you'd expect.

The content in MSDN is stored as XHTML, but then other controls are injected around it, similar to master pages. The whole page doesn't yet validate. If you think that's important, put it in the comments. If we get hundreds of comments here I'll pass them on to the team as "evidence," heh, heh.

There are in fact many "devices" for various reasons in MSDN. Most are turned on my User-Agent differences or for things like the Printer-Friendly view. However, you can force the device by inserting the device name in to the URL like:

http://msdn.microsoft.com/en-us/library/system.xml.xmlnode(device).aspx

There are also things called iRoots. For example, the word "Library" in the URL above is an iRoot. I could swap in the word "Magazine" and get a site that's skinned for MSDN Magazine.

Here's the devices I've figured out so far:

Low-Bandwidth - (loband)

This is the one we've been talking about. It's a minimal view, focused on one thing, speed.

http://msdn.microsoft.com/en-us/library/system.xml.xmlnode(loband).aspx

PDA - (pda)

The best view for phones or PDAs. Turns off the left side navigation and makes the page 100% width and flexible.

http://msdn.microsoft.com/en-us/library/system.xml.xmlnode(pda).aspx

Robots - (robot)

Optimized for search engines. Lots of meta data, no stylesheets, bare-bones. The Table of Contents is at the bottom of the page.

http://msdn.microsoft.com/en-us/library/system.xml.xmlnode(robot).aspx

Printer-friendly - (printer)

Optimized for printing and includes a call to window.print().

http://msdn.microsoft.com/en-us/library/system.xml.xmlnode(printer).aspx

Now, here's where it gets interesting...

MSDN Inside the (IDE)

When MSDN library content is viewed inside the Visual Studio IDE, a few things are added. First, the ability to Add Content via the MSDN Wiki is promoted to the top, as well as a "send" and "give feedback" feature. This is the view you get when you're inside the "Document Explorer" - the Visual Studio MSDN help browser.

http://msdn.microsoft.com/en-us/library/system.xml.xmlnode(ide).aspx

MSDN for Visual Studio 2010

This is still up in the air, but you can see some ideas with the (dev10ide) switch:

http://msdn.microsoft.com/en-us/library/system.xml.xmlnode(dev10ide).aspx

XmlNode Class (System.Xml) - Windows Internet Explorer (3)

Here's a zoom in to a nice detail. Currently on MSDN online there's a filter dropdown to choose what language you want to see code samples in.

image

This live prototype has the languages for code samples appearing as tabs (as see above) including the option to "View Plain" or "View Colorized." There's also links to Copy to Clipboard or Print just the sample directly.

Future MSDN Plans

From what I hear from Kim, there's plans in process now for the loband site to become the default site this fall. They'll call it something like lobandlight and it'll have some small additions like a search box, selectable codeblocks, but the focus will be on being fast and clean. If you have opinions either way, leave them in the comments here or in the loband forums and they WILL be read by the MSDN team. Also, right now loband only works on the library, so while you can try these "devices" on other parts of MSDN, it's only currently designed to work with the MSDN Library itself. If you feel strongly that other parts of MSDN need loband lovin', let me know here and I'll pass your comments on directly to my boss.

Thoughts?

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Friday, April 17, 2009 11:55:13 PM UTC
I've been using the lowband for quite a while, but I had to write a Greasemonkey script to hide the languages I'm not interested in (otherwise there's often a lot of scrolling)

Do you know if there's any plan to add language filtering to lowband? And hopefully the vs10 version is not going to default always to VB on the visible tab...
Will Dean
Saturday, April 18, 2009 12:01:52 AM UTC
As far as recommendations, there are some client side filter/search things you can do, it takes about 6 lines of jquery so if you get to a page like http://msdn.microsoft.com/en-us/library/system.linq.expressions(loband).aspx and you are looking at the crazy list on the bottom left and are kind of sick of hitting Ctrl+F in your browser all the time, they can have a box to filter that list on the client. Would make it much easier to get to System.Workflow if you just type Workflow in a box and everything else goes away, for example, and once you load jquery once there is no more overhead. I'm always scrolling and Ctrl+F'ing on MSDN.
Jarrett
Saturday, April 18, 2009 1:19:51 AM UTC
Thanks for sharing!

I like the loband version much better. The slow loading of the msdn page is actually the #1 reason why I avoid msdn if possible.

And yes, XHTML validation of the whole msdn page would be a nice addition, too.
Thomas Krause
Saturday, April 18, 2009 2:33:36 AM UTC
Being on low bandwidth, I used to hate having to visit msdn. Thanks. This is some sickeningly fast speed. Would it be possible to incorporate something similar in http://forums.asp.net?
Saturday, April 18, 2009 3:26:32 AM UTC
Can you get them to fix the url's with (what I assume) hashes in them?

http://msdn.com/library/jk2h42jk3(vs23.7).aspx is not the easiest to read.

What's wrong with MSDN.com/library/system.windows.forms.form

Also IMHO, it would be better if the .NET people did what the win32 people do and instead of having multiple versions of the docs and having to compare them manually, they would just call out the differences. The confusion between VS and Framework is also irritating.
Fowl
Saturday, April 18, 2009 3:29:24 AM UTC
Oh yeah and brackets (parenthesis) break the automatic link detection of ~95% of websites, so they should be prepared to take urls that have been truncated to http://msdn.com/library/system from http://msdn.com/library/system(web).aspx
Fowl
Saturday, April 18, 2009 3:47:30 AM UTC
I suggest the MSDN server also be capable of detecting the case of a user coming in from a low bandwidth connection and automatically trigger the low bandwidth/lightweight browsing mode.
Saturday, April 18, 2009 4:00:40 AM UTC
I prefer the "dev10ide" version, which seems to be very speedy with Firefox and looks nice to boot, so I made a greasemonkey script to keep me there - http://userscripts.org/scripts/show/46945
Saturday, April 18, 2009 4:06:05 AM UTC
I wrote a greasemonkey script called 'Loband MSDN Library', which redirects page and translates links automatically:
http://userscripts.org/scripts/show/46944
Saturday, April 18, 2009 4:09:23 AM UTC
lowband++

Sometimes less is more
Jason
Saturday, April 18, 2009 6:17:29 AM UTC
Probably Google is the reference, at least in terms of "cleanness" and SPEED to catch up with: http://developer.android.com/reference/android/net/Proxy.html
Saturday, April 18, 2009 6:56:47 AM UTC
Hey, Scott! Please tell them they must add the language filter to loband view and ability to persist it's state to all views. I'm sure, for 90% of users that's one time choose for their only language.

It's very embarassing - having to select c# everytime when looking at msdn, including IDE view.

p.s: i understand, that's probably undoable, but would love to see c# as default (first in case of 2010 view)
Alexander Gornik
Saturday, April 18, 2009 9:11:19 AM UTC
Scott - is there any way to persist any of the other "devices" - e.g dev10ide - as the default? dev10ide is clean and seems to load faster. And the language tab seems to stick on the last setting - I like that. I've never been able to get my language settings to persist on the "regular" version - I sure get tired of setting that again and again. Is there a language setting the loband version?

MSDN has been getting better over time - probably both due to the work you've outlined in your post and faster browsers. I'm glad to hear about the focus on it at Microsoft and new, faster versions being engineered.

jlo
Saturday, April 18, 2009 11:16:11 AM UTC
Cool Feature. Thanks for the post.
Saturday, April 18, 2009 1:01:41 PM UTC
What they really should do is a silverlight version :)
The treeview on msdn always bugged me.. i hate scrolling around in it and i wish it'd autohide/appear like it does in dexplore (in vs)
another thing i totaly miss at the msdn site is the index feature also available in dexplore :/
One thing i do miss in dexplore though, is the community features (i usually go for the offline version of the docs for speed)

A silverlight client for msdn could bring the best of both worlds, localstore for caching and connectedness for the community stuff :)
this is something anyone could build if there was an xml version of msdn with nothing but the data.. (if such a version exsist pleeeease publish/point me to the api)
Saturday, April 18, 2009 1:15:12 PM UTC
@myself

hey there apparently IS an api for msdn (and technet)
check this out:
http://www.pluralsight.com/community/blogs/craig/archive/2006/06/12/27273.aspx
and this
http://services.msdn.microsoft.com/ContentServices/ContentService.asmx (includes the wsdl)
Saturday, April 18, 2009 1:46:07 PM UTC
Personally, I prefer the normal view for bouncing around and the (printer) view for readability and printing.

The FlashGet* add-in crashes IE7 on my WinXP Pro SP3 PC as soon as I click
the "Switch on low bandwitch view". jccatch.dll and IE7 are only semi-compatible AFAIK.

Regards,
Gerry (Lowry)

* http://www.flashget.com/index_en.htm
Saturday, April 18, 2009 2:18:42 PM UTC
aaw the service doesnt seem to have a cross domain policy :( so silverlight use doesnt seem possible right now.. heading over to the forums to ask around
Saturday, April 18, 2009 2:58:33 PM UTC
Scott, thanks for highlighting these features. I am stoked to hear that MSDN striving to reach a broader audience of device-types. If they do it well, that'll mean increased searchability by the predominant search engine(s).

Myself, I haven't actively searched MSDN because I felt it was way too heavy with their treeview, etc. The presentation was not easy to look at. I appreciated the new view in loband.

Great job to the MSDN team for getting their heads in the game!
Saturday, April 18, 2009 3:28:59 PM UTC
Hold on a sec...

Robots - (robot)

Optimized for search engines. Lots of meta data, no stylesheets, bare-bones. The Table of Contents is at the bottom of the page.


AFAIK, serving a "special" page to search engines -- i.e., a different one than would normally be served to a human user -- is expressly discouraged by every major search engine I can think of.

How is MS getting away with that?
Saturday, April 18, 2009 4:51:27 PM UTC
love this! - recently MSDN, and other sites were really becoming a drag to use. I think i will be setting this a default on Monday when i get back to work!
Adrian
Saturday, April 18, 2009 5:31:54 PM UTC
Awesome! Loband vastly improves the msdn experience. I can get the information I need much, much faster. Tell them to keep up the good work!
Saturday, April 18, 2009 8:16:49 PM UTC
The lowband version is rocking fast!!!
In Romania (Central Europe) I get 700ms..1100ms which is very very good compared to the 1400..2000ms (the full version)
Saturday, April 18, 2009 8:32:55 PM UTC
Love the low bandwidth, can't wait until it's the default.
Matt
Sunday, April 19, 2009 12:25:04 AM UTC
I love MSDN loband! And that they're finally going to use a monospace font for code (in dev10ide, at least).
Joe Chung
Sunday, April 19, 2009 4:23:27 AM UTC
Loband version is great idea. It works way faster than default version in Thailand. It shall help us a lot to find out references and solve problem faster.
Suwitcha Chandhorn
Sunday, April 19, 2009 11:31:13 AM UTC
The loband version seems much more usable on firefox than the standard version is - great stuff.
Sunday, April 19, 2009 4:10:28 PM UTC
I have no need for document explorer, at all. Never used it since I started using VS in 2005. Then again, I'm _never_ offline, so the website always works.

Also, a designer should have a look at some of the details. This is really nitty gritty, but the little icons etc have _never_ lined out right on MSDN. Look at the little lock icon on http://msdn.microsoft.com/en-us/library/system.xml.xmlnode(dev10ide).aspx or the collapse icon on http://msdn.microsoft.com/en-us/library/system.xml.xmlnode(ide).aspx It's minor, but I always wondered how something like that could not be noticed for 4 years (at least), as a webdesigner working on a page, I would immediately go and change the inline img tag for a background-image css rule with some padding...
Mike
Monday, April 20, 2009 4:43:26 PM UTC
Does somebody else host http://blogs.msdn.com ? I always suspected that someone else must host it because the availability is pretty awful while the normal msdn site seems fine. I've thought, - What a terrible showcase for MS technology. "We're unable to service your request at this time" - Ugh. Can't tell you the times I've seen that message.
Dave T
Monday, April 20, 2009 5:34:08 PM UTC
This looks absolutely awesome! I hope they find a way to implement some performance changes for blogs.msdn.com as well because that site is always *dog slow*. It's like its under a constant DDOS attack even when no one is really using the site. Just try visiting any blog hosted there like Raymond Chen's or whatever during various times of the day...terrible.
Terry
Monday, April 20, 2009 7:35:16 PM UTC
I love the view, and will use it exclusively when reading online. However, using IE "Send to OneNote", it does not render in OneNote well at all. I prefer the "pda" view for rendering to OneNote. Any chance of getting the usability of "loband" with the OneNote rendering of "pda"?
Nick
Tuesday, April 21, 2009 4:51:48 AM UTC
The lobandlight version is a great idea, and i look forward to the new styling (as the current loband styling is a bit ugly).

What i would hope for is a way to persist your preferred language(s), or in the very least being able to select it with one click and not having to uncheck several checkboxes. I can't think of a time when i have needed to view the same example in more than one language.
Xian
Tuesday, April 21, 2009 6:02:39 AM UTC
What about offline reading? I would like to be able to create a pdf of a WHOLE section like say WCF at:
http://msdn.microsoft.com/en-us/library/ms735119.aspx.

For example, be able to rightclick on the "Windows Communication Foundation" node and create a single pdf of all the pages between the "Windows Communication Foundation" node and the "Windows CardSpace" node so I can read it top to bottom. This experience for me is better than bouncing between the treeview to expand nodes and reading in the right pane. This does not work in many eReaders.

Abdu
Tuesday, April 21, 2009 5:36:29 PM UTC
Searching it is still a pain. For a lot of topics, when I google search I end up in either the Japanese or .NET 1.1 version of the documentation. Is this a known issue and one of the "benefits" of using Live Search, or something that no one else has noticed?
Tuesday, April 21, 2009 9:31:06 PM UTC
There are also other "devices" to specify the Visual Studio / .NET Framework version:
(VS.71) = Microsoft Visual Studio 2003/.NET Framework 1.1
(VS.80) = Microsoft Visual Studio 2005/.NET Framework 2.0
(VS.85) = .NET Framework 3.0
(VS.90) = Microsoft Visual Studio 2008/.NET Framework 3.5

You can combine some devices with commas, for example (VS.80,loband) for the low-bandwidth version of the VS2005/2.0 documentation.
Wednesday, April 22, 2009 2:29:13 AM UTC
Abdu,
You can do the packaging through PackageThis at http://packagethis.codeplex.com/

Package This is a GUI tool written in C# for creating help files (.chm and .hxs) from the content obtained from the Library via the MSDN Content Service. You select the content you want from the table of contents, build a help file, and use the content offline. You are making personalized ebooks of MSDN or TechNet content. Both help file formats also give full text search and keyword search.
The code illustrates how to use the MSDN Content Service to retrieve documentation from MSDN or TechNet. It also shows how to build .hxs files and .chm files programmatically.

Saturday, April 25, 2009 4:21:19 PM UTC
Nice that you tweeked.

Got one thing to say. All the programming codes are displaying in "Courier" font, instead of "Courier New" font. Thats an annoying font. "Courier New" is more pleasing to read. The other font is really annoying (atleat for me) to keep on reading.

I wonder how come the "courier new" font is changed that "courier" font. Is that another "hidden (annoying) feature"? or else is there any tag there to read the programming codes in more pleasing way.

Thanks.
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.