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?...
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...
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-casestudies
http://jankfree.org
Jank
– Frame rate!
• Rate at which a device produces consecutive
images to the screen!
• Animations, transitions, scrollin...
Latency
Latency
– Web browsing vs streaming/downloading!
– HW | RTT | Last mile | Mobile | TCP stack!
– http://bit.ly/hpbn-talk
Critical rendering path
Network

DOM

HTML

JavaScript!
download

CSS

(wait)

JavaScript

execution

Render
Tree

Layout
...
Critical rendering path
• Users should see useful pixels as fast as
possible!
• Paint above the fold, then fetch the rest!...
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!
• Co...
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
Network
Network 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.linked...
References
• Conference slides and videos: http://
velocityconf.com/velocityeu2013/public/
schedule/proceedings!
• #perfma...
Notes From Velocity Conference Europe
Notes From Velocity Conference Europe
Upcoming SlideShare
Loading in …5
×

Notes From Velocity Conference Europe

708
-1

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
708
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×