SlideShare ist ein Scribd-Unternehmen logo
1 von 136
Downloaden Sie, um offline zu lesen
Faster Page
    Performance
        John McCaffrey
         @J_McCaffrey



http://spkr8.com/t/8314
Agenda
•   Intro

•   Performance 101

•   Performance tuning workflow

•   Performance features in Rails 3, 3.1

•   Considerations for Mobile and HTML 5

•   Q&A
Intro
• Doing Rails since 2007
• 4th time presenting at WindyCityRails
   o 2008: Advanced Firebug and JS unit testing
   o 2009: PDF Generation in Rails
   o 2010: Rails Performance Tuning
   o 2011: Faster Page Performance
• Addicted to Performance Tuning
• railsperformance.blogspot.com
                                                     @J_McCaffrey
• Feedback: speakerrate.com                       railsperformance@gmail.com
Intro
• Doing Rails since 2007
• 4th time presenting at WindyCityRails
   o 2008: Advanced Firebug and JS unit testing
   o 2009: PDF Generation in Rails
   o 2010: Rails Performance Tuning
   o 2011: Faster Page Performance
• Addicted to Performance Tuning
• railsperformance.blogspot.com
                                                     @J_McCaffrey
• Feedback: speakerrate.com                       railsperformance@gmail.com
Intro
• Doing Rails since 2007
• 4th time presenting at WindyCityRails
   o 2008: Advanced Firebug and JS unit testing
   o 2009: PDF Generation in Rails
   o 2010: Rails Performance Tuning
   o 2011: Faster Page Performance
• Addicted to Performance Tuning
• railsperformance.blogspot.com
                                                     @J_McCaffrey
• Feedback: speakerrate.com                       railsperformance@gmail.com
Intro
Intro


•   A little about you, and the people around you
Intro


•   A little about you, and the people around you
•   You are all smarter than I am
Intro


•   A little about you, and the people around you
•   You are all smarter than I am
•   Try hard to Network today, meet cool people
Intro


•   A little about you, and the people around you
•   You are all smarter than I am
•   Try hard to Network today, meet cool people
•   Eat lunch with someone new, invite someone
    into your ‘crowd’, go to the After Party!!
Quick Poll

•   Work on a Rails application
•   Have been doing Rails for less than 6 months? 1yr? 2yrs? 4yrs?
•   Testing Rspec? cucumber? Test::Unit? CI?
•   Write Javascript frequently? jQuery? Prototype? js testing?
•   Working with Rails 3 or Rails 3.1
•   Work on Mobile (native or web)
•   Working with HTML 5
Quick Poll


• Raise your hand if you Want to learn more
• Stand up if you’d like to meet up with
  others and share what you’ve learned
Quick Poll


• Raise your hand if you Want to learn more
• Stand up if you’d like to meet up with
  others and share what you’ve learned


      Don’t knock over your coffee!
Help me, Help you!!

• Improving page loading time
• Sql query tuning, indexes or DB tuning
• Rails 3 and 3.1
• HTML 5 and CSS 3
• NoSQL
Introduce yourself
                (to someone new)




Photo by @monty_ksycki
Introduce yourself
                (to someone new)




Photo by @monty_ksycki
Introduce yourself
             (toyou’re from
                  someone new)
•    Name & Where




    Photo by @monty_ksycki
Introduce yourself
             (toyou’re from
                  someone new)
•    Name & Where

•    Most important thing you want to
     get out of WindyCityRails




    Photo by @monty_ksycki
Introduce yourself
             (toyou’re from
                  someone new)
•    Name & Where

•    Most important thing you want to
     get out of WindyCityRails

•    Only 2mins for this!!!!




    Photo by @monty_ksycki
Agenda
•   Intro


•
•
    Performance 101
    Performance tuning workflow

•   Performance features in Rails 3, 3.1

•   Considerations for Mobile and HTML 5
Performance Matters




www.strangeloopnetworks.com/web‐performance‐op4miza4on‐hub
Perf. statistics




www.strangeloopnetworks.com/web‐performance‐op4miza4on‐hub
Perf. statistics




www.strangeloopnetworks.com/web‐performance‐op4miza4on‐hub
Increased revenue 12%
http://blog.kissmetrics.com/loading-time/
Windycityrails page performance
So where do we start?
Drop some knowledge

        "Premature optimization
        is the root of all evil"

        -Donald Knuth
Is it premature?
Is it premature?

Effort vs Value
  • Gzip
  • Adding database indexes
  • Optimizing images
  • Try nginx (or trinidad)
Measuring != Premature

‘Good Enough’ metrics
• Avg response time
• Server Load
• Memory footprint
• Slow queries
• Load capacity
Perf Tuning Pledge
Perf Tuning Pledge

• “I will MEASURE before and after”
Perf Tuning Pledge

• “I will MEASURE before and after”
• “I will document and share the findings”
Perf Tuning Pledge

• “I will MEASURE before and after”
• “I will document and share the findings”
• “WE will decide to monitor it, fix it, or just
  forget it”
Agenda

•   Intro

•   Performance 101

•   Performance tuning workflow
•   Performance features in Rails 3, 3.1

•   Considerations for Mobile and HTML 5
Perf tuning workflow

•   Page load
• Application tuning
• DB performance
• Javascript
• Architecture*
Improving page load
Improving page load

  Yslow (Firefox and Chrome)
   http://developer.yahoo.com/yslow/


  Page speed (Firefox and Chrome)
   http://code.google.com/speed


  Dynatrace (IE and Firefox)
   http://ajax.dynatrace.com


  Webpagetest.org (IE, Chrome, Firefox)
Improving page load

  Yslow (Firefox and Chrome)
   http://developer.yahoo.com/yslow/


  Page speed (Firefox and Chrome)
   http://code.google.com/speed


  Dynatrace (IE and Firefox)
   http://ajax.dynatrace.com


  Webpagetest.org (IE, Chrome, Firefox)
Improving page load

  Yslow (Firefox and Chrome)
   http://developer.yahoo.com/yslow/


  Page speed (Firefox and Chrome)
   http://code.google.com/speed


  Dynatrace (IE and Firefox)
   http://ajax.dynatrace.com


  Webpagetest.org (IE, Chrome, Firefox)
Improving page load

  Yslow (Firefox and Chrome)
   http://developer.yahoo.com/yslow/


  Page speed (Firefox and Chrome)
   http://code.google.com/speed


  Dynatrace (IE and Firefox)
   http://ajax.dynatrace.com


  Webpagetest.org (IE, Chrome, Firefox)
Improving page load

  Yslow (Firefox and Chrome)
   http://developer.yahoo.com/yslow/


  Page speed (Firefox and Chrome)
   http://code.google.com/speed


  Dynatrace (IE and Firefox)
   http://ajax.dynatrace.com


  Webpagetest.org (IE, Chrome, Firefox)
Improving page load

      Yslow (Firefox and Chrome)
        http://developer.yahoo.com/yslow/


      Page speed (Firefox and Chrome)
         http://code.google.com/speed


      Dynatrace (IE and Firefox)
        http://ajax.dynatrace.com


      Webpagetest.org (IE, Chrome, Firefox)

80-85% of the time is spent on the front-end
Page load rules
                1. Minimize HTTP Requests
                2. Use a Content Delivery Network
                3. Add an Expires or a Cache-Control Header
                4. Gzip Components
                5. Put StyleSheets at the Top
                6. Put Scripts at the Bottom
                7. Avoid CSS Expressions
Steve Souders   8. Make JavaScript and CSS External
                9. Reduce DNS Lookups
                10. Minify JavaScript and CSS
                11. Avoid Redirects
                12. Remove Duplicate Scripts
                13. Configure ETags
                14. Make AJAX Cacheable
                15. Use GET for AJAX Requests
                16. Reduce the Number of DOM Elements
                17. No 404s
                18. Reduce Cookie Size
Waterfall 101
• Typically 80% of the browsers ‘effort’ is spent
  loading all the other stuff after the initial html
Waterfall 101
Waterfall 101
Waterfall 101
Waterfall 101
Waterfall 101




Javascript execution is blocking the next download
Waterfall 101
Waterfall 101




Css shouldn’t block,
what’s going on here?
Waterfall 101




<head>
 <title>base page</title>
 <link type="text/css" rel="stylesheet" href="http://tools.w3clubs.com/1.expires.css">
 <!--[if IE 6 ]>
  <linktype="text/css" rel="stylesheet"href="http://tools.w3clubs.com/2.expires.css">
 <![endif]-->
</head>


      www.phpied.com/conditional-comments-block-downloads
Waterfall 101




<!--[if IE]><![endif]-->
<head>
<html lang="en">
 <title>base page</title>
