The O'Reilly Velocity Conference Europe was held in London from 13th to 15th November 2013. In a few days I shared my notes with my fellow webspeeders at the Web Performance Barcelona Meetup. These are the slides I used.

1. Notes from Velocity
Conference Europe 2013
jordibuj@siriusway.com

2. Who am I?
Let me introduce myself in two minutes

3. 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

4. And now…

5. Performance Engineer

7. A fast ecommerce makes more money

8. Combine performance tuning with key
ecommerce platform expertise

9. Performance review and optimization
services

10. Why did I go there?

11. 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

12. And what did I learn?
•
•
•
•
•
Concepts !
Tools!
Techniques!
Tips!
Resources

13. This talk is for AWARENESS
You listen to me now and go
tomorrow to the referenced links
and your favorite search engine.

14. 1. Concepts

15. Jank
https://speakerdeck.com/addyosmani/velocityconf-rendering-performance-casestudies
http://jankfree.org

16. 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

17. Latency

18. Latency
– Web browsing vs streaming/downloading!
– HW | RTT | Last mile | Mobile | TCP stack!
– http://bit.ly/hpbn-talk

19. Critical rendering path
Network
DOM
HTML
JavaScript!
download
CSS
(wait)
JavaScript
execution
Render
Tree
Layout
CSSOM
Paint
http://bit.ly/GRcIf4

20. 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

21. 2. Tools

22. WebPageTest ecosystem
http://velocityconf.com/velocityeu2013/public/schedule/detail/31529

23. Load time metrics

24. Useful test options

25. Waterfall diagrams

26. Speed index

27. 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/

28. HTTP Archive

29. bigqueri.es

30. Tools to automate testing

31. WebPageTest API

32. SiteSpeed

33. Tools to automate
optimizations
http://www.youtube.com/embed/2U3joc9NaY4

34. At development time

35. At runtime

36. Chrome DevTools
http://www.igvita.com/slides/2012/devtools-tips-and-tricks

37. Timeline, frames

38. Network
Network view, create waterfalls, export HAR, time&latency, size&content

39. 3. Tips &
Techniques

40. Continuous improvement via
automation

41. Automate functional testing in
production

42. Optimize TCP

43. Set performance goals

44. Optimize images

45. Measure whatever has meaning to
you and plot it against load time

46. Ok done. Reach me at:
•
•
•
•
jordibuj@siriusway.com!
http://siriusway.com/performance-blog/!
@jordibuj!
http://es.linkedin.com/in/jordibuj/

47. References
• Conference slides and videos: http://
velocityconf.com/velocityeu2013/public/
schedule/proceedings!
• #perfmatters