Hi everyone! I’m an engineer on the Google+ infrastructure team. When +Joseph Smarr
made an appearance on Ask Me Anything back in July (http://goo.gl/GbdYv
), many of you wanted to hear more about Google+'s technology stack. A few of us engineers decided to write a few posts about this topic and share them with you.
This first one has to do with something we take very seriously on the Google+ team: page render speed. We care a lot about performance at Google, and below you'll find 5 techniques we use to speed things up.1. We <3 Closure
This framework is also the basis for our support for making client side navigates work in Google+ work without reloading the page.3. Navigating between pages, without refreshing the page
The anchor tags on the page always point to the canonical version of the URL (i.e. if you used HTML5 history for the URL), so you can easily copy/share links from the page.4. Flushing chunks (of HTML)
We also flush HTML chunks to the client to make the page become visible as soon as the data comes back, without waiting for the whole page to load.
We do this by
- Kicking off all data fetches asynchronously at the start of the request
- Only blocking on the data when we need to render that part of the page
On a side note, you may have noticed that we load our CSS via a XHR instead of a style tag - that is not for optimization reasons, that’s because we hit Internet Explorer’s max CSS selector limit per stylesheet!Final Comments
This is just a small glimpse of how stuff works under the covers for Google+ and we hope to write more posts like this in the future. Leave your ideas for us in the comments!