Notes From Velocity Conference Europe

  • 355 views
Uploaded 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 …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
355
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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