May 09, 2015
Notes from Velocity Conference Europe 2013
Who am I?
Let me introduce myself in two minutes
Used to be kind of a…• Software Developer?!• IT Specialist?!• Database Specialist?!• IT Architect?!• Project Leader?
• Java Enterprise!• OO Analysis & Design!• DB2 & other databases!• TDD, CI & other Agile practices!• Mostly back end, critical infrastructure / apps!
– Performance matters
And now…
Performance Engineer
A fast ecommerce makes more money
Combine performance tuning with key ecommerce platform expertise
Performance review and optimization services
Why did I go there?
My Conference Objectives• Learn key technologies!• Listen to relevant people!• Grab some t-shirts and pencils!• Get some books signed!• Come back with even more energy
And what did I learn?• Concepts !• Tools!• Techniques!• Tips!• Resources
This talk is for AWARENESS
You listen to me now and go tomorrow to the referenced links and your favorite search engine.
1. Concepts
Jank
https://speakerdeck.com/addyosmani/velocityconf-rendering-performance-case-studies http://jankfree.org
Jank– Frame rate!• Rate at which a device produces consecutive
images to the screen!• Animations, transitions, scrolling !
– Jank!• Disruption in consistent frame rate that manifests
visually!• Know how browser renders pages: layout, paint,
composite layers, DOM & CSSOM
Latency
Latency–Web browsing vs streaming/downloading!– HW | RTT | Last mile | Mobile | TCP stack!– http://bit.ly/hpbn-talk
Critical rendering path
HTML
CSS
DOM
CSSOM
Render Tree Layout
Paint
Network
JavaScript!download
JavaScriptexecution
(wait)
http://bit.ly/GRcIf4
Critical rendering path• Users should see useful pixels as fast as
possible!• Paint above the fold, then fetch the rest!– Non-blocking critical CSS & JS!– Inline!– Progressive images!
• Minimize the number of roundtrips.!• TCP slow start
2. Tools
WebPageTest ecosystem
http://velocityconf.com/velocityeu2013/public/schedule/detail/31529
Load time metrics
Useful test options
Waterfall diagrams
Speed index
And many more features• Open source – download and install private
instance, or use public instance!• RESTful APIs!• Compare: two runs, different pages!• Capture video, compare!• Capture TCP dump, DevTools timeline!• https://sites.google.com/a/webpagetest.org/docs/
HTTP Archive
bigqueri.es
Tools to automate testing
WebPageTest API
SiteSpeed
Tools to automate optimizations
http://www.youtube.com/embed/2U3joc9NaY4
At development time
At runtime
Chrome DevTools
http://www.igvita.com/slides/2012/devtools-tips-and-tricks
Timeline, frames
NetworkNetwork view, create waterfalls, export HAR, time&latency, size&content
3. Tips & Techniques
Continuous improvement via automation
Automate functional testing in production
Optimize TCP
Set performance goals
Optimize images
Measure whatever has meaning to you and plot it against load time
Ok done. Reach me at:• [email protected]!• http://siriusway.com/performance-blog/!• @jordibuj!• http://es.linkedin.com/in/jordibuj/
References• Conference slides and videos: http://
velocityconf.com/velocityeu2013/public/schedule/proceedings!
• #perfmatters