<head> type="text/css" rel="stylesheet" href="http://tools.w3clubs.com/1.expires.css">
 <link
 <!--[if IE 6 page</title>
 <title>base ]>
 <link type="text/css" rel="stylesheet"href="http://tools.w3clubs.com/2.expires.css">
  <linktype="text/css" rel="stylesheet" href="http://tools.w3clubs.com/1.expires.css">
 <![endif]--> ]>
 <!--[if IE 6
  <linktype="text/css" rel="stylesheet"href="http://tools.w3clubs.com/2.expires.css">
</head>
 <![endif]-->
</head>
      www.phpied.com/conditional-comments-block-downloads
Save your Waterfall!
    HTTP Archive format
          (HAR)
Save your Waterfall!
               HTTP Archive format
                     (HAR)

• Export options    www.softwareishard.com/blog/har-adopters

  •   Firebug
  •   IE9
  •   Chrome
  •   Webpagetest.org
• Har viewer www.softwareishard.com/har/viewer
  •   Compare multiple files
Save your Waterfall!
               HTTP Archive format
                     (HAR)

• Export options    www.softwareishard.com/blog/har-adopters

  •   Firebug
  •   IE9
  •   Chrome
  •   Webpagetest.org
• Har viewer www.softwareishard.com/har/viewer
  •   Compare multiple files


Did I mention that its important to measure?
Solutions
• Gzip
• Combine and minify js and css
• Load css first, js at the bottom
• Optimize images and use css sprites
• Use a cdn for static assets
• Defer javascript loading
Deferred loading of
    javascript
Deferred loading of
          javascript
• Load only the minimum necessary javascript first
• Load the rest of the javascript asynchronously
• Pre-load and pre-cache javascript and images for
  the next pages
Deferred loading of
            javascript
• Load only the minimum necessary javascript first
• Load the rest of the javascript asynchronously
• Pre-load and pre-cache javascript and images for
   the next pages

                  bit.ly/non-blocking-js
www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking
Leverage
✓ Those changes improve the
  performance across multiple
  requests
✓ Well tested, well understood
✓ Continues to be useful as new
  features are added, won’t get
  in your way
Leverage
✓ Those changes improve the
  performance across multiple
  requests
✓ Well tested, well understood
✓ Continues to be useful as new
  features are added, won’t get
  in your way
Perf tuning workflow

• Page load
•   Application tuning
• DB performance
• Javascript
Backend performance
Backend performance


         2 seconds?
     What’s taking so long?
Tools
• Request log analyzer
• Splunk
• New Relic
• Rack::Bug
• Built in Benchmark and profiling tools
What I’m looking for
What I’m looking for

• What is the average response time
• What is the slowest request
• What request makes up the majority of the
  work the server is doing
• Are there good candidates for caching?
Common culprits
• Not leveraging the database
• Too much memory
• Too many queries
• Generally slow code
• Loading more fields than needed
N +1
clients = Client.limit(10)
 clients.each do |client|
  puts client.address.postcode
end
N +1
  1 query to clients = Client.limit(10)
load the clients clients.each do |client|
               puts client.address.postcode
             end
N +1
  1 query to clients = Client.limit(10)
load the clients clients.each do |client|
               puts client.address.postcode
             end

                    1 query for each address (x10)
N +1
  1 query to clients = Client.limit(10)
load the clients clients.each do |client|
                puts client.address.postcode
              end

                     1 query for each address (x10)

   clients = Client.includes(:address).limit(10)
    clients.each do |client|
     puts client.address.postcode
   end
N +1
  1 query to clients = Client.limit(10)
load the clients clients.each do |client|
                     puts client.address.postcode
                   end
  1 query to             1 query for each address (x10)
load the clients
    clients = Client.includes(:address).limit(10)
     clients.each do |client|
      puts client.address.postcode
    end
N +1
  1 query to clients = Client.limit(10)
load the clients clients.each do |client|
                     puts client.address.postcode
                   end
  1 query to             1 query for each address (x10)
load the clients
    clients = Client.includes(:address).limit(10)
     clients.each do |client|
      puts client.address.postcode
    end

           1 query to get all 10 Addresses!
Libraries
Libraries
• Document why you have it
• Remove unused, reduce dependencies
• Pick between duplicate tools
• Try to stay current
• Rvm, bundler and git branches for testing
• “Is it safe to upgrade that library” - find the
  right balance of tests to answer this
Perf tuning workflow

• Page load
• Application tuning
•   DB performance
• Javascript
DB Tuning

• Slow Queries
• Not enough server resources
• Not balanced for Read/Write usage
Tools

• Rails log
• Slow query log
 • launchpad.net/percona-toolkit
• Explain
• Server profiling (CPU, IO, Mem, etc)
Explain
Aggregate (cost=154115.13..154115.14 rows=1 width=4) (actual time=4760.885..4760.886 rows=1 loops=1)
 ->Nested Loop Left Join (cost=0.00..154115.11 rows=9 width=4) (actual time=3262.981..4760.794 rows=2)
  Join Filter:(parts.id = lines_bills.part_id)
  ->Nested Loop Left Join (cost=0.00..154100.44 rows=9 width=8) (actual time=3262.954..4760.608 rows=2)
   ->Nested Loop (cost=0.00..153983.24 rows=8 width=4) (actual time=3262.940..4760.574 rows=2 loops=1)
    ->Seq Scan on bills (cost=0.00..153822.17 rows=11 width=4) (actual time=3262.813..4760.361 rows=2)
      Filter:(((bill_type)::text = 'Personal'::text) AND (upper((ssn)::text) ~~ '%333901151%'::text))
   ->Index Scan using lines_idx1 on lines (cost=0.00..14.63 rows=1 width=4) (actual time=0.093..0.094)
     Index Cond: (lines.bill_id = bills.id)
     Filter:((NOT lines.archived) AND ((lines.status)::text <> 'created'::text))
 ->Index Scan using lines_idx1 on lines lines_bills (cost=0.00..14.62 rows=2 width=8)
     Index Cond:(lines_bills.bill_id = bills.id)
 ->Seq Scan on parts (cost=0.00..1.28 rows=28 width=4) (actual time=0.010..0.045 rows=30 loops=2)

Total runtime: 4761.401 ms
Explain
Aggregate (cost=154115.13..154115.14 rows=1 width=4) (actual time=4760.885..4760.886 rows=1 loops=1)
 ->Nested Loop Left Join (cost=0.00..154115.11 rows=9 width=4) (actual time=3262.981..4760.794 rows=2)
  Join Filter:(parts.id = lines_bills.part_id)
  ->Nested Loop Left Join (cost=0.00..154100.44 rows=9 width=8) (actual time=3262.954..4760.608 rows=2)
   ->Nested Loop (cost=0.00..153983.24 rows=8 width=4) (actual time=3262.940..4760.574 rows=2 loops=1)
    ->Seq Scan on bills (cost=0.00..153822.17 rows=11 width=4) (actual time=3262.813..4760.361 rows=2)
      Filter:(((bill_type)::text = 'Personal'::text) AND (upper((ssn)::text) ~~ '%333901151%'::text))
   ->Index Scan using lines_idx1 on lines (cost=0.00..14.63 rows=1 width=4) (actual time=0.093..0.094)
     Index Cond: (lines.bill_id = bills.id)
     Filter:((NOT lines.archived) AND ((lines.status)::text <> 'created'::text))
 ->Index Scan using lines_idx1 on lines lines_bills (cost=0.00..14.62 rows=2 width=8)
     Index Cond:(lines_bills.bill_id = bills.id)
 ->Seq Scan on parts (cost=0.00..1.28 rows=28 width=4) (actual time=0.010..0.045 rows=30 loops=2)

Total runtime: 4761.401 ms

changed (upper(ssn) LIKE E'%123456789%')
to        (ssn LIKE E'123456789%')                  Total runtime: 7.579ms
Explain
Aggregate (cost=154115.13..154115.14 rows=1 width=4) (actual time=4760.885..4760.886 rows=1 loops=1)
 ->Nested Loop Left Join (cost=0.00..154115.11 rows=9 width=4) (actual time=3262.981..4760.794 rows=2)
  Join Filter:(parts.id = lines_bills.part_id)
  ->Nested Loop Left Join (cost=0.00..154100.44 rows=9 width=8) (actual time=3262.954..4760.608 rows=2)
   ->Nested Loop (cost=0.00..153983.24 rows=8 width=4) (actual time=3262.940..4760.574 rows=2 loops=1)
    ->Seq Scan on bills (cost=0.00..153822.17 rows=11 width=4) (actual time=3262.813..4760.361 rows=2)
      Filter:(((bill_type)::text = 'Personal'::text) AND (upper((ssn)::text) ~~ '%333901151%'::text))
   ->Index Scan using lines_idx1 on lines (cost=0.00..14.63 rows=1 width=4) (actual time=0.093..0.094)
     Index Cond: (lines.bill_id = bills.id)
     Filter:((NOT lines.archived) AND ((lines.status)::text <> 'created'::text))
 ->Index Scan using lines_idx1 on lines lines_bills (cost=0.00..14.62 rows=2 width=8)
     Index Cond:(lines_bills.bill_id = bills.id)
 ->Seq Scan on parts (cost=0.00..1.28 rows=28 width=4) (actual time=0.010..0.045 rows=30 loops=2)

Total runtime: 4761.401 ms

changed (upper(ssn) LIKE E'%123456789%')
to        (ssn LIKE E'123456789%')                  Total runtime: 7.579ms

then to (ssn = E'123456789') Total runtime: 1.696ms
Culprits
Culprits

• Too many queries
• No indexes on the key data
• Not optimized for how the db ‘thinks’
• Not enough server memory for sorting
• Trying to do too much in one query
Testing
Testing
• Measure first!
• Make performance tuning changes in the
  most tested parts of the app
• Have the most important parts of your app
  well-tested, so tuning will be easier
• Well-tested code tends to be well factored
Perf tuning workflow

• Page load
• Application tuning
• DB performance
•   Javascript
Javascript is powerful
Javascript is powerful
• Most hate for javascript is really a hatred of
  the browser and DOM interaction
Javascript is powerful
• Most hate for javascript is really a hatred of
  the browser and DOM interaction
• Javascript is driving a lot of very cool things
Javascript is powerful
• Most hate for javascript is really a hatred of
  the browser and DOM interaction
• Javascript is driving a lot of very cool things
 • Node.js
Javascript is powerful
• Most hate for javascript is really a hatred of
  the browser and DOM interaction
• Javascript is driving a lot of very cool things
 • Node.js
 • Backbone
Javascript is powerful
• Most hate for javascript is really a hatred of
  the browser and DOM interaction
• Javascript is driving a lot of very cool things
 • Node.js
 • Backbone
 • sproutCore
High performance js
• UI thread is responsible for js
  and UI updates
• Understand Repaint and Reflow
  triggers
• Benchmarks for browser
  performance
• Dom Scripting
• Memory and cpu usage
Javascript profiling


• Dynatrace
• Google Speed tracer
• Firebug profiler
Dynatrace Ajax (IE and Firefox)




http://blog.dynatrace.com/2010/07/22/ie-compatibility-view-how-to-identify-performance-
                            problems-between-ie-versions/
Dynatrace Ajax (IE and Firefox)




http://blog.dynatrace.com/2010/07/22/ie-compatibility-view-how-to-identify-performance-
                            problems-between-ie-versions/
Windycityrails page performance
jQuery Top Issues
jQuery Top Issues
•   Poor selector usage
    •   $(‘#Id, form, input’) Id and element are fast
    •   $(‘.classname’) causes full scan in IE5-8
jQuery Top Issues
•   Poor selector usage
    •   $(‘#Id, form, input’) Id and element are fast
    •   $(‘.classname’) causes full scan in IE5-8
•   show() and hide() often slower
    than .addClass(“show”) or .addClass(“hide”)
jQuery Top Issues
•   Poor selector usage
    •   $(‘#Id, form, input’) Id and element are fast
    •   $(‘.classname’) causes full scan in IE5-8
•   show() and hide() often slower
    than .addClass(“show”) or .addClass(“hide”)
•   .each() often slower than regular ‘for’ loop
jQuery Top Issues
•   Poor selector usage
    •   $(‘#Id, form, input’) Id and element are fast
    •   $(‘.classname’) causes full scan in IE5-8
•   show() and hide() often slower
    than .addClass(“show”) or .addClass(“hide”)
•   .each() often slower than regular ‘for’ loop
•   Avoid extra queries by caching selector
jQuery Top Issues
•   Poor selector usage
    •   $(‘#Id, form, input’) Id and element are fast
    •   $(‘.classname’) causes full scan in IE5-8
•   show() and hide() often slower
    than .addClass(“show”) or .addClass(“hide”)
•   .each() often slower than regular ‘for’ loop
•   Avoid extra queries by caching selector
•   Avoid manipulating the Dom in a loop, try to
    append all at once (with a wrapping element)
Browser Comparison
Browser Comparison
• jsperf.com
 • Compare js performance across browsers
 • http://jsperf.com/queryselectorall-vs-
    getelementsbytagname
Browser Comparison
• jsperf.com
 • Compare js performance across browsers
 • http://jsperf.com/queryselectorall-vs-
    getelementsbytagname
• jsfiddle.net (full page structure)
 • http://jsfiddle.net/addyosmani/BFeMN/
Browser Comparison
• jsperf.com
 • Compare js performance across browsers
 • http://jsperf.com/queryselectorall-vs-
    getelementsbytagname
• jsfiddle.net (full page structure)
 • http://jsfiddle.net/addyosmani/BFeMN/
These tools make benchmarks easier and repeatable
Agenda

•   Intro

•   Performance 101

•   Performance tuning workflow

• Performance features in Rails 3, 3.1
•   Considerations for Mobile and HTML 5
Performance features in Rails 3

• Separation of framework, only load what you need
• New Active Record Arel query structure
 • http://www.slideshare.net/tenderlove/zomg-why-
    is-this-code-so-slow
• Bundler
• Ruby 1.9.2 (with patch for faster Rails 3 load)
Performance features in Rails 3.1
Performance features in Rails 3.1

• JQuery by default
Performance features in Rails 3.1

• JQuery by default
• Prepared statement caching
Performance features in Rails 3.1

• JQuery by default
• Prepared statement caching
• New Asset Pipeline
Performance features in Rails 3.1

• JQuery by default
• Prepared statement caching
• New Asset Pipeline
 •   railscasts.com/episodes/279-understanding-the-asset-pipeline
Performance features in Rails 3.1

• JQuery by default
• Prepared statement caching
• New Asset Pipeline
 •   railscasts.com/episodes/279-understanding-the-asset-pipeline

• Http Streaming
Performance features in Rails 3.1

• JQuery by default
• Prepared statement caching
• New Asset Pipeline
 •   railscasts.com/episodes/279-understanding-the-asset-pipeline

• Http Streaming
 • railscasts.com/episodes/266-http-streaming
Windycityrails page performance
Html 5 is a big deal!
• More tags and native behavior
• Native form elements
• Client side Validation
• http://slides.html5rocks.com
• http://mrdoob.com/91/Ball_Pool
• http://bodybrowser.googlelabs.com
• http://www.chromeexperiments.com/
Mobile
Mobile
• Good for ‘desktop’ and mobile
Mobile
• Good for ‘desktop’ and mobile

    • Reduce network calls
Mobile
• Good for ‘desktop’ and mobile

    • Reduce network calls

    • Only load what you need
Mobile
• Good for ‘desktop’ and mobile

    • Reduce network calls

    • Only load what you need

    • Cache as much as you can (HTML5 AppCache)
Mobile
• Good for ‘desktop’ and mobile

    • Reduce network calls

    • Only load what you need

    • Cache as much as you can (HTML5 AppCache)

• Specific to mobile
Mobile
• Good for ‘desktop’ and mobile

    • Reduce network calls

    • Only load what you need

    • Cache as much as you can (HTML5 AppCache)

• Specific to mobile

    • Javascript is roughly 10X slower on mobile
Mobile
• Good for ‘desktop’ and mobile

    • Reduce network calls

    • Only load what you need

    • Cache as much as you can (HTML5 AppCache)

• Specific to mobile

    • Javascript is roughly 10X slower on mobile

    • Click events delay for 300-500ms, use touch instead
Mobile
• Good for ‘desktop’ and mobile

    • Reduce network calls

    • Only load what you need

    • Cache as much as you can (HTML5 AppCache)

• Specific to mobile

    • Javascript is roughly 10X slower on mobile

    • Click events delay for 300-500ms, use touch instead

    • Smaller Cache (IOS only caches pages under 25kb
      unzipped)
Browser references
http://developer.yahoo.com/yslow/
http://code.google.com/speed
http://ajax.dynatrace.com
Webpagetest.org
http://ajaxian.com/archives/when-does-javascript-trigger-
reflows-and-rendering
jQuery

• http://addyosmani.com/jqprovenperformance
• http://www.learningjquery.com/2010/05/now-
  you-see-me-showhide-performance
• http://www.learningjquery.com/2009/03/43439-
  reasons-to-use-append-correctly
javascript

•   Find a mentor: http://jsmentors.com

•   play around: http://jsfiddle.net/addyosmani/BFeMN

•   run tests and share them: jsperf.com

•   speed of different tools: dante.dojotoolkit.org/taskspeed
Thank You!

 Any Questions?

 railsperformance.blogspot.com
railsperformance@gmail.com
         @J_McCaffrey

Weitere ähnliche Inhalte

Was ist angesagt?

2010 11 pubcon_hendison_wordpress
2010 11 pubcon_hendison_wordpress2010 11 pubcon_hendison_wordpress
2010 11 pubcon_hendison_wordpressshendison
 
How NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscapeHow NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscapeRadosław Scheibinger
 
2010 11 pubcon_hendison-hosting
2010 11 pubcon_hendison-hosting2010 11 pubcon_hendison-hosting
2010 11 pubcon_hendison-hostingshendison
 
My Website Can Vote - The Challenges of Maintaining a 20-year-old Website
My Website Can Vote - The Challenges of Maintaining a 20-year-old WebsiteMy Website Can Vote - The Challenges of Maintaining a 20-year-old Website
My Website Can Vote - The Challenges of Maintaining a 20-year-old WebsiteKristine Howard
 
Seven Jobs You Should Be Running #sqlsat126
Seven Jobs You Should Be Running #sqlsat126Seven Jobs You Should Be Running #sqlsat126
Seven Jobs You Should Be Running #sqlsat126Mike Hillwig
 
Untangling spring week11
Untangling spring week11Untangling spring week11
Untangling spring week11Derek Jacoby
 
A tale of 3 databases
A tale of 3 databasesA tale of 3 databases
A tale of 3 databasesChris Skardon
 
Contributing to rails
Contributing to railsContributing to rails
Contributing to railsLukas Eppler
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman
 
Performance - When, What and How
Performance - When, What and HowPerformance - When, What and How
Performance - When, What and HowAstrails
 
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...Geoff Varosky
 
Untangling - fall2017 - week 8
Untangling - fall2017 - week 8Untangling - fall2017 - week 8
Untangling - fall2017 - week 8Derek Jacoby
 
Untangling spring week6
Untangling spring week6Untangling spring week6
Untangling spring week6Derek Jacoby
 
Angular js recommended practices - mini
Angular js   recommended practices - miniAngular js   recommended practices - mini
Angular js recommended practices - miniRasheed Waraich
 
In-house web automation?
In-house web automation?In-house web automation?
In-house web automation?Adam Christian
 
Python to go
Python to goPython to go
Python to goWeng Wei
 
Flexible UI Components for a Multi-Framework World
Flexible UI Components for a Multi-Framework WorldFlexible UI Components for a Multi-Framework World
Flexible UI Components for a Multi-Framework WorldKevin Ball
 
AWS Users Meetup April 2015
AWS Users Meetup April 2015AWS Users Meetup April 2015
AWS Users Meetup April 2015Jervin Real
 

Was ist angesagt? (20)

2010 11 pubcon_hendison_wordpress
2010 11 pubcon_hendison_wordpress2010 11 pubcon_hendison_wordpress
2010 11 pubcon_hendison_wordpress
 
How NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscapeHow NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscape
 
2010 11 pubcon_hendison-hosting
2010 11 pubcon_hendison-hosting2010 11 pubcon_hendison-hosting
2010 11 pubcon_hendison-hosting
 
My Website Can Vote - The Challenges of Maintaining a 20-year-old Website
My Website Can Vote - The Challenges of Maintaining a 20-year-old WebsiteMy Website Can Vote - The Challenges of Maintaining a 20-year-old Website
My Website Can Vote - The Challenges of Maintaining a 20-year-old Website
 
Seven Jobs You Should Be Running #sqlsat126
Seven Jobs You Should Be Running #sqlsat126Seven Jobs You Should Be Running #sqlsat126
Seven Jobs You Should Be Running #sqlsat126
 
Untangling spring week11
Untangling spring week11Untangling spring week11
Untangling spring week11
 
A tale of 3 databases
A tale of 3 databasesA tale of 3 databases
A tale of 3 databases
 
Contributing to rails
Contributing to railsContributing to rails
Contributing to rails
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
 
Performance - When, What and How
Performance - When, What and HowPerformance - When, What and How
Performance - When, What and How
 
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
 
Untangling - fall2017 - week 8
Untangling - fall2017 - week 8Untangling - fall2017 - week 8
Untangling - fall2017 - week 8
 
Untangling spring week6
Untangling spring week6Untangling spring week6
Untangling spring week6
 
Angular js recommended practices - mini
Angular js   recommended practices - miniAngular js   recommended practices - mini
Angular js recommended practices - mini
 
In-house web automation?
In-house web automation?In-house web automation?
In-house web automation?
 
Python to go
Python to goPython to go
Python to go
 
A Day of REST
A Day of RESTA Day of REST
A Day of REST
 
Flexible UI Components for a Multi-Framework World
Flexible UI Components for a Multi-Framework WorldFlexible UI Components for a Multi-Framework World
Flexible UI Components for a Multi-Framework World
 
AWS Users Meetup April 2015
AWS Users Meetup April 2015AWS Users Meetup April 2015
AWS Users Meetup April 2015
 

Ähnlich wie Windycityrails page performance

Progressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesProgressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesDigitally
 
EscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend OptimizationEscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend OptimizationJonathan Klein
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesMaximiliano Firtman
 
Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Daniel Friedman
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapJosh Jeffryes
 
My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013hernanibf
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Adam Dunford
 
Rails Performance Tricks and Treats
Rails Performance Tricks and TreatsRails Performance Tricks and Treats
Rails Performance Tricks and TreatsMarshall Yount
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)Jia Mi
 
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...John McCaffrey
 
My site is slow
My site is slowMy site is slow
My site is slowhernanibf
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebChris Canal
 
Build your own analytics power tools
Build your own analytics power toolsBuild your own analytics power tools
Build your own analytics power toolsAlban Gérôme
 
Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...Peter Gfader
 
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJSSrijan Technologies
 
11 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 201411 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 2014WordPressBrisbane
 
Page Performance
Page PerformancePage Performance
Page Performanceatorreno
 

Ähnlich wie Windycityrails page performance (20)

Progressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesProgressively Enhancing WordPress Themes
Progressively Enhancing WordPress Themes
 
EscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend OptimizationEscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend Optimization
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
 
My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013My Site is slow - Drupal Camp London 2013
My Site is slow - Drupal Camp London 2013
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
Rails Performance Tricks and Treats
Rails Performance Tricks and TreatsRails Performance Tricks and Treats
Rails Performance Tricks and Treats
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
 
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
 
My site is slow
My site is slowMy site is slow
My site is slow
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
 
Build your own analytics power tools
Build your own analytics power toolsBuild your own analytics power tools
Build your own analytics power tools
 
Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...Silverlight vs HTML5 - Lessons learned from the real world...
Silverlight vs HTML5 - Lessons learned from the real world...
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
 
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
 
11 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 201411 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 2014
 
Page Performance
Page PerformancePage Performance
Page Performance
 
Html5 public
Html5 publicHtml5 public
Html5 public
 

Kürzlich hochgeladen

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 

Kürzlich hochgeladen (20)

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 

Windycityrails page performance

  • 1. Faster Page Performance John McCaffrey @J_McCaffrey http://spkr8.com/t/8314
  • 2. Agenda • Intro • Performance 101 • Performance tuning workflow • Performance features in Rails 3, 3.1 • Considerations for Mobile and HTML 5 • Q&A
  • 3. Intro • Doing Rails since 2007 • 4th time presenting at WindyCityRails o 2008: Advanced Firebug and JS unit testing o 2009: PDF Generation in Rails o 2010: Rails Performance Tuning o 2011: Faster Page Performance • Addicted to Performance Tuning • railsperformance.blogspot.com @J_McCaffrey • Feedback: speakerrate.com railsperformance@gmail.com
  • 4. Intro • Doing Rails since 2007 • 4th time presenting at WindyCityRails o 2008: Advanced Firebug and JS unit testing o 2009: PDF Generation in Rails o 2010: Rails Performance Tuning o 2011: Faster Page Performance • Addicted to Performance Tuning • railsperformance.blogspot.com @J_McCaffrey • Feedback: speakerrate.com railsperformance@gmail.com
  • 5. Intro • Doing Rails since 2007 • 4th time presenting at WindyCityRails o 2008: Advanced Firebug and JS unit testing o 2009: PDF Generation in Rails o 2010: Rails Performance Tuning o 2011: Faster Page Performance • Addicted to Performance Tuning • railsperformance.blogspot.com @J_McCaffrey • Feedback: speakerrate.com railsperformance@gmail.com
  • 7. Intro • A little about you, and the people around you
  • 8. Intro • A little about you, and the people around you • You are all smarter than I am
  • 9. Intro • A little about you, and the people around you • You are all smarter than I am • Try hard to Network today, meet cool people
  • 10. Intro • A little about you, and the people around you • You are all smarter than I am • Try hard to Network today, meet cool people • Eat lunch with someone new, invite someone into your ‘crowd’, go to the After Party!!
  • 11. Quick Poll • Work on a Rails application • Have been doing Rails for less than 6 months? 1yr? 2yrs? 4yrs? • Testing Rspec? cucumber? Test::Unit? CI? • Write Javascript frequently? jQuery? Prototype? js testing? • Working with Rails 3 or Rails 3.1 • Work on Mobile (native or web) • Working with HTML 5
  • 12. Quick Poll • Raise your hand if you Want to learn more • Stand up if you’d like to meet up with others and share what you’ve learned
  • 13. Quick Poll • Raise your hand if you Want to learn more • Stand up if you’d like to meet up with others and share what you’ve learned Don’t knock over your coffee!
  • 14. Help me, Help you!! • Improving page loading time • Sql query tuning, indexes or DB tuning • Rails 3 and 3.1 • HTML 5 and CSS 3 • NoSQL
  • 15. Introduce yourself (to someone new) Photo by @monty_ksycki
  • 16. Introduce yourself (to someone new) Photo by @monty_ksycki
  • 17. Introduce yourself (toyou’re from someone new) • Name & Where Photo by @monty_ksycki
  • 18. Introduce yourself (toyou’re from someone new) • Name & Where • Most important thing you want to get out of WindyCityRails Photo by @monty_ksycki
  • 19. Introduce yourself (toyou’re from someone new) • Name & Where • Most important thing you want to get out of WindyCityRails • Only 2mins for this!!!! Photo by @monty_ksycki
  • 20. Agenda • Intro • • Performance 101 Performance tuning workflow • Performance features in Rails 3, 3.1 • Considerations for Mobile and HTML 5
  • 27. So where do we start?
  • 28. Drop some knowledge "Premature optimization is the root of all evil" -Donald Knuth
  • 30. Is it premature? Effort vs Value • Gzip • Adding database indexes • Optimizing images • Try nginx (or trinidad)
  • 31. Measuring != Premature ‘Good Enough’ metrics • Avg response time • Server Load • Memory footprint • Slow queries • Load capacity
  • 33. Perf Tuning Pledge • “I will MEASURE before and after”
  • 34. Perf Tuning Pledge • “I will MEASURE before and after” • “I will document and share the findings”
  • 35. Perf Tuning Pledge • “I will MEASURE before and after” • “I will document and share the findings” • “WE will decide to monitor it, fix it, or just forget it”
  • 36. Agenda • Intro • Performance 101 • Performance tuning workflow • Performance features in Rails 3, 3.1 • Considerations for Mobile and HTML 5
  • 37. Perf tuning workflow • Page load • Application tuning • DB performance • Javascript • Architecture*
  • 39. Improving page load Yslow (Firefox and Chrome) http://developer.yahoo.com/yslow/ Page speed (Firefox and Chrome) http://code.google.com/speed Dynatrace (IE and Firefox) http://ajax.dynatrace.com Webpagetest.org (IE, Chrome, Firefox)
  • 40. Improving page load Yslow (Firefox and Chrome) http://developer.yahoo.com/yslow/ Page speed (Firefox and Chrome) http://code.google.com/speed Dynatrace (IE and Firefox) http://ajax.dynatrace.com Webpagetest.org (IE, Chrome, Firefox)
  • 41. Improving page load Yslow (Firefox and Chrome) http://developer.yahoo.com/yslow/ Page speed (Firefox and Chrome) http://code.google.com/speed Dynatrace (IE and Firefox) http://ajax.dynatrace.com Webpagetest.org (IE, Chrome, Firefox)
  • 42. Improving page load Yslow (Firefox and Chrome) http://developer.yahoo.com/yslow/ Page speed (Firefox and Chrome) http://code.google.com/speed Dynatrace (IE and Firefox) http://ajax.dynatrace.com Webpagetest.org (IE, Chrome, Firefox)
  • 43. Improving page load Yslow (Firefox and Chrome) http://developer.yahoo.com/yslow/ Page speed (Firefox and Chrome) http://code.google.com/speed Dynatrace (IE and Firefox) http://ajax.dynatrace.com Webpagetest.org (IE, Chrome, Firefox)
  • 44. Improving page load Yslow (Firefox and Chrome) http://developer.yahoo.com/yslow/ Page speed (Firefox and Chrome) http://code.google.com/speed Dynatrace (IE and Firefox) http://ajax.dynatrace.com Webpagetest.org (IE, Chrome, Firefox) 80-85% of the time is spent on the front-end
  • 45. Page load rules 1. Minimize HTTP Requests 2. Use a Content Delivery Network 3. Add an Expires or a Cache-Control Header 4. Gzip Components 5. Put StyleSheets at the Top 6. Put Scripts at the Bottom 7. Avoid CSS Expressions Steve Souders 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 10. Minify JavaScript and CSS 11. Avoid Redirects 12. Remove Duplicate Scripts 13. Configure ETags 14. Make AJAX Cacheable 15. Use GET for AJAX Requests 16. Reduce the Number of DOM Elements 17. No 404s 18. Reduce Cookie Size
  • 47. • Typically 80% of the browsers ‘effort’ is spent loading all the other stuff after the initial html
  • 52. Waterfall 101 Javascript execution is blocking the next download
  • 54. Waterfall 101 Css shouldn’t block, what’s going on here?
  • 55. Waterfall 101 <head> <title>base page</title> <link type="text/css" rel="stylesheet" href="http://tools.w3clubs.com/1.expires.css"> <!--[if IE 6 ]> <linktype="text/css" rel="stylesheet"href="http://tools.w3clubs.com/2.expires.css"> <![endif]--> </head> www.phpied.com/conditional-comments-block-downloads
  • 56. Waterfall 101 <!--[if IE]><![endif]--> <head> <html lang="en"> <title>base page</title> <head> type="text/css" rel="stylesheet" href="http://tools.w3clubs.com/1.expires.css"> <link <!--[if IE 6 page</title> <title>base ]> <link type="text/css" rel="stylesheet"href="http://tools.w3clubs.com/2.expires.css"> <linktype="text/css" rel="stylesheet" href="http://tools.w3clubs.com/1.expires.css"> <![endif]--> ]> <!--[if IE 6 <linktype="text/css" rel="stylesheet"href="http://tools.w3clubs.com/2.expires.css"> </head> <![endif]--> </head> www.phpied.com/conditional-comments-block-downloads
  • 57. Save your Waterfall! HTTP Archive format (HAR)
  • 58. Save your Waterfall! HTTP Archive format (HAR) • Export options www.softwareishard.com/blog/har-adopters • Firebug • IE9 • Chrome • Webpagetest.org • Har viewer www.softwareishard.com/har/viewer • Compare multiple files
  • 59. Save your Waterfall! HTTP Archive format (HAR) • Export options www.softwareishard.com/blog/har-adopters • Firebug • IE9 • Chrome • Webpagetest.org • Har viewer www.softwareishard.com/har/viewer • Compare multiple files Did I mention that its important to measure?
  • 60. Solutions • Gzip • Combine and minify js and css • Load css first, js at the bottom • Optimize images and use css sprites • Use a cdn for static assets • Defer javascript loading
  • 61. Deferred loading of javascript
  • 62. Deferred loading of javascript • Load only the minimum necessary javascript first • Load the rest of the javascript asynchronously • Pre-load and pre-cache javascript and images for the next pages
  • 63. Deferred loading of javascript • Load only the minimum necessary javascript first • Load the rest of the javascript asynchronously • Pre-load and pre-cache javascript and images for the next pages bit.ly/non-blocking-js www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking
  • 64. Leverage ✓ Those changes improve the performance across multiple requests ✓ Well tested, well understood ✓ Continues to be useful as new features are added, won’t get in your way
  • 65. Leverage ✓ Those changes improve the performance across multiple requests ✓ Well tested, well understood ✓ Continues to be useful as new features are added, won’t get in your way
  • 66. Perf tuning workflow • Page load • Application tuning • DB performance • Javascript
  • 68. Backend performance 2 seconds? What’s taking so long?
  • 69. Tools • Request log analyzer • Splunk • New Relic • Rack::Bug • Built in Benchmark and profiling tools
  • 71. What I’m looking for • What is the average response time • What is the slowest request • What request makes up the majority of the work the server is doing • Are there good candidates for caching?
  • 72. Common culprits • Not leveraging the database • Too much memory • Too many queries • Generally slow code • Loading more fields than needed
  • 73. N +1 clients = Client.limit(10) clients.each do |client| puts client.address.postcode end
  • 74. N +1 1 query to clients = Client.limit(10) load the clients clients.each do |client| puts client.address.postcode end
  • 75. N +1 1 query to clients = Client.limit(10) load the clients clients.each do |client| puts client.address.postcode end 1 query for each address (x10)
  • 76. N +1 1 query to clients = Client.limit(10) load the clients clients.each do |client| puts client.address.postcode end 1 query for each address (x10) clients = Client.includes(:address).limit(10) clients.each do |client| puts client.address.postcode end
  • 77. N +1 1 query to clients = Client.limit(10) load the clients clients.each do |client| puts client.address.postcode end 1 query to 1 query for each address (x10) load the clients clients = Client.includes(:address).limit(10) clients.each do |client| puts client.address.postcode end
  • 78. N +1 1 query to clients = Client.limit(10) load the clients clients.each do |client| puts client.address.postcode end 1 query to 1 query for each address (x10) load the clients clients = Client.includes(:address).limit(10) clients.each do |client| puts client.address.postcode end 1 query to get all 10 Addresses!
  • 80. Libraries • Document why you have it • Remove unused, reduce dependencies • Pick between duplicate tools • Try to stay current • Rvm, bundler and git branches for testing • “Is it safe to upgrade that library” - find the right balance of tests to answer this
  • 81. Perf tuning workflow • Page load • Application tuning • DB performance • Javascript
  • 82. DB Tuning • Slow Queries • Not enough server resources • Not balanced for Read/Write usage
  • 83. Tools • Rails log • Slow query log • launchpad.net/percona-toolkit • Explain • Server profiling (CPU, IO, Mem, etc)
  • 84. Explain Aggregate (cost=154115.13..154115.14 rows=1 width=4) (actual time=4760.885..4760.886 rows=1 loops=1) ->Nested Loop Left Join (cost=0.00..154115.11 rows=9 width=4) (actual time=3262.981..4760.794 rows=2) Join Filter:(parts.id = lines_bills.part_id) ->Nested Loop Left Join (cost=0.00..154100.44 rows=9 width=8) (actual time=3262.954..4760.608 rows=2) ->Nested Loop (cost=0.00..153983.24 rows=8 width=4) (actual time=3262.940..4760.574 rows=2 loops=1) ->Seq Scan on bills (cost=0.00..153822.17 rows=11 width=4) (actual time=3262.813..4760.361 rows=2) Filter:(((bill_type)::text = 'Personal'::text) AND (upper((ssn)::text) ~~ '%333901151%'::text)) ->Index Scan using lines_idx1 on lines (cost=0.00..14.63 rows=1 width=4) (actual time=0.093..0.094) Index Cond: (lines.bill_id = bills.id) Filter:((NOT lines.archived) AND ((lines.status)::text <> 'created'::text)) ->Index Scan using lines_idx1 on lines lines_bills (cost=0.00..14.62 rows=2 width=8) Index Cond:(lines_bills.bill_id = bills.id) ->Seq Scan on parts (cost=0.00..1.28 rows=28 width=4) (actual time=0.010..0.045 rows=30 loops=2) Total runtime: 4761.401 ms
  • 85. Explain Aggregate (cost=154115.13..154115.14 rows=1 width=4) (actual time=4760.885..4760.886 rows=1 loops=1) ->Nested Loop Left Join (cost=0.00..154115.11 rows=9 width=4) (actual time=3262.981..4760.794 rows=2) Join Filter:(parts.id = lines_bills.part_id) ->Nested Loop Left Join (cost=0.00..154100.44 rows=9 width=8) (actual time=3262.954..4760.608 rows=2) ->Nested Loop (cost=0.00..153983.24 rows=8 width=4) (actual time=3262.940..4760.574 rows=2 loops=1) ->Seq Scan on bills (cost=0.00..153822.17 rows=11 width=4) (actual time=3262.813..4760.361 rows=2) Filter:(((bill_type)::text = 'Personal'::text) AND (upper((ssn)::text) ~~ '%333901151%'::text)) ->Index Scan using lines_idx1 on lines (cost=0.00..14.63 rows=1 width=4) (actual time=0.093..0.094) Index Cond: (lines.bill_id = bills.id) Filter:((NOT lines.archived) AND ((lines.status)::text <> 'created'::text)) ->Index Scan using lines_idx1 on lines lines_bills (cost=0.00..14.62 rows=2 width=8) Index Cond:(lines_bills.bill_id = bills.id) ->Seq Scan on parts (cost=0.00..1.28 rows=28 width=4) (actual time=0.010..0.045 rows=30 loops=2) Total runtime: 4761.401 ms changed (upper(ssn) LIKE E'%123456789%') to (ssn LIKE E'123456789%') Total runtime: 7.579ms
  • 86. Explain Aggregate (cost=154115.13..154115.14 rows=1 width=4) (actual time=4760.885..4760.886 rows=1 loops=1) ->Nested Loop Left Join (cost=0.00..154115.11 rows=9 width=4) (actual time=3262.981..4760.794 rows=2) Join Filter:(parts.id = lines_bills.part_id) ->Nested Loop Left Join (cost=0.00..154100.44 rows=9 width=8) (actual time=3262.954..4760.608 rows=2) ->Nested Loop (cost=0.00..153983.24 rows=8 width=4) (actual time=3262.940..4760.574 rows=2 loops=1) ->Seq Scan on bills (cost=0.00..153822.17 rows=11 width=4) (actual time=3262.813..4760.361 rows=2) Filter:(((bill_type)::text = 'Personal'::text) AND (upper((ssn)::text) ~~ '%333901151%'::text)) ->Index Scan using lines_idx1 on lines (cost=0.00..14.63 rows=1 width=4) (actual time=0.093..0.094) Index Cond: (lines.bill_id = bills.id) Filter:((NOT lines.archived) AND ((lines.status)::text <> 'created'::text)) ->Index Scan using lines_idx1 on lines lines_bills (cost=0.00..14.62 rows=2 width=8) Index Cond:(lines_bills.bill_id = bills.id) ->Seq Scan on parts (cost=0.00..1.28 rows=28 width=4) (actual time=0.010..0.045 rows=30 loops=2) Total runtime: 4761.401 ms changed (upper(ssn) LIKE E'%123456789%') to (ssn LIKE E'123456789%') Total runtime: 7.579ms then to (ssn = E'123456789') Total runtime: 1.696ms
  • 88. Culprits • Too many queries • No indexes on the key data • Not optimized for how the db ‘thinks’ • Not enough server memory for sorting • Trying to do too much in one query
  • 90. Testing • Measure first! • Make performance tuning changes in the most tested parts of the app • Have the most important parts of your app well-tested, so tuning will be easier • Well-tested code tends to be well factored
  • 91. Perf tuning workflow • Page load • Application tuning • DB performance • Javascript
  • 93. Javascript is powerful • Most hate for javascript is really a hatred of the browser and DOM interaction
  • 94. Javascript is powerful • Most hate for javascript is really a hatred of the browser and DOM interaction • Javascript is driving a lot of very cool things
  • 95. Javascript is powerful • Most hate for javascript is really a hatred of the browser and DOM interaction • Javascript is driving a lot of very cool things • Node.js
  • 96. Javascript is powerful • Most hate for javascript is really a hatred of the browser and DOM interaction • Javascript is driving a lot of very cool things • Node.js • Backbone
  • 97. Javascript is powerful • Most hate for javascript is really a hatred of the browser and DOM interaction • Javascript is driving a lot of very cool things • Node.js • Backbone • sproutCore
  • 98. High performance js • UI thread is responsible for js and UI updates • Understand Repaint and Reflow triggers • Benchmarks for browser performance • Dom Scripting • Memory and cpu usage
  • 99. Javascript profiling • Dynatrace • Google Speed tracer • Firebug profiler
  • 100. Dynatrace Ajax (IE and Firefox) http://blog.dynatrace.com/2010/07/22/ie-compatibility-view-how-to-identify-performance- problems-between-ie-versions/
  • 101. Dynatrace Ajax (IE and Firefox) http://blog.dynatrace.com/2010/07/22/ie-compatibility-view-how-to-identify-performance- problems-between-ie-versions/
  • 104. jQuery Top Issues • Poor selector usage • $(‘#Id, form, input’) Id and element are fast • $(‘.classname’) causes full scan in IE5-8
  • 105. jQuery Top Issues • Poor selector usage • $(‘#Id, form, input’) Id and element are fast • $(‘.classname’) causes full scan in IE5-8 • show() and hide() often slower than .addClass(“show”) or .addClass(“hide”)
  • 106. jQuery Top Issues • Poor selector usage • $(‘#Id, form, input’) Id and element are fast • $(‘.classname’) causes full scan in IE5-8 • show() and hide() often slower than .addClass(“show”) or .addClass(“hide”) • .each() often slower than regular ‘for’ loop
  • 107. jQuery Top Issues • Poor selector usage • $(‘#Id, form, input’) Id and element are fast • $(‘.classname’) causes full scan in IE5-8 • show() and hide() often slower than .addClass(“show”) or .addClass(“hide”) • .each() often slower than regular ‘for’ loop • Avoid extra queries by caching selector
  • 108. jQuery Top Issues • Poor selector usage • $(‘#Id, form, input’) Id and element are fast • $(‘.classname’) causes full scan in IE5-8 • show() and hide() often slower than .addClass(“show”) or .addClass(“hide”) • .each() often slower than regular ‘for’ loop • Avoid extra queries by caching selector • Avoid manipulating the Dom in a loop, try to append all at once (with a wrapping element)
  • 110. Browser Comparison • jsperf.com • Compare js performance across browsers • http://jsperf.com/queryselectorall-vs- getelementsbytagname
  • 111. Browser Comparison • jsperf.com • Compare js performance across browsers • http://jsperf.com/queryselectorall-vs- getelementsbytagname • jsfiddle.net (full page structure) • http://jsfiddle.net/addyosmani/BFeMN/
  • 112. Browser Comparison • jsperf.com • Compare js performance across browsers • http://jsperf.com/queryselectorall-vs- getelementsbytagname • jsfiddle.net (full page structure) • http://jsfiddle.net/addyosmani/BFeMN/ These tools make benchmarks easier and repeatable
  • 113. Agenda • Intro • Performance 101 • Performance tuning workflow • Performance features in Rails 3, 3.1 • Considerations for Mobile and HTML 5
  • 114. Performance features in Rails 3 • Separation of framework, only load what you need • New Active Record Arel query structure • http://www.slideshare.net/tenderlove/zomg-why- is-this-code-so-slow • Bundler • Ruby 1.9.2 (with patch for faster Rails 3 load)
  • 116. Performance features in Rails 3.1 • JQuery by default
  • 117. Performance features in Rails 3.1 • JQuery by default • Prepared statement caching
  • 118. Performance features in Rails 3.1 • JQuery by default • Prepared statement caching • New Asset Pipeline
  • 119. Performance features in Rails 3.1 • JQuery by default • Prepared statement caching • New Asset Pipeline • railscasts.com/episodes/279-understanding-the-asset-pipeline
  • 120. Performance features in Rails 3.1 • JQuery by default • Prepared statement caching • New Asset Pipeline • railscasts.com/episodes/279-understanding-the-asset-pipeline • Http Streaming
  • 121. Performance features in Rails 3.1 • JQuery by default • Prepared statement caching • New Asset Pipeline • railscasts.com/episodes/279-understanding-the-asset-pipeline • Http Streaming • railscasts.com/episodes/266-http-streaming
  • 123. Html 5 is a big deal! • More tags and native behavior • Native form elements • Client side Validation • http://slides.html5rocks.com • http://mrdoob.com/91/Ball_Pool • http://bodybrowser.googlelabs.com • http://www.chromeexperiments.com/
  • 124. Mobile
  • 125. Mobile • Good for ‘desktop’ and mobile
  • 126. Mobile • Good for ‘desktop’ and mobile • Reduce network calls
  • 127. Mobile • Good for ‘desktop’ and mobile • Reduce network calls • Only load what you need
  • 128. Mobile • Good for ‘desktop’ and mobile • Reduce network calls • Only load what you need • Cache as much as you can (HTML5 AppCache)
  • 129. Mobile • Good for ‘desktop’ and mobile • Reduce network calls • Only load what you need • Cache as much as you can (HTML5 AppCache) • Specific to mobile
  • 130. Mobile • Good for ‘desktop’ and mobile • Reduce network calls • Only load what you need • Cache as much as you can (HTML5 AppCache) • Specific to mobile • Javascript is roughly 10X slower on mobile
  • 131. Mobile • Good for ‘desktop’ and mobile • Reduce network calls • Only load what you need • Cache as much as you can (HTML5 AppCache) • Specific to mobile • Javascript is roughly 10X slower on mobile • Click events delay for 300-500ms, use touch instead
  • 132. Mobile • Good for ‘desktop’ and mobile • Reduce network calls • Only load what you need • Cache as much as you can (HTML5 AppCache) • Specific to mobile • Javascript is roughly 10X slower on mobile • Click events delay for 300-500ms, use touch instead • Smaller Cache (IOS only caches pages under 25kb unzipped)
  • 134. jQuery • http://addyosmani.com/jqprovenperformance • http://www.learningjquery.com/2010/05/now- you-see-me-showhide-performance • http://www.learningjquery.com/2009/03/43439- reasons-to-use-append-correctly
  • 135. javascript • Find a mentor: http://jsmentors.com • play around: http://jsfiddle.net/addyosmani/BFeMN • run tests and share them: jsperf.com • speed of different tools: dante.dojotoolkit.org/taskspeed
  • 136. Thank You! Any Questions? railsperformance.blogspot.com railsperformance@gmail.com @J_McCaffrey

Hinweis der Redaktion

  1. \n
  2. \n
  3. love making apps faster\nIf I don&amp;#x2019;t cover the thing you are looking for, come find me, twitter\n
  4. love making apps faster\nIf I don&amp;#x2019;t cover the thing you are looking for, come find me, twitter\n
  5. picture of windy city audience that I took in 2009\n\nYou all have had different experiences, and there are others here today that you can share with, and can share with you. The value of a conference is partially in the presentations, but mostly in the networking.\nIf you play your cards right, you&amp;#x2019;ll probably meet 2-3 people that will give you useful info today, and another 2-3 people that will give you critical info in the next 2-3 months\n\nThere are a lot of smart people in here, take the time to meet them. \nTake the time to meet some new people, eat lunch with a different crowd, step out of your comfort zone\ntrust me, you&amp;#x2019;ll get a lot more out of the conference if you do\n
  6. picture of windy city audience that I took in 2009\n\nYou all have had different experiences, and there are others here today that you can share with, and can share with you. The value of a conference is partially in the presentations, but mostly in the networking.\nIf you play your cards right, you&amp;#x2019;ll probably meet 2-3 people that will give you useful info today, and another 2-3 people that will give you critical info in the next 2-3 months\n\nThere are a lot of smart people in here, take the time to meet them. \nTake the time to meet some new people, eat lunch with a different crowd, step out of your comfort zone\ntrust me, you&amp;#x2019;ll get a lot more out of the conference if you do\n
  7. picture of windy city audience that I took in 2009\n\nYou all have had different experiences, and there are others here today that you can share with, and can share with you. The value of a conference is partially in the presentations, but mostly in the networking.\nIf you play your cards right, you&amp;#x2019;ll probably meet 2-3 people that will give you useful info today, and another 2-3 people that will give you critical info in the next 2-3 months\n\nThere are a lot of smart people in here, take the time to meet them. \nTake the time to meet some new people, eat lunch with a different crowd, step out of your comfort zone\ntrust me, you&amp;#x2019;ll get a lot more out of the conference if you do\n
  8. picture of windy city audience that I took in 2009\n\nYou all have had different experiences, and there are others here today that you can share with, and can share with you. The value of a conference is partially in the presentations, but mostly in the networking.\nIf you play your cards right, you&amp;#x2019;ll probably meet 2-3 people that will give you useful info today, and another 2-3 people that will give you critical info in the next 2-3 months\n\nThere are a lot of smart people in here, take the time to meet them. \nTake the time to meet some new people, eat lunch with a different crowd, step out of your comfort zone\ntrust me, you&amp;#x2019;ll get a lot more out of the conference if you do\n
  9. Raise your hand: Who thinks audience participation is lame?\n\nTrust me, this is a good warm up, and it won&amp;#x2019;t take long\nEveryone Hands up, \nOk hands down\n
  10. Of those people that have tried these things, let&amp;#x2019;s see if we can find a few that might be ok with sharing what they&amp;#x2019;ve learned. Find them out in the hallways and get to know them\n\nDon&amp;#x2019;t knock over your coffee\n
  11. &amp;#x201C;Raise your hand if you want to learn more about&amp;#x201D;\n&amp;#x201C;Stand up if you feel you know something about this, and wouldn&amp;#x2019;t mind chatting about it and sharing what you&amp;#x2019;ve learned&amp;#x201D;\n\n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. When we talk about performance tuning, we are not just talking about slow apps that need to be fixed, we are also talking about &amp;#x2018;normal&amp;#x2019; apps that are tuned to really fly.\n\n1 sec delay, on 100k a day could lead to 2.5mil lost\nWe&amp;#x2019;re talking about cost and value\n
  18. 100ms faster lead to 1% increase in revenue for amazon\n400ms faster lead to 9% increase in traffic (more traffic, more ads, more eyeballs)\n\n
  19. went from 6sec to 1.2\nsped up development and deployment \nand consolidated hardware\n
  20. \n
  21. They tell others about their bad experience, &amp;#x201C;That&amp;#x2019;s not the kind of &amp;#x2018;viral&amp;#x2019; message you want&amp;#x201D;\n\nPage performance is in the mind and behaviors of real users\n
  22. \n
  23. \n
  24. talk about cost and value\npremature opt. is usually high upfront cost with low long term value\nlooking for low upfront cost, low long-term cost, high long term value\n\nleverage\nthings that will improve more requests, or improve more frequently called\n\nDon&amp;#x2019;t go back to your project and make a bunch of changes in the name of Performance\n
  25. talk about cost and value\npremature opt. is usually high upfront cost with low long term value\nlooking for low upfront cost, low long-term cost, high long term value\n\nleverage\nthings that will improve more requests, or improve more frequently called\n\nDon&amp;#x2019;t go back to your project and make a bunch of changes in the name of Performance\n
  26. Measuring and monitoring is not premature, go for good enough measuring\n\nWe should know these things about our apps\n
  27. Make it easy for the team to track general performance numbers\ncommit message should read I saw that this was taking x amount of time, so I changed it. now it takes Y\n
  28. Make it easy for the team to track general performance numbers\ncommit message should read I saw that this was taking x amount of time, so I changed it. now it takes Y\n
  29. Make it easy for the team to track general performance numbers\ncommit message should read I saw that this was taking x amount of time, so I changed it. now it takes Y\n
  30. \n
  31. I got feedback from several people that they would like me to cover the general flow and hotspots.\nI&amp;#x2019;m going to go over my basic workflow, referencing some of the tools I use and what I look for\n
  32. These tools analyze your page and give you some hints at how to improve the page loading time for first time and repeat visitors\nThey are definitely the first thing you should do, even if you think you &amp;#x2018;know&amp;#x2019; what the real problem is, these tools will confirm it, and allow you and the rest of the team to measure performance over time.\n\nIts important to use tools/instrumentation that everyone on the team has visibility to.\nYou&amp;#x2019;ll have less arguments about performance impacts if you can teach them how to measure\n
  33. These tools analyze your page and give you some hints at how to improve the page loading time for first time and repeat visitors\nThey are definitely the first thing you should do, even if you think you &amp;#x2018;know&amp;#x2019; what the real problem is, these tools will confirm it, and allow you and the rest of the team to measure performance over time.\n\nIts important to use tools/instrumentation that everyone on the team has visibility to.\nYou&amp;#x2019;ll have less arguments about performance impacts if you can teach them how to measure\n
  34. These tools analyze your page and give you some hints at how to improve the page loading time for first time and repeat visitors\nThey are definitely the first thing you should do, even if you think you &amp;#x2018;know&amp;#x2019; what the real problem is, these tools will confirm it, and allow you and the rest of the team to measure performance over time.\n\nIts important to use tools/instrumentation that everyone on the team has visibility to.\nYou&amp;#x2019;ll have less arguments about performance impacts if you can teach them how to measure\n
  35. These tools analyze your page and give you some hints at how to improve the page loading time for first time and repeat visitors\nThey are definitely the first thing you should do, even if you think you &amp;#x2018;know&amp;#x2019; what the real problem is, these tools will confirm it, and allow you and the rest of the team to measure performance over time.\n\nIts important to use tools/instrumentation that everyone on the team has visibility to.\nYou&amp;#x2019;ll have less arguments about performance impacts if you can teach them how to measure\n
  36. These tools analyze your page and give you some hints at how to improve the page loading time for first time and repeat visitors\nThey are definitely the first thing you should do, even if you think you &amp;#x2018;know&amp;#x2019; what the real problem is, these tools will confirm it, and allow you and the rest of the team to measure performance over time.\n\nIts important to use tools/instrumentation that everyone on the team has visibility to.\nYou&amp;#x2019;ll have less arguments about performance impacts if you can teach them how to measure\n
  37. These tools analyze your page and give you some hints at how to improve the page loading time for first time and repeat visitors\nThey are definitely the first thing you should do, even if you think you &amp;#x2018;know&amp;#x2019; what the real problem is, these tools will confirm it, and allow you and the rest of the team to measure performance over time.\n\nIts important to use tools/instrumentation that everyone on the team has visibility to.\nYou&amp;#x2019;ll have less arguments about performance impacts if you can teach them how to measure\n
  38. maybe you want to break the rules and optimize for repeat over new users\ndescribe the groupings\nless network calls\nless data\nleverage how the browser works (ordering, host limit, rendering, etc)\nnow sometimes you want to intentionally break the rules\noptimize for repeat over new users\n\n
  39. Dark green = DNS lookup (there is such a thing as bad dns)\nOrange = TCP connection handshake (shows you the cost of making all those requests)\nBright Green = Time to first byte coming back (shows you how long the server was thinking)\nBlue = content download (how long it all took)\n\n
  40. orange bars: cost of handshake, turn on &amp;#x2018;keep-alives&amp;#x2019;, load less\nlong bright green bars: waiting for first byte, maybe a CDN would help\nlong blue bars: long time to load the data, slow server IO, slow network, lost packets\n\n
  41. This is from chrome, the tan is blocking\nwhen js is running, nothing else can update\n
  42. This is from chrome, the tan is blocking\nwhen js is running, nothing else can update\n
  43. This is from chrome, the tan is blocking\nwhen js is running, nothing else can update\n
  44. This is from chrome, the tan is blocking\nwhen js is running, nothing else can update\n
  45. If you load conditional comments for IE stylesheets, check this article, look at your waterfall for IE\nthe workaround is to put an empty conditional comment after the doctype, or before other includes\n
  46. If you load conditional comments for IE stylesheets, check this article, look at your waterfall for IE\nthe workaround is to put an empty conditional comment after the doctype, or before other includes\n
  47. If you load conditional comments for IE stylesheets, check this article, look at your waterfall for IE\nthe workaround is to put an empty conditional comment after the doctype, or before other includes\n
  48. If you load conditional comments for IE stylesheets, check this article, look at your waterfall for IE\nthe workaround is to put an empty conditional comment after the doctype, or before other includes\n
  49. If you load conditional comments for IE stylesheets, check this article, look at your waterfall for IE\nthe workaround is to put an empty conditional comment after the doctype, or before other includes\n
  50. If you load conditional comments for IE stylesheets, check this article, look at your waterfall for IE\nthe workaround is to put an empty conditional comment after the doctype, or before other includes\n
  51. If you load conditional comments for IE stylesheets, check this article, look at your waterfall for IE\nthe workaround is to put an empty conditional comment after the doctype, or before other includes\n
  52. Save your har file regularly, and load it up to see what&amp;#x2019;s going on\nThere are browser differences in what gets loaded, and when, so keep track of what you did.\nexample of &amp;#x2018;good enough&amp;#x2019; measurement\nhttp://www.softwareishard.com/har/viewer/ \nyou can drag multiple har files and compare them\nhttp://www.softwareishard.com/blog/har-adopters/ list of har adopters\nyou can download and run it locally if you want to\n
  53. Save your har file regularly, and load it up to see what&amp;#x2019;s going on\nThere are browser differences in what gets loaded, and when, so keep track of what you did.\nexample of &amp;#x2018;good enough&amp;#x2019; measurement\nhttp://www.softwareishard.com/har/viewer/ \nyou can drag multiple har files and compare them\nhttp://www.softwareishard.com/blog/har-adopters/ list of har adopters\nyou can download and run it locally if you want to\n
  54. tools like jammit, sprockets to help\ntouch on Rails 3.1 asset pipeline\n\n\n\n\n
  55. the single most important performance coding pattern for today&apos;s websites is to load js async\nhttp://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/\n\nImage of Steve Souders looking up at the quote\ndifferent techniques\ngmail technique\n\nThis deserves more attention\nThis can be used in conjunction with generic, cacheable base pages\n
  56. the single most important performance coding pattern for today&apos;s websites is to load js async\nhttp://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/\n\nImage of Steve Souders looking up at the quote\ndifferent techniques\ngmail technique\n\nThis deserves more attention\nThis can be used in conjunction with generic, cacheable base pages\n
  57. the single most important performance coding pattern for today&apos;s websites is to load js async\nhttp://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/\n\nImage of Steve Souders looking up at the quote\ndifferent techniques\ngmail technique\n\nThis deserves more attention\nThis can be used in conjunction with generic, cacheable base pages\n
  58. The hallmarks of the &amp;#x2018;sweet spot&amp;#x2019;\nYour servers and network are doing less work, freeing it up to do something else\nThe client&amp;#x2019;s browser is doing less work\nrun these tools against your app, and save your har file, to keep an eye on trends\n
  59. \n
  60. \n
  61. \n
  62. \n
  63. Its ok for some requests to be slow, month-end reporting, etc\nLooking for consistency, \nhow long has this been happening\ncan I reproduce it on the production server, and can I reproduce it locally\n\nlower level\nwhat is the memory footprint\nis it the code, db, or partials that is taking so long?\n
  64. a few examples from itest, where pagination call was in the wrong spot\n\nauthors.posts.comments \ntoo much ruby\ntoo many queries\n\nThere is a cost to have all of the fields loaded, both from a memory footprint stand point, and a datatype conversion. \nIf all you are doing is a readonly view of the object, use :select to narrow to just the part you care about\n
  65. http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n&amp;#xA0;&amp;#xA0;WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  66. http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n&amp;#xA0;&amp;#xA0;WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  67. http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n&amp;#xA0;&amp;#xA0;WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  68. http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n&amp;#xA0;&amp;#xA0;WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  69. http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n&amp;#xA0;&amp;#xA0;WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  70. http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n&amp;#xA0;&amp;#xA0;WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  71. http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n&amp;#xA0;&amp;#xA0;WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  72. http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n&amp;#xA0;&amp;#xA0;WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  73. http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n&amp;#xA0;&amp;#xA0;WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  74. You can tell what railscasts were popular when a rails project was created, its like rings on a tree\n\nActs_as_tree, acts_as_list, acts_as_state_machine all provide awesome functionality, but the design is an abstraction to handle most cases. You have to look at your particular case to see what the best solution is\nGems and plugins add to the memory footprint even if you don&amp;#x2019;t call the code. \nuse Rvm, git branches, bundler to test\nnewer versions of libraries\nnewer versions of Rails\nNewer versions of Ruby\nSet up a &amp;#x2018;profiling&amp;#x2019; branch with\nrack bug\nquery-trace\nmetric-fu\nyou might even play around with jruby, and use some of the profiling tools of the JVM\n
  75. \n
  76. After doing the page load improvements, db query tuning, and indexes is usually where I make the biggest impact\n\nMost apps are heavy read, but we often chose to run calculations and lookups at read time.\n\nOne approach is to segment or shard the data, the system runs the same queries, but the underlying access plan is different\nshard by customer\npartition by date, etc\n
  77. I&amp;#x2019;ve seen issues where its a 32bit mysql running on 64 bit\n\nhttp://www.mysqlperformanceblog.com/2008/07/25/the-1-mistake-hosting-providers-make-for-mysql-servers/\n
  78. Shows me the total time\nsequential scans and index scans\nand where the time was spent\nI chopped this one a bit to fit on the slide, the real one is here http://explain.depesz.com/s/cRm\n
  79. Shows me the total time\nsequential scans and index scans\nand where the time was spent\nI chopped this one a bit to fit on the slide, the real one is here http://explain.depesz.com/s/cRm\n
  80. In rails I don&amp;#x2019;t see the last one as much, but sometimes its just much faster to do one query to get all the ids, and another query to select on those ids. You just have to try it and see what&amp;#x2019;s fastest (with prod data)\n
  81. sweet spot effort vs. cost\nwell-factored code usually reduces dependencies and duplication\n\n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. single threaded\n\n
  89. http://www.html5rocks.com/en/tutorials/speed/html5/#toc-js-profiling\n
  90. \n
  91. \n
  92. We realize the benefits of using javascript MVC design\nbackbone, sproutcore,\n
  93. We realize the benefits of using javascript MVC design\nbackbone, sproutcore,\n
  94. We realize the benefits of using javascript MVC design\nbackbone, sproutcore,\n
  95. We realize the benefits of using javascript MVC design\nbackbone, sproutcore,\n
  96. We realize the benefits of using javascript MVC design\nbackbone, sproutcore,\n
  97. You&amp;#x2019;ve found the issue, now try to test it on other browsers, share it\n
  98. You&amp;#x2019;ve found the issue, now try to test it on other browsers, share it\n
  99. You&amp;#x2019;ve found the issue, now try to test it on other browsers, share it\n
  100. \n
  101. \n
  102. Identity map\n
  103. Identity map\n
  104. Identity map\n
  105. Identity map\n
  106. Identity map\n
  107. Identity map\n
  108. \n
  109. refer to items from google io conf.\nangry birds\nthat song video\n\ncss3 spiderman and other cool things\n\nGPU hardware acceleration: layout, CSS3 transitions, 3D transforms\nanimations can be done faster and look better\n
  110. http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  111. http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  112. http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  113. http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  114. http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  115. http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  116. http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  117. http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  118. \n
  119. \n
  120. \n
  121. \n