Pragmatic Performance with Third-Party JavaScript

Slide 1

Slide 1 text

Pragmatic Performance with 3rd Party JavaScript

Slide 2

Slide 2 text

Ben Ward http://benward.me

Slide 3

Slide 3 text

Ben Ward @benward

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Slide 6

Slide 6 text

“3rd Party Javascript?!”, you exclaim.

Slide 7

Slide 7 text

SlowBlockingBandwidthEatingRequestIncreasing…

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Back right up. Why do these even exist?

Slide 10

Slide 10 text

Back right up. How do they work?

Slide 11

Slide 11 text

Widgets are products.

Slide 12

Slide 12 text

Widgets are products for publishers.

Slide 13

Slide 13 text

Widgets are products for developers.

Slide 14

Slide 14 text

Widgets are products for people.

Slide 15

Slide 15 text

Four stakeholders, delicately balanced.

Slide 16

Slide 16 text

Provide features for mutual benefit.

Slide 17

Slide 17 text

Share more of your links. Share more links.

Slide 18

Slide 18 text

Easily quote Tweets. High quality Tweets.

Slide 19

Slide 19 text

We take responsibility for technical costs.

Slide 20

Slide 20 text

All stakeholders benefit from page performance.

Slide 21

Slide 21 text

What’s in a page?

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

The article itself.

Slide 25

Slide 25 text

Publisher’s assets; images, scripts, analytics.

Slide 26

Slide 26 text

Advertising. Publisher’s gotta eat.

Slide 27

Slide 27 text

Other third parties sharing the page.

Slide 28

Slide 28 text

Twitter for Websites; a suite of features.

Slide 29

Slide 29 text

Tweet, follow, #hashtag and @mention buttons.

Slide 30

Slide 30 text

Embeddable Tweets.

Slide 31

Slide 31 text

Programmable JavaScript Events and Web Intents.

Slide 32

Slide 32 text

Easy, as in fast to integrate.

Slide 33

Slide 33 text

Fast, as in performant in the page.

Slide 34

Slide 34 text

Performant, as in responsive to the environment.

Slide 35

Slide 35 text

Responsive, as in embracing of the web.

Slide 36

Slide 36 text

What expenses? Loading, rendering, bandwidth.

Slide 37

Slide 37 text

DNS Look-up. HTTP(S) Request. Download. Parse/Execute. Render.

Slide 38

Slide 38 text

DNS look-ups are a tax on every domain you use.

Slide 39

Slide 39 text

Most of these visitors are not your users.

Slide 40

Slide 40 text

Minimise unique domains, and use prefetching.

Slide 41

Slide 41 text

Slide 42

Slide 42 text

HTTP Requests also add up.

Slide 43

Slide 43 text

Need fast responses, use a worldwide CDN.

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

6 simultaneous requests to the same domain.

Slide 46

Slide 46 text

Only 2 in the old browsers.

Slide 47

Slide 47 text

platform.twitter.com/ platform1.twitter.com/ platform2.twitter.com/ platform3.twitter.com/…? platform∞.twitter.com/…?

Slide 48

Slide 48 text

Ugh, more DNS requests.

Slide 49

Slide 49 text

Even slower 3-step handshake over SSL.

Slide 50

Slide 50 text

Users lack upload bandwidth. Requests go up.

Slide 51

Slide 51 text

Make fewer requests.

Slide 52

Slide 52 text

Bundle JavaScript, styles, HTML.

Slide 53

Slide 53 text

Twitter Tweet Button /* minified stylesheet */ Tweet // minified JavaScript

Slide 54

Slide 54 text

Use CSS3, and data: URI images.

Slide 55

Slide 55 text

.btn { border-radius: 6px; background: linear-gradient(top, white, #DEDEDE); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } .btn:hover, .btn:focus { box-shadow: inset 0 0 10px #000000; }

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAoCAYAAABq13MpAAAGcklE[…]

Slide 58

Slide 58 text

1 HTTP request. Tweet

Slide 59

Slide 59 text

Download smaller responses.

Slide 60

Slide 60 text

Minify JavaScript with uglify-js or Closure.

Slide 61

Slide 61 text

85KB 45KB uglify

Slide 62

Slide 62 text

Gzip all the things.

Slide 63

Slide 63 text

85KB 20KB gzip

Slide 64

Slide 64 text

85KB 20KB uglify gzip 14KB

Slide 65

Slide 65 text

JS Frameworks are bigger than our product.

Slide 66

Slide 66 text

But consider your goals, audience, and capability.

Slide 67

Slide 67 text

Write tiny modules for LoadRunner & LoadBuilder

Slide 68

Slide 68 text

Carefully organise bundles for lazy loading.

Slide 69

Slide 69 text

We lazy load XDomain, JSON2, some rendering.

Slide 70

Slide 70 text

Tailor build files to known environments

Slide 71

Slide 71 text

We’re in 28 languages. Separate builds save 6KB.

Slide 72

Slide 72 text

Loading from JS, so you have the information.

Slide 73

Slide 73 text

Retina displays, data/png support, small screens…

Slide 74

Slide 74 text

Download nothing at all.

Slide 75

Slide 75 text

Render on the client to share cached templates.

Slide 76

Slide 76 text

Cache aggressively, download once for all time.

Slide 77

Slide 77 text

Hash filenames for and dependencies.

Slide 78

Slide 78 text

Avoid ?query=params, use #fragment=params.

Slide 79

Slide 79 text

Blocking, and other ways to break the web.

Slide 80

Slide 80 text

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

A script source times out, the page is left waiting.

Slide 83

Slide 83 text

It could happen to any of us.

Slide 84

Slide 84 text

Wherever possible, use non-blocking script code.

Slide 85

Slide 85 text

Slide 86

Slide 86 text

!function (doc, script, id) { var js, first = doc.getElementsByTagName(script)[0]; if (!doc.getElementById(id)) { js = doc.createElement(script); js.id = id; js.src = "//platform.twitter.com/widgets.js"; first.parentNode.insertBefore(js, first); } }(document,"script","twitter-wjs");

Slide 87

Slide 87 text

Doesn’t block and avoids duplicate downloads.

Slide 88

Slide 88 text

We use this almost everywhere.

Slide 89

Slide 89 text

Use script.js, lab.js, or loadrunner on your sites.

Slide 90

Slide 90 text

The fastest JavaScript is no JavaScript.

Slide 91

Slide 91 text

Embed codes are links to supported endpoints.

Slide 92

Slide 92 text

We call them Web Intents. (Which is unfortunate.)

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

Follow Ben Ward

Slide 95

Slide 95 text

They accept the same parameters as the widgets.

Slide 96

Slide 96 text

They’re there if something bad happens.

Slide 97

Slide 97 text

They’re there if you don’t want our script at all.

Slide 98

Slide 98 text

All major Twitter actions represented by .

Slide 99

Slide 99 text

Progressive enhancement at the product core.

Slide 100

Slide 100 text

The entire product is an enhancement.

Slide 101

Slide 101 text

We build for the web.

Slide 102

Slide 102 text

Thank you.

Slide 103

Slide 103 text

Photo credits: http://flic.kr/y/nLCZEt

Slide 104

Slide 104 text

Questions. Also, answers.