WebPagetest Basic Results Filmstrip Test History Filmstrip Comparison Filmstrip Labels Video Comparison Dynatrace Result tcpdump WebPagetest Presentations Google Booth Presentations

Sergey Chernyshev (truTV)

http://ajax.dynatrace.com/ajax/en/

Most useful for profiling JavaScript applications.

The goal is only to only include an upper and lower bound. Don't give a single value.

The goal is to be calibrated estimators (i.e., correct 90% of the time).

Want to play a game where for each correct answer

If set too wide there's a spinner game that needs to be played.

Put off giving a single number until as late as possible

• Look at cache miss rates for a CDN.
• What is packet drop for a large file.

What is the chance of k success in n success/fail trials where the chance of success for each trial is p?

Look at the consideration associated with games.

Need to provide weighting for the particular nodes.

This is a basic binary tree.

If we're evenly matched and interrupted in the middle of a match where one is ahead to

Pascals triagle: binomial coefficients: select elements in a set by position.

When on the binomial distribution at 90% confidence for the number of heads and tails I should get when flippign a fair quarter.

10,50%,2

http://www.cyclismo.org/tutorial/R/probability.html#binomial

dbinom(x, size, prob, log = FALSE) pbinom(q, size, prob, lower.tail = TRUE, log.p = FALSE) qbinom(p, size, prob, lower.tail = TRUE, log.p = FALSE) rbinom(n, size, prob)

The process one goes through is to calculate the probability.

The smaller the p-value the greater the chance that the null hypothesis isn't correct.

• Set an expected distribution based on a sample

Analytical models are approximations are used since simulation was expensive.

http://escholarship.org/uc/item/6hb3k0nz

Based on the examples noted.

rbinom(22,10,0.9) [1] 10 10 10 9 9 9 9 7 8 8 10 9 10 9 8 8 9 8 9 9 9 10

replicate(100,mean(rbinom(22,10,0.9)))

This should use a histogram:

qplot(replicate(100,mean(rbinom(22,10,0.9))))

Stats with Cats…

• Binomial:
• Exponential: number
• Gamma: site latency

Find the mean and standard deviation of the normal distribution in our own head.

Find the percentage of space covered up to a standard deviation.

Perform some base anaysis to indicate what the curve actually looks like.

Game: maximize benefits are different than being correct (will all the money in a particular hand).

Install Sage.

http://www.sagemath.org/

• Create the normal distribution

Solve it with the derivative at 0, for x with a normal distribution .

Still need to have the fundemental elements of math but don't worry about the rest. The value function associated with the probability for a 90% confidence estimate for (an an example) the number of cards in a deck.

http://srmo.sagepub.com/view/the-sage-encyclopedia-of-social-science-research-methods/n637.xml

• How to Measure Anything
• The Cartoon Guide to Statistics
• Introductory Statistics with R
• Bayesian Data Analysis

Use Charles to throttle…

This is just the recommendations set from Q2 2011.

• 12:00 t-shirt at 12:00 (1:00) @ O'Reilly booth
• 6:00 Exhibit hall
• 7:00 Dyn reception - pool
• Velocity Passport

WebOps - term is two years old.

Hiring is more of a craftsmanship option rather than "expert" status. For most of the actual work that is completed it's based on the actual requirements for a job rather than an abstract expectation

• Educate yourself
• Discipline
• Learn and Share with Peers
• Patience

• DevOps is incomplete and requires

How does one acquire the skills or have the time to address all of the requirements unless tooling is available.

What is required to ensure operational software based on the environment?

Can't determine degredation in the browser given the DOM: web developers may not even use the tools for inspection into the running state focusing on layout and IO.

Example: web developers will pick the approach where the trivial information about the performance (e.g., forEach, for, for in) without looking at the actual performance. Results from benchmarks for engine performance then driving the selection of programming techniques.

Causes:

• JS Engine developers need to optimize the engines against some metric.
• Web developers need to add in performance early or no time to add later.

Benchmarks don't reflect how programs actually work. There are patterns to how to write JavaScript well.

