Notes From Velocity Conference Europe

1,042 views

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,042
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Notes From Velocity Conference Europe

  1. 1. Notes from Velocity Conference Europe 2013 jordibuj@siriusway.com
  2. 2. Who am I? Let me introduce myself in two minutes
  3. 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. 4. And now…
  5. 5. Performance Engineer
  6. 6. A fast ecommerce makes more money
  7. 7. Combine performance tuning with key ecommerce platform expertise
  8. 8. Performance review and optimization services
  9. 9. Why did I go there?
  10. 10. 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
  11. 11. And what did I learn? • • • • • Concepts ! Tools! Techniques! Tips! Resources
  12. 12. This talk is for AWARENESS You listen to me now and go tomorrow to the referenced links and your favorite search engine.
  13. 13. 1. Concepts
  14. 14. Jank https://speakerdeck.com/addyosmani/velocityconf-rendering-performance-casestudies http://jankfree.org
  15. 15. 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
  16. 16. Latency
  17. 17. Latency – Web browsing vs streaming/downloading! – HW | RTT | Last mile | Mobile | TCP stack! – http://bit.ly/hpbn-talk
  18. 18. Critical rendering path Network DOM HTML JavaScript! download CSS (wait) JavaScript
 execution Render Tree Layout CSSOM Paint http://bit.ly/GRcIf4
  19. 19. 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
  20. 20. 2. Tools
  21. 21. WebPageTest ecosystem http://velocityconf.com/velocityeu2013/public/schedule/detail/31529
  22. 22. Load time metrics
  23. 23. Useful test options
  24. 24. Waterfall diagrams
  25. 25. Speed index
  26. 26. 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/
  27. 27. HTTP Archive
  28. 28. bigqueri.es
  29. 29. Tools to automate testing
  30. 30. WebPageTest API
  31. 31. SiteSpeed
  32. 32. Tools to automate optimizations http://www.youtube.com/embed/2U3joc9NaY4
  33. 33. At development time
  34. 34. At runtime
  35. 35. Chrome DevTools http://www.igvita.com/slides/2012/devtools-tips-and-tricks
  36. 36. Timeline, frames
  37. 37. Network Network view, create waterfalls, export HAR, time&latency, size&content
  38. 38. 3. Tips & Techniques
  39. 39. Continuous improvement via automation
  40. 40. Automate functional testing in production
  41. 41. Optimize TCP
  42. 42. Set performance goals
  43. 43. Optimize images
  44. 44. Measure whatever has meaning to you and plot it against load time
  45. 45. Ok done. Reach me at: • • • • jordibuj@siriusway.com! http://siriusway.com/performance-blog/! @jordibuj! http://es.linkedin.com/in/jordibuj/
  46. 46. References • Conference slides and videos: http:// velocityconf.com/velocityeu2013/public/ schedule/proceedings! • #perfmatters

×