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

Notes From Velocity Conference Europe

on

  • 407 views

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.

Statistics

Views

Total Views
407
Slideshare-icon Views on SlideShare
407
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Notes From Velocity Conference Europe Notes From Velocity Conference Europe Presentation Transcript

    • 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? • • • • • Java Enterprise! OO Analysis & Design! DB2 & other databases! TDD, CI & other Agile practices! Mostly back end, critical infrastructure / apps! – Performance matters
    • 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 some books signed! Come back with even more energy
    • 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, scrolling ! – Jank! • Disruption in consistent frame rate that manifests visually! • Know how browser renders pages: layout, paint, composite layers, DOM & CSSOM
    • 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 CSSOM Paint http://bit.ly/GRcIf4
    • 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
    • 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! • Compare: two runs, different pages! • Capture video, compare! • Capture TCP dump, DevTools timeline! • https://sites.google.com/a/webpagetest.org/docs/
    • 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.linkedin.com/in/jordibuj/
    • References • Conference slides and videos: http:// velocityconf.com/velocityeu2013/public/ schedule/proceedings! • #perfmatters