Challenge to Chrome to look at how JSLint was running in practice.

Time series charts of shallow data.

• Starry Night
• Moby Dick

20ms buckets breakdown from average data.

Product demo (Mobile Device Perspective) for testing native Android and iOS test. Includes scripting interface, test construction, and monitoring.

Uses a built-in JavaScript engine.

API looks very minimal:

• Tap
• Swipe
• ClickKey
• StartTimer
• EndTimer

Timers just work like the event-based timers on page loads.

Now can stand as a viable option.

How do you perform the trade-offs between features needed in MSIE6 and more featured browsers? How do you ensure that something is still a feature.

• No features but fast
• Remove commenting
• > in the breadcrumbs
• Gradients
• Rounded cornders
• Drop shadows
• Full featured but slow

Will your audience really check against the rendering in all browsers? That's a developer or implementation

But who should specify the functionality.

Don't want to be too close to the edge of the degradation curve.

• Selectors
  • Match from right to left
  • Attribute selectors are slow
  • Just match on class not element.class
  • Transparency
  • Animation + border-raidius, gradient
  • Combining elements makes them slower, requires testing
• CSS3 best features
  • Replace images with CSS
  • rgba(r,g,b,o)
  • border-http

http://www.opera.com/docs/specs/presto211/css/selectortests/

http://csslint.net

CSS linter and parser in JavaScript.

[~=foo] throws a warning.

Missing default selector for vendor prefixed throws a warning.

$ npm -g install csslint

querySelector all may not be all faster than something like Sizzle.

If you want to combine events or if the user is performing a series of actions that don't have to be processed or completed immediately.

If this thing has happened then do this thing.

Big data; when you get back data you don't immediately render.

Would also want to proxy something that looks like.

new Person({name: 'jason', age: 100, foo: 'bar'});

For some reasonable number of items you may want to download but not display.

JS is reactive and callback oriented. When this data changes then perform this action. Forces the application to immediately react to the event.

You often don't need to perform DOM changes as you get a user event.

Don't want to continue parsing the Model and then performing the action immediately. This mirrors the way that the browsers actually work with the data.

var jason = new Person(); jason.setName = 'jason'; jason.setTitle = 'developer'; jason.setAddress = {street: '1234 main', state: 'WA'}

This emulates the transactional model used in databases.

jason.commit() ?

Creates a secondary event loop. Hooks on to the end of the primary browser event loop.

native event -> {handle event, handle event} -> sync bindings

Enforces coordination between items.

Don't try to have loops performed if only based on a single user interaction.

If you use an event based system you don't have any other way to do anything other than to set .

Create a boolean value to indicate if something is dirty.

ArrayController.

Run loop is set as a short setTimeout

This is the same as config, options,

Compare Facebook and

These were largely mobile applications that drove the new features.

Create JavaScript on the serverside.

As of 2005 there was a significant amount of content.

Yahoo uses Mustache.

• Instantiate: var myWidget = newWdiget
• Render
  1. Loading event and UI (RenderEvent = {parent: '', content: ''})
  2. getData (JSON)
  3. Complete event RenderEvent = {parent: '#mydiv', content: '<b>my content</b>'}

Controller.js: command.js, DOM.js Model.js: store.js, fetch.js View.js: render.js

type=mail.UI.MesageList

IC: inline caching.

As properties are accessed the IC

• global varial
• direct property
• closure variable

Nested prototypes don't harm performance since the ICs cache the shape.

function A() { this.x = 'x' } function B() { this.x = 'y' } function C() { this.x = 'z' }

B.prototype = A;

