Your SlideShare is downloading. ×
Notes From Velocity Conference Europe
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Notes From Velocity Conference Europe

459

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 …

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
459
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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

×