Seth Walker, Etsy, @sethwalker
Tool: Supergrep
Slides: continuous-experimentation
Blog post
- link prefetching: on safari iOS, pretech link make the top and bottom bar appears
Cache-Control: private
Indicates that all or part of the response message is intended for a single user and MUST NOT be cached by a shared cache, such as a proxy server.
Source
Beginner's guide to HTTP headers
Does Mobile Web Performance Optimization Still Matter?
Try this analogy: Imagine you're shipping goods from your warehouse across a highway using trucks to be delievered to customers. Bandwidth is like the number of lanes on the highway. Transfer usage would be the volume (counted number) of goods your trucks took across that highway. Disk space would be the size of your warehouse (sort of, explained below).
Source
_ _
But there is a big problem with this. Bandwidth and volume are not the same. Bandwidth is typically measured in bits per second. Data volume is typically measured in bytes. To provide an analogy, a network’s bandwidth is equivalent to the number of lanes on a road. Data volume is equivalent to the number of miles an individual car travels along a road over a certain period of time.
Source
Sarah Goff-Dupont, Atlassian, @DevToolSuperFan
- Tool: Bamboo
- CI is triggered automatically on prod, stable releases branches, but manually on dev branches
- Jenkins plugin for Jira or Git hooks
- Rebase before merging
- pre release hooks
- let dev branches do the dirty work
- all your branches are belong to CI
- kindergarten rules: share and help clean up
- git hooks == ninja powers
Bertrand Fan, FlickR, @bertrandom
- Express
- [tool] Yahoo Manhattan - express service hosting (url?)
- [tool] Reboot
- Allow user to opt-in and opt-out
- [tool] httperf, request/ seconds, latency -- stress test
- They can deploy via irc :)
- feature flags + uglifyJS
- Express YUI
Sebastian Golash, @asciidisco
- pixel test: take a screenshot from before, one after, and compare pixel by pixel
- but what of only text changes: false negative
- do I have to valid every change: yes
- [tool] Photobox (take screenshots of any site and compare them. A/B visual comparison). Problem, can be too noisy if differences are multiple and big, results as a lot of noise
- [tool] Siteeffects, combine screenshots with knowledge of the dom
- Load perf, layout perf, scroll perf
- waterfall charts
- take max parallels requests in account !
yslow -f xml xx.har
- phantomas ! + grunt plugin
- Chrome Telemetry
- python framework that collects a lot of data of a browser, perf
- like devtools, but CI side
- Art of knowing how to break your app
- Gremlin.js
- :( does not trigger the entire complete event cascade
- CSS is a declarative language
- Hardy - on top of selenium / Checks the computed style / gherkin syntax
- use it for critical components
John-David Dalton, @jdalton
- Travic-CI
- QUnit (Jasmine, Mocha)
- Grunt (optional)
- Sauce Labs account
- coveralls.io
npm deps
- chalk
- ecstatic
- request
- sauce-tunnel
- grunt-saucelabs
Jonathan Lipps, Sauce Labs, @jlipps
- Apple Instruments & UIAutomations for iOS
- Google UIAutomator for Android (4.2.1+)
- Selendroid for older android
- Chromedriver for Android web & Hybrid
- WebDriver interface
Parashuram Narasimhan, Microsoft Open Technologies, @nparashuram
- Shard the domains to increase the number of parallel requests
- Enclose expensive javascript inside requestAnimationFrames
- Minize JS, Images and CSS, always zip over the wire
- Runtime performance checklist
- Pray to the demo gods before your presentation
- Perfjankie: CouchApp that saves the data, displays the graphs
- Phantomas: Runs tests on PhantomJS
Dusty Jewett, Simply Measured, @dustyjewett
imagediff (npm): terrible :/- high charts
- Scylla
Tobias Baldauf, Akamai, @tbaldauf
- A SEO expert walks into a bar, bars, pub, public house, irish pub, drinks, beer, wine, liquor, grey goose, cristal...
- from waterfall to HAR
- when doing agile, all have to pull together
- scrum masters own the agile process
- an entire company must live webperf culture
- we own performance as cultural good
- we cannot own performance as responsibility
- we consult, create visibility & tools
- ideally, we'd make ourselves redundant
- it's front-end's / back-end's, QA's job
- it's a gimmic
- it's an impediment
- it's not transcending all department
Works fine in dev, ops problem now
- A web performance engineer enables & guards webperf culture and this facilitates change.
- Performance is everyone's business. Get all on board & be the helpful engineer you want to see
Paul Irish, Google, @paul_irish
- Measure
- Calculate light speed
- Approach the speed of light
- Correlation of speed index: time to visually rendered
- Not all requestss are made equal
- where are they initiated
- what part of the UX do they block
- How requests work on the TCP layer
- critical path
- Single digit % perf after 5 Mbps == smaller resources
- Linear imprivement with latency == fewer resources to load
- Video streaming is bandwidth limited
- Web browsing is latency limited
- TCP slow start
- tap -> image comes in
- [tool] webpagetest
- PageSpeed insights
Mikeal Rogers, DigitalOcean, @mikeal
- npm pouuuuuutre tout. Others: pypi, rubygems (stable), maven central, pearl, hackage (haskell), cpan, nuget (.net), clojars (clojure) (==> declin)
Ian Feathers, Lonely Planet, @ianfeather
- Style guide
- Components are reusable but must follow an API style for i/o
- Reduce the technical debt
Slides are really focus on experience at Lonely Planet, but worth a watch.
Rachel Myers & Emily Nakashima, @rachelmyers & @eanakashima
- 1 file per polyfill. Comments are put to help maintenance: @support IE8, so you can remove the file when you drop the support of IE8
- check our browser analytics on these dates
- sunset tests
- [tool] dom-prof
- know what browsers you support
- enforce expiration dates in code
Burak Yiğit Kaya, Disqus, @madbyk
-
language matters
-
git diff --shortstat "{@month...}"
-
Advantages of using a SaaS for translations
- solves the storage problem: where & how
- solves the UI problem
-
marking translates:
gettext
-
variables:
translations["Hello %(name)%"]
-
extracting: jsxgettext]
-
[tool] grunt-i18n-abide
-
Considerations:
-
Automate: TravisCI, Jenkins, ...
-
SaaS for translations
-
Task runner
-
Use case BBC news Sass implementation of RTL
Martin Kleppe, Ubilabs, aem1k.com, slides
false => ![]
true => !![]
undefined => [][[]]
NaN => +[![]]
0 => +[]
1 => +!+[]
2 => !+[]+!+[]
10 => [+!+[]]+[+[]]
Array => []
Number => +[]
String => []+[]
Boolean => ![]
Function => []["filter"]
eval => []["filter"]["constructor"]( CODE )()
window => []["filter"]["constructor"]("return this")()
Dan Lee @DanielEricLee & Chris Chen @chennney, Yammer
- build.json => asset pipeline => application.js => CDN
- Isolation
- Iteration
- Minimize disruption
- 'Code in transition' is ok
Dustan Kasten, Skookum Digital Works, @iamdustan
- Disseminating knowledge
- Be transparent
- Trust & vulnerability
- "In order to have mutual trust, you need to be vulnerable" - Patrick Lencioni
- Human relationships are the most important valuable, worthwhile, painful, difficult, wonderful, part of life.
- Active mentality of creating, really taking steps to improve creativity, productivity
Rodney Rehm, Deutsche Telekom, @rodneyrehm
- Tools are categorized:
^
Analysis (user)|
Test (user)|
Build (dev)|
Development (dev)
Anything invented before you're 15 is normal and along the natural order of things.
Anything invented between you're 15 and 35 is exciting and revolutionary, and you could probably make a career on it.
Anything invented after you're 35 is against the natural order of things.
-
Start with something small, but something with impact:
- convincing the team:
- graphic designers
- UX designers
- QA engineers
- Ops, DevOps
- convincing the team:
-
Blind refactoring is not your friend
Start small. Build prototypes. Follow through.