var f = function() { var x; var g = function() { var h = function() { …

Tracemonkey (Firefox) Crankshaft (Chrome)

IonMonkey is an expected updated.

What requires later cleanup:

• Objects
• Arrays
• Strings
• Function objects

GC pauses execution. The essential algorithm:

• Traverse all actionalble elements
• If no other points

• Nursey (frequently called), scavenging
• Tenured (long lived), mark-and-sweep

4 minutes of recorded time but should be limited on the public instance. Limited to Dallas.

Location in Dallas will record then measure against a recording. No backend varience.

Latency down to 0: the fastest a p

Deeper integration.

Not public now. Would send trending information.

Private is likely the best.

Watches trended information over time. Much like Gomez.

In progress.

Older browsers would serialized the requests. Round-trip by request.

Parallel resource downloads are faster. This needs to be done with real content to determine.

The factors:

• Modern or older browser
• Fragmented (200)
• Client bandwidth (number of packets)
• Initial congestion size window

Combining still makes sense for mobile. You need to test the correct approach. All of the trade-offs and measure the constraints.

If user has a lot of bandwidth the rules will change.

Parallel connections across hostnames: this was a sharding approach.

Likely unnecessary

12% increase in click-through

RT @souders: DoubleClick removed 1 client side redirect & cut 1.5 second in ad load time and increased CTR by 12% on mobile. Bryan McQuade #VelocityConf

2 - 3 seconds idle time if device is slow for 10s

if channel is active then the RTT is 40ms

appspot.com for the

high initial rtt

Tony jetsburg width, height, are reflows.

This is added as a new rule.

• Go buy SSDs. Right Now! via @crucially #velocityconf
• I need an SSD in my life. Thanks Artur! #velocityconf
• "JOINs are fast. Fuck nosql" - @crucially making known his love of SSDs at #velocityconf. Use SSDs and "stop wasting your life".
• "If you don't have an SSD in your laptop, you are wasting your life." -@crucially Amen. #velocityconf

http://www.w3.org/TR/page-visibility/

New Page Speed Chrome beta! Detects extra reflows, excess network serialization, and long-running scripts. http://t.co/DsKZ2Sq

vs. CPU, rendering, JS.

See the HTTP Archive data.

Speed Tracer: stack trace on a layout.

http://code.google.com/chrome/whitepapers/pagevisibility.html

http://www.slideshare.net/BrendanEich/future-tense-7782010

• Async (closures)
• High Performance VM (V8)
• Systems abstractions (UNIX)

The leaderboard.

dtrace -n io:::start

dtrace + ruby:

http://swarmation.com/

Rates of failure across servers. Logging, correlations, etc.

All of the log information about the user is pushed into the Apache logs. None of this is standard.

NodeJS application. OCaml binding. Available in github.

Holt Winters Aberration

Made it easy to create and track.

Fall into the trap and start hiring QA engineers.

"If you don't know how you're doing you fall into fear and start hiring QA engineers & it's all downhill from there." @kellan #velocityconf

Web Fail Report links back to UAID.

Developers weren't excited to work with Splunk. Seemed to like Ganglia and Graphite.

The code is monolythic. Doesn't include search or schema changes.

Know the main measurements.

Mapped all of the rollouts to the measured times.

No known impact, only a small user base.

What do we want to have ads do for security.

RT @andraz: Google's Engineers: there's a 300ms lag between mouse over the link and a click. We can start loading 300ms earlier! #velocityconf [smart++]

Joshua Timberman (Opscode, Inc.), Adam Jacob (Opscode), Christopher Brown (Opscode), Aaron Peterson (Opscode, Inc.), Matt Ray (Opscode), Seth Chisamore (Opscode, Inc.)

http://www.opscode.com/chef/

This mirrors

• Boston Web Performance Group

http://www.meetup.com/Web-Performance-Boston/

• New York Web Performance Group

http://www.nywebperformance.org/

• San Francisco & Silicon Valley Web Performance Group

http://www.meetup.com/SF-Web-Performance-Group/

• London Web Performance Meetup
• Paris
• LA Speed

Could be done through the Seattle JS group.

Emphasize the tools used beyond just the debugger.

• Case 1: Your own project
• Case 2: Review something not your own

Tools are the emphasis.

Primary feature development team.

http://developers.facebook.com/docs/reference/javascript/FB.ui/ FB.ui(data, callback(response))

http://docs.sproutcore.com/#doc=SC.Object&src=false This should include the use of the standar

Many cases of the namespace.item = new (function () { return { functions… })…