Presentation for Twitter at Open Web Camp 2012, in San Jose, CA. Covers a chunk of what we've learned over the years in building JavaScript for off-network usage, with aggressive performance optimisations.
Pragmatic Performance with 3rd Party JavaScript
View Slide
Ben Ward http://benward.me
Ben Ward @benward
Tweet
“3rd Party Javascript?!”, you exclaim.
SlowBlockingBandwidthEatingRequestIncreasing…
Back right up. Why do these even exist?
Back right up. How do they work?
Widgets are products.
Widgets are products for publishers.
Widgets are products for developers.
Widgets are products for people.
Four stakeholders, delicately balanced.
Provide features for mutual benefit.
Share more of your links. Share more links.
Easily quote Tweets. High quality Tweets.
We take responsibility for technical costs.
All stakeholders benefit from page performance.
What’s in a page?
The article itself.
Publisher’s assets; images, scripts, analytics.
Advertising. Publisher’s gotta eat.
Other third parties sharing the page.
Twitter for Websites; a suite of features.
Tweet, follow, #hashtag and @mention buttons.
Embeddable Tweets.
Programmable JavaScript Events and Web Intents.
Easy, as in fast to integrate.
Fast, as in performant in the page.
Performant, as in responsive to the environment.
Responsive, as in embracing of the web.
What expenses? Loading, rendering, bandwidth.
DNS Look-up.HTTP(S) Request.Download.Parse/Execute.Render.
DNS look-ups are a tax on every domain you use.
Most of these visitors are not your users.
Minimise unique domains, and use prefetching.
HTTP Requests also add up.
Need fast responses, use a worldwide CDN.
6 simultaneous requests to the same domain.
Only 2 in the old browsers.
platform.twitter.com/platform1.twitter.com/platform2.twitter.com/platform3.twitter.com/…?platform∞.twitter.com/…?
Ugh, more DNS requests.
Even slower 3-step handshake over SSL.
Users lack upload bandwidth. Requests go up.
Make fewer requests.
Bundle JavaScript, styles, HTML.
Twitter Tweet Button/* minified stylesheet */Tweet<br/>// minified JavaScript<br/>
Use CSS3, and data: URI images.
.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;}
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAoCAYAAABq13MpAAAGcklE[…]
1 HTTP request.Tweet
Download smaller responses.
Minify JavaScript with uglify-js or Closure.
85KB 45KBuglify
Gzip all the things.
85KB 20KBgzip
85KB 20KBuglify gzip 14KB
JS Frameworks are bigger than our product.
But consider your goals, audience, and capability.
Write tiny modules for LoadRunner & LoadBuilder
Carefully organise bundles for lazy loading.
We lazy load XDomain, JSON2, some rendering.
Tailor build files to known environments
We’re in 28 languages. Separate builds save 6KB.
Loading from JS, so you have the information.
Retina displays, data/png support, small screens…
Download nothing at all.
Render on the client to share cached templates.
Cache aggressively, download once for all time.
Hash filenames for and dependencies.
Avoid ?query=params, use #fragment=params.
Blocking, and other ways to break the web.
A script source times out, the page is left waiting.
It could happen to any of us.
Wherever possible, use non-blocking script code.
!function (doc, script, id) {<br/>var js,<br/>first = doc.getElementsByTagName(script)[0];<br/>if (!doc.getElementById(id)) {<br/>js = doc.createElement(script);<br/>js.id = id;<br/>js.src = "//platform.twitter.com/widgets.js";<br/>first.parentNode.insertBefore(js, first);<br/>}<br/>}(document,"script","twitter-wjs");
Doesn’t block and avoids duplicate downloads.
We use this almost everywhere.
Use script.js, lab.js, or loadrunner on your sites.
The fastest JavaScript is no JavaScript.
Embed codes are links to supported endpoints.
We call them Web Intents. (Which is unfortunate.)
Follow Ben Ward
They accept the same parameters as the widgets.
They’re there if something bad happens.
They’re there if you don’t want our script at all.
All major Twitter actions represented by .
Progressive enhancement at the product core.
The entire product is an enhancement.
We build for the web.
Thank you.
Photo credits: http://flic.kr/y/nLCZEt
Questions. Also, answers.
benward
ojun9
antyadev
ivargrimstad
yonetty
takefumiyoshii
techouse
miyuki2203
mugi_uno
texmeijin
skanehira
niftycorp
masatoshiitoh
chrisshort
colly
csswizardry
bkeepers
pedronauck
brad_frost
sstephenson
jlugia
myddelton
jennybc
chrislema
lara