Making the Google Chrome Speed Tests

via youtube.com

More work for Google Chrome from the gang at BBH New York and 1st Avenue Machine.

Full copy and paste below if you really wanna nerd out.

(It’s worth it)

These speed tests were filmed at actual web page rendering times. If you’re interested in the technical details, read on. Equipment used:

– Computer: MacBook Pro laptop with Windows installed
– 15Mbps Internet connection.
– Camera: Phantom v640 High Speed Camera at 1920 x 1080, films up to 2700 fps
– Monitor: 24″ Asus: We had to replace the standard fluorescent backlight with very large tungsten fixtures to funnel in more light to capture the screen. In addition, we flipped the monitor 180 degrees to eliminate a shadow from the driver board and set the system preferences on the computer to rotate 180 degrees. No special software was used in this process.

“Why does allrecipes.com in the potato gun sequence appear at once, and not the text first and images second? And why does it appear to render from bottom of the screen to the top?”

Chrome sends the rendered page to the video card buffer all at once, which is why allrecipes.com appears at once, and not with the text first and images second. Chrome actually paints the page from top to bottom, but to eliminate a shadow from the driver board, we had to flip the monitor upside down and set the system preferences in Windows to rotate everything 180 degrees, resulting in the page appearing to render from bottom to top.

“Why does the top one third of the page appear first on the weather.com page load?”

Sometimes only half the buffer gets filled before the video card sends its buffer over to the LCD panel. This is because Chrome on Windows uses GDI to draw, which does not do v-sync.

“The screen wipes are so smooth – how was that achieved?”

The screen wipes up in a gradated wipe because LCD pixels take around 10ms to flip and gradually change color.

And here’s the final film.

via youtube.com

Author: kinsella

Strange Projects at Google

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s