• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Windycityrails page performance
 

Windycityrails page performance

on

  • 5,792 views

A walkthrough of various application performance tuning tools and a good workflow for where to start, from a presentation at WindyCityRails 2011 in Chicago, IL. ...

A walkthrough of various application performance tuning tools and a good workflow for where to start, from a presentation at WindyCityRails 2011 in Chicago, IL.

See the video, and more Web and Ruby/Rails Performance info at www.RailsPerformance.com

-John McCaffrey

Statistics

Views

Total Views
5,792
Views on SlideShare
3,104
Embed Views
2,688

Actions

Likes
2
Downloads
33
Comments
1

9 Embeds 2,688

http://www.railsperformance.com 2398
http://railsperformance.blogspot.com 243
http://lanyrd.com 28
http://feeds.feedburner.com 6
http://5412562237506005821_6df4b960230db62b8d8bfd08849953a2457f3ce6.blogspot.com 5
http://www.hanrss.com 4
http://184.72.218.145 2
http://coderwall.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • love making apps faster\nIf I don’t cover the thing you are looking for, come find me, twitter\n
  • love making apps faster\nIf I don’t cover the thing you are looking for, come find me, twitter\n
  • 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’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’ll get a lot more out of the conference if you do\n
  • 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’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’ll get a lot more out of the conference if you do\n
  • 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’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’ll get a lot more out of the conference if you do\n
  • 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’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’ll get a lot more out of the conference if you do\n
  • Raise your hand: Who thinks audience participation is lame?\n\nTrust me, this is a good warm up, and it won’t take long\nEveryone Hands up, \nOk hands down\n
  • Of those people that have tried these things, let’s see if we can find a few that might be ok with sharing what they’ve learned. Find them out in the hallways and get to know them\n\nDon’t knock over your coffee\n
  • “Raise your hand if you want to learn more about”\n“Stand up if you feel you know something about this, and wouldn’t mind chatting about it and sharing what you’ve learned”\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • When we talk about performance tuning, we are not just talking about slow apps that need to be fixed, we are also talking about ‘normal’ apps that are tuned to really fly.\n\n1 sec delay, on 100k a day could lead to 2.5mil lost\nWe’re talking about cost and value\n
  • 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
  • went from 6sec to 1.2\nsped up development and deployment \nand consolidated hardware\n
  • \n
  • They tell others about their bad experience, “That’s not the kind of ‘viral’ message you want”\n\nPage performance is in the mind and behaviors of real users\n
  • \n
  • \n
  • 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’t go back to your project and make a bunch of changes in the name of Performance\n
  • 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’t go back to your project and make a bunch of changes in the name of Performance\n
  • Measuring and monitoring is not premature, go for good enough measuring\n\nWe should know these things about our apps\n
  • 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
  • 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
  • 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
  • \n
  • I got feedback from several people that they would like me to cover the general flow and hotspots.\nI’m going to go over my basic workflow, referencing some of the tools I use and what I look for\n
  • 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 ‘know’ 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’ll have less arguments about performance impacts if you can teach them how to measure\n
  • 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 ‘know’ 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’ll have less arguments about performance impacts if you can teach them how to measure\n
  • 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 ‘know’ 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’ll have less arguments about performance impacts if you can teach them how to measure\n
  • 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 ‘know’ 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’ll have less arguments about performance impacts if you can teach them how to measure\n
  • 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 ‘know’ 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’ll have less arguments about performance impacts if you can teach them how to measure\n
  • 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 ‘know’ 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’ll have less arguments about performance impacts if you can teach them how to measure\n
  • 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
  • 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
  • orange bars: cost of handshake, turn on ‘keep-alives’, 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
  • This is from chrome, the tan is blocking\nwhen js is running, nothing else can update\n
  • This is from chrome, the tan is blocking\nwhen js is running, nothing else can update\n
  • This is from chrome, the tan is blocking\nwhen js is running, nothing else can update\n
  • This is from chrome, the tan is blocking\nwhen js is running, nothing else can update\n
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Save your har file regularly, and load it up to see what’s going on\nThere are browser differences in what gets loaded, and when, so keep track of what you did.\nexample of ‘good enough’ 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
  • Save your har file regularly, and load it up to see what’s going on\nThere are browser differences in what gets loaded, and when, so keep track of what you did.\nexample of ‘good enough’ 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
  • tools like jammit, sprockets to help\ntouch on Rails 3.1 asset pipeline\n\n\n\n\n
  • the single most important performance coding pattern for today'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
  • the single most important performance coding pattern for today'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
  • the single most important performance coding pattern for today'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
  • The hallmarks of the ‘sweet spot’\nYour servers and network are doing less work, freeing it up to do something else\nThe client’s browser is doing less work\nrun these tools against your app, and save your har file, to keep an eye on trends\n
  • \n
  • \n
  • \n
  • \n
  • 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
  • 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
  • http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n  WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  • http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n  WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  • http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n  WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  • http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n  WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  • http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n  WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  • http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n  WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  • http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n  WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  • http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n  WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  • http://guides.rubyonrails.org/active_record_querying.html\n\nSELECT * FROM clients LIMIT 10\nSELECT addresses.* FROM addresses\n  WHERE (addresses.client_id IN (1,2,3,4,5,6,7,8,9,10))\n\n
  • 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’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 ‘profiling’ 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
  • \n
  • 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
  • I’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
  • 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
  • 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
  • In rails I don’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’s fastest (with prod data)\n
  • sweet spot effort vs. cost\nwell-factored code usually reduces dependencies and duplication\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • single threaded\n\n
  • http://www.html5rocks.com/en/tutorials/speed/html5/#toc-js-profiling\n
  • \n
  • \n
  • We realize the benefits of using javascript MVC design\nbackbone, sproutcore,\n
  • We realize the benefits of using javascript MVC design\nbackbone, sproutcore,\n
  • We realize the benefits of using javascript MVC design\nbackbone, sproutcore,\n
  • We realize the benefits of using javascript MVC design\nbackbone, sproutcore,\n
  • We realize the benefits of using javascript MVC design\nbackbone, sproutcore,\n
  • You’ve found the issue, now try to test it on other browsers, share it\n
  • You’ve found the issue, now try to test it on other browsers, share it\n
  • You’ve found the issue, now try to test it on other browsers, share it\n
  • \n
  • \n
  • Identity map\n
  • Identity map\n
  • Identity map\n
  • Identity map\n
  • Identity map\n
  • Identity map\n
  • \n
  • 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
  • http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  • http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  • http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  • http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  • http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  • http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  • http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  • http://bit.ly/mobile-perf\nhttp://www.gomez.com/resources/webinars/optimizing-web-and-mobile-site-performance-using-page-speed/\n
  • \n
  • \n
  • \n
  • \n

Windycityrails page performance Windycityrails page performance Presentation Transcript

  • Faster Page Performance John McCaffrey @J_McCaffreyhttp://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 Matterswww.strangeloopnetworks.com/web‐performance‐op4miza4on‐hub
  • Perf. statisticswww.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 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 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 101
  • Waterfall 101
  • 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"> <!--[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 filesDid 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-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
  • 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 +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” - 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)
  • 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 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/
  • 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
  • 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 referenceshttp://developer.yahoo.com/yslow/http://code.google.com/speedhttp://ajax.dynatrace.comWebpagetest.orghttp://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.comrailsperformance@gmail.com @J_McCaffrey