Why do Facebook, Twitter and GMail render all their data to the browser as JSON as opposed to HTML?

There are several reasons for their design that are commonly applied:

1. As the previous answers mentioned, caching can be utilized in the browser and JSON payload is lighter
2. They are providing a clean separation between the service, the UI logic and data following the MVC pattern
   • JSON as a Model
   • JavaScript UI Widget as View that renders the data
   • Service layer as the Controller that provides the business logic/service that feeds into the UI Layer

3. API driven architecture and separation mentioned in point #2 above allow the company to provide multiple channels delivery without too much rework. Consider if we want to build Twitter App for Android:

   • JSON as Model stays the same, nothing needs to be rework here as the data is the same
   • We now will change the View from HTML to Android Native UI, in this case we will need to code the UI layer code
   • Service Layer as Controller remains the same and we dont' have to do anything here

   As you can see, this model provides a way for Google/Twitter to deliver into multi-channels without having to rewrite their logic. The same applies to Mobile WebView vs. normal Desktop WebView. All we need to change is the UI Layer and not the Data or Controller layer.

This is why they are taking time to think about the design and architecture it as such. A tight coupling between the data and presentation would require them to rework a lot of code in order to be delivered in multiple channels. It's not about JSON vs. HTML or just the web but more of an architecture decision that would allow them to deliver their content to multi-channels (iOS, Android, third party App, Mobile WebView, Desktop View, Desktop App, etc). What you see in their HTML source is the manifestation of their strategy in WebView channel.

This technique allows the browser to cache the HTML(and static javascripts) and only fetch a json string. It is quite fast indeed and bandwith friendly.

No it wouldn't be faster. JSON is a lot easier to generate on the server side than HTML. As far as I know Twitter also uses Mustache for rendering these data on the client.

So you just serve the static templates (if cached properly they only need to be loaded once) and your JSON data and then let the client do all the rendering work. One advantage is, that the client can pick what and how they want to render the data and another that it takes all the heavy HTML generation overhead from the servers.