Windycityrails page performance

Faster Page Performance John McCaffrey @J_McCaffreyhttp://spkr8.com/t/8314

Agenda• Intro• Performance 101• Performance tuning workﬂow• 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• 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 (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 workﬂow• Performance features in Rails 3, 3.1• Considerations for Mobile and HTML 5

Performance Matterswww.strangeloopnetworks.com/web‐performance‐op4miza4on‐hub

Perf. statisticswww.strangeloopnetworks.com/web‐performance‐op4miza4on‐hub

Increased revenue 12%

http://blog.kissmetrics.com/loading-time/

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 ﬁndings”

Perf Tuning Pledge• “I will MEASURE before and after”• “I will document and share the ﬁndings”• “WE will decide to monitor it, ﬁx it, or just forget it”

Agenda• Intro• Performance 101• Performance tuning workﬂow• Performance features in Rails 3, 3.1• Considerations for Mobile and HTML 5

Perf tuning workﬂow• 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)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 ExpressionsSteve 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 101Javascript execution is blocking the next download

Waterfall 101

Waterfall 101Css 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"> </head> www.phpied.com/conditional-comments-block-downloads

Waterfall 101<head><html lang="en"> <title>base page</title><head> type="text/css" rel="stylesheet" href="http://tools.w3clubs.com/1.expires.css"> <link  ]> </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 ﬁles

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 ﬁlesDid I mention that its important to measure?

Solutions• Gzip• Combine and minify js and css• Load css ﬁrst, 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 ﬁrst• 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 ﬁrst• Load the rest of the javascript asynchronously• Pre-load and pre-cache javascript and images for the next pages bit.ly/non-blocking-jswww.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

Perf tuning workﬂow• 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 proﬁling 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 ﬁelds than needed

N +1clients = Client.limit(10) clients.each do |client| puts client.address.postcodeend

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” - ﬁnd the right balance of tests to answer this

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 proﬁling (CPU, IO, Mem, etc)

ExplainAggregate (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

ExplainAggregate (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 mschanged (upper(ssn) LIKE E%123456789%)to (ssn LIKE E123456789%) Total runtime: 7.579ms

ExplainAggregate (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 mschanged (upper(ssn) LIKE E%123456789%)to (ssn LIKE E123456789%) Total runtime: 7.579msthen to (ssn = E123456789) 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 ﬁrst!• 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

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 Reﬂow triggers• Benchmarks for browser performance• Dom Scripting• Memory and cpu usage

Javascript proﬁling• Dynatrace• Google Speed tracer• Firebug proﬁler

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

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• jsﬁddle.net (full page structure) • http://jsﬁddle.net/addyosmani/BFeMN/

Browser Comparison• jsperf.com • Compare js performance across browsers • http://jsperf.com/queryselectorall-vs- getelementsbytagname• jsﬁddle.net (full page structure) • http://jsﬁddle.net/addyosmani/BFeMN/These tools make benchmarks easier and repeatable

Agenda• Intro• Performance 101• Performance tuning workﬂow• 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

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)• Speciﬁc to mobile

Mobile• Good for ‘desktop’ and mobile • Reduce network calls • Only load what you need • Cache as much as you can (HTML5 AppCache)• Speciﬁc 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)• Speciﬁc 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)• Speciﬁc 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 referenceshttp://developer.yahoo.com/yslow/http://code.google.com/speedhttp://ajax.dynatrace.comWebpagetest.orghttp://ajaxian.com/archives/when-does-javascript-trigger-reﬂows-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://jsﬁddle.net/addyosmani/BFeMN• run tests and share them: jsperf.com• speed of different tools: dante.dojotoolkit.org/taskspeed

Thank You! Any Questions? railsperformance.blogspot.comrailsperformance@gmail.com @J_McCaffrey

http://www.railsperformance.com	1769
http://railsperformance.blogspot.com	243
http://lanyrd.com	26
http://feeds.feedburner.com	5
http://www.hanrss.com	4
http://184.72.218.145	2
http://coderwall.com	1
http://5412562237506005821_6df4b960230db62b8d8bfd08849953a2457f3ce6.blogspot.com	1

Windycityrails page performance

by John McCaffrey

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 2,051

Statistics

Windycityrails page performance Presentation Transcript