Tweet
Tweet

Slide 1

Slide 1 text

Time To First Tweet @danwrong @sayrer Wednesday, June 27, 12

Slide 2

Slide 2 text

We work at Wednesday, June 27, 12

Slide 3

Slide 3 text

We’ve been rebuilding .com’s front end Wednesday, June 27, 12

Slide 4

Slide 4 text

http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html Wednesday, June 27, 12

Slide 5

Slide 5 text

Performance is highly contextual Wednesday, June 27, 12

Slide 6

Slide 6 text

We care about “Time To First Tweet” Wednesday, June 27, 12

Slide 7

Slide 7 text

Time To First Tweet From navigation to the user seeing the timeline Wednesday, June 27, 12

Slide 8

Slide 8 text

We measure this with the Navigation Timing API Wednesday, June 27, 12

Slide 9

Slide 9 text

Navigation Timing API • Supported in: IE 9, Firefox 7 and Chrome • Represents a vast majority of twitter.com users • We capture data from a small % of users Wednesday, June 27, 12

Slide 10

Slide 10 text

•Connect: navigation to connection open •Process: connection open to first byte •Response: first byte to last byte of response •Render: last byte until tweet shown* * Measured with a JS timestamp embedded in timeline Wednesday, June 27, 12

Slide 11

Slide 11 text

Improving the Time To First Tweet Wednesday, June 27, 12

Slide 12

Slide 12 text

Logged Out Pages Wednesday, June 27, 12

Slide 13

Slide 13 text

Loading JavaScript... Wednesday, June 27, 12

Slide 14

Slide 14 text

Profile Page, Median, San Francisco Connect Process Response Render Wednesday, June 27, 12

Slide 15

Slide 15 text

San Francisco Brazil Profile Page, 95th Percentile Connect Process Response Render Wednesday, June 27, 12

Slide 16

Slide 16 text

Home Timeline Wednesday, June 27, 12

Slide 17

Slide 17 text

Home Timeline Hydrated Wednesday, June 27, 12

Slide 18

Slide 18 text

Problem Wednesday, June 27, 12

Slide 19

Slide 19 text

Suboptimal Page Flow 2? 1 3 Wednesday, June 27, 12

Slide 20

Slide 20 text

Templating on the client Hogan.js Mustache.js Pre-compiled Wednesday, June 27, 12

Slide 21

Slide 21 text

Templating on the server Eckersley Mustache.rb Mustache.java Wednesday, June 27, 12

Slide 22

Slide 22 text

Eckersley? C/C++ with Ruby bindings. Wednesday, June 27, 12

Slide 23

Slide 23 text

Template-compatible Evolution Client: Hogan.js Server: Rails Server: JVM Wednesday, June 27, 12

Slide 24

Slide 24 text

Initial HTML Deferred Loading of JS Wednesday, June 27, 12

Slide 25

Slide 25 text

Migrating Away From Hashbang Discover Permalink Events Wednesday, June 27, 12

Slide 26

Slide 26 text

Making JavaScript work for us Wednesday, June 27, 12

Slide 27

Slide 27 text

Loading JavaScript • We moved to modules (CommonJS via AMD) • Decouples loading from evaluation • Build tool spiders dependencies and make bundles • Now we can play with the loading without changing the code • Lazy loading, Parallel loading, different bundles Wednesday, June 27, 12

Slide 28

Slide 28 text

Layering On pushState support • We want fast in-app navigation • Avoid full page refreshes for newer browsers • Ability to keep assets/former pages in memory • Keep simple index-ability, browser compat etc • We can have the best of both worlds Wednesday, June 27, 12

Slide 29

Slide 29 text

In the browser.... On click, if history API supported then intercept link and request the link’s URL via XHR Wednesday, June 27, 12

Slide 30

Slide 30 text

On the server... If request comes via XHR send just the partial update, otherwise send the entire HTML page Wednesday, June 27, 12

Slide 31

Slide 31 text

So...did it work? Wednesday, June 27, 12

Slide 32

Slide 32 text

Chrome, San Francisco Before After Wednesday, June 27, 12

Slide 33

Slide 33 text

Chrome, San Francisco Before After Wednesday, June 27, 12

Slide 34

Slide 34 text

IE 8, San Francisco Before After Wednesday, June 27, 12

Slide 35

Slide 35 text

Cut the 95th percentile in SF by 75% Wednesday, June 27, 12

Slide 36

Slide 36 text

Before After Connect Process Response Render Profile Page, 95th Percentile, San Francisco Wednesday, June 27, 12

Slide 37

Slide 37 text

Before After Connect Process Response Render Profile Page, 95th Percentile, Brazil Wednesday, June 27, 12

Slide 38

Slide 38 text

What’s next? • We aren’t done yet • Replace Rails with an async, JVM-based server • Concurrent data fetches • Chunked body encoding, streamed responses Wednesday, June 27, 12

Slide 39

Slide 39 text

Questions? twitter.com/jobs @danwrong @sayrer Wednesday, June 27, 12