Profile

Cover photo
Nick Pyett
29 followers|1,510 views
AboutPostsPhotosVideos

Stream

Nick Pyett

Shared publicly  - 
 
I don't use Google+ much because my timeline is filled with the same people all the time - gets pretty boring.
1
Add a comment...

Nick Pyett

Shared publicly  - 
 
Mark Knichel originally shared:
 
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

We like Closure. A lot. We use the Closure library, templates, and compiler to render every element on every page in Google+ -- including the JavaScript that powers these pages. But what really helps us go fast is the following:

- Closure templates can be used in both Java and JavaScript to render pages server-side and in the browser. This way, content always appears right away, and we can load JavaScript in the background ("decorating" the page, and hooking up event listeners to elements along the way)

- Closure lets us write JavaScript while still utilizing strict type and error checking, dead code elimination, cross module motion, and many other optimizations

(Visit http://code.google.com/closure/ for more information on Closure)

2. The right JavaScript, at the right time

To help manage the Javascript that powers Google+, we split our code into modules that can be loaded asynchronously from each other. You will only download the minimum amount of Javascript necessary. This is powered by 2 concepts:

- The client contains code to map the history token (the text in the URL that represents what page you are currently on) to the correct Javascript module.

- If the Javascript isn’t loaded yet, any action in the page will block until the necessary Javascript is loaded.

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

Once the Javascript is loaded, we render all content without going back to the server since it will be much faster. We install a global event listener that listens for clicks on anchor tags. If possible, we convert that click to an in page navigate. However, if we can’t client side render the page, or if you use a middle-click or control-click on the link, we let the browser open the link as normal.

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

This system also allows us to start loading the CSS, Javascript, images, and other resources as early as possible, making the site faster and feel more responsive.

5. iFrame is our friend

To load our Javascript in parallel and avoid browser blocking behavior (http://goo.gl/lzGq8), we load our Javascript in an iframe at the top of the body tag. Loading it in an iframe adds some complexity to our code (nicely handled through Closure), but the speed boost is worth it.

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!
1
Add a comment...

Nick Pyett

Shared publicly  - 
1
Jon Scott's profile photo
 
Yeah it's an awesome view, if it was that fast it'd be hypnotic for the guys up there.
Add a comment...

Nick Pyett

Shared publicly  - 
 
Check out the class names in the Google+ source... Flipping mental!
1
Andrew Disley's profile photoNick Pyett's profile photomarvin speakman's profile photo
5 comments
 
I’ve wanted a CI in the cloud for front-end assets for a while, so this could certainly be something to play with.
Add a comment...

Nick Pyett

Shared publicly  - 
 
Dear Google,

Please allow me to view my stream by circles on the Google+ Android app.

Thanks,

A Googler
1
Add a comment...
In his circles
40 people
Have him in circles
29 people
John Roberts's profile photo
Hayden Evans's profile photo
Simon Owen's profile photo
Richard Whitehouse's profile photo
marvin speakman's profile photo
Nick Fearnley's profile photo
David Bentley's profile photo
Paul Gooder's profile photo

Nick Pyett

Shared publicly  - 
 
Disable JavaScript, reload Google+, inspect body element, remove "visibility:hidden".

Complete mess.
1
Add a comment...

Nick Pyett

Shared publicly  - 
 
Help the po-lice! Help, help, help the po-lice!
1
Add a comment...

Nick Pyett

Shared publicly  - 
 
Check you out you roving reporter! Hope you're alright mate, seems a bit hairy out there.
1
Paul Gooder's profile photoNick Pyett's profile photo
3 comments
 
Wasn't that you on BBC Radio Manchester?
Add a comment...

Nick Pyett

Shared publicly  - 
 
+Jon Scott Welcome to the future!
1
Jon Scott's profile photo
 
An uncertain future.
Add a comment...

Nick Pyett

Shared publicly  - 
 
Hello, world!
1
Add a comment...
People
In his circles
40 people
Have him in circles
29 people
John Roberts's profile photo
Hayden Evans's profile photo
Simon Owen's profile photo
Richard Whitehouse's profile photo
marvin speakman's profile photo
Nick Fearnley's profile photo
David Bentley's profile photo
Paul Gooder's profile photo
Basic Information
Gender
Male
Story
Tagline
Mr. Mojo rising!
Introduction
Web dev starting-up in London who excels at cheesy grins
Links
Other profiles