Notes from Velocity Conference Europe 2013

jordibuj@siriusway.com

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:• jordibuj@siriusway.com!• 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