Upgrade to Pro — share decks privately, control downloads, hide ads and more …

forkwell.com Y U SO SLOW

forkwell.com Y U SO SLOW

Forkwell Nite #2の発表スライド

76a777ff80f30bd3b390e275cce625bc?s=128

Akira Matsuda

August 30, 2012
Tweet

Transcript

  1. Monday, September 3, 12

  2. whoami ★Twitter: a_matsuda ★GitHub: amatsuda Monday, September 3, 12

  3. Monday, September 3, 12

  4. begin Monday, September 3, 12

  5. Forkwellͬͯ ͳΜ͔஗͍Ͱ͢ΑͶʁ Monday, September 3, 12

  6. WHO SLOW? ★server side ★network ★client side Monday, September 3,

    12
  7. WHO SLOW? - server side ★infra ★code Monday, September 3,

    12
  8. infra ★AP server ★DB Monday, September 3, 12

  9. AP Server ★Passenger vs Unicorn Monday, September 3, 12

  10. Passenger > Unicorn ? “ͳͥ Forkwell ͸ϦϦʔεॳ೔ʹ αʔόμ΢ϯΛ܁Γฦͨ͠ͷ͔“ http://annex-forkwell.heroku.com/2012/04/12/ server_failure

    Monday, September 3, 12
  11. ͢·Μͳɻ͋Ε͸ӕͩ Unicorn଎͍Θʔ (ͨͩ͠ɺRails͕ ݩؾʹಈ͍͍ͯΔݶΓ͸) Monday, September 3, 12

  12. DB ★ CPU࢖༻཰͕(ͨ·ʹ)όΫϋπ ★ ͦΜͳෳࡶͳܭࢉͯ͠ΔΑ͏ͳΞϓϦ͡Ό ͳ͍ͷͰDBαʔόʔͷCPU࢖͏ͳΜͯ໌Β ͔ʹ͓͔͍͠ Monday, September 3,

    12
  13. DB ★full scan... ★indexுΓ๨ΕͯΔΑ... Monday, September 3, 12

  14. % rails g ★ e.g. when Post has_many Comments ★

    % rails g model comment post:references body:text - indexed ★ % rails g migration add_user_id_to_comment user_id:integer - not indexed Monday, September 3, 12
  15. PROTIP: ϚΠάϨʔγϣϯͰΧϥϜ௥Ճ ͢Δͱ͖͸index΋๨Εͣʹʂ Monday, September 3, 12

  16. code ★Ruby ★Rails Monday, September 3, 12

  17. Ruby ★Ruby 1.9.3 Monday, September 3, 12

  18. Ruby 1.9.3 ଎͍ΑͶʁ Monday, September 3, 12

  19. Rails ★Rails 3.2.8 Monday, September 3, 12

  20. ී௨ʹ࠷৽ͷRailsΛ࢖͍ͬͯͨͩ ͚Ͱୡ੒Ͱ͖͍ͯͨ͜ͱ ★Asset Pipeline Monday, September 3, 12

  21. Asset Pipeline ★assets͸WEBαʔόʔͰ ★.scss => .css, .coffee => .js ΛϓϦ

    ίϯύΠϧ ★*.js, *.cssΛ1ϑΝΠϧʹ݁߹ Monday, September 3, 12
  22. ʮRails͔ͩΒ଎͍ʯ ࣌୅ Monday, September 3, 12

  23. slow code ★slow query ★N+1 queries ★“Activity” Monday, September 3,

    12
  24. slow query ★ ࠷ۙ୭͔ͷΞΫςΟϏςΟ͕͋ͬͨεΩϧλάͷ TOP 20-ish(20݅͝ͱʹϖʔδωʔγϣϯ) ★ ↑ͷͦΕͧΕͷεΩϧλά͝ͱʹ(ࣗ෼ͷ༑ͩͪͷ)୭ ͔͕௚ۙ7೔ؒҎ಺ʹߦͬͨΞΫςΟϏςΟͷ࠷৽6 ݅(ͨͩ͠ʮ+1͠·ͨ͠ʯͱʮಡΜͩΑʯ͸࠷৽ͷ΋

    ͷͷΈ)ʹ͍ͭͯɺ୭͕(FBʹొ࿥͞ΕͯΔݱࡏͷϩ έʔϧͷϑϧωʔϜ + ΞΠίϯը૾)ԿΛͲ͏͔ͨ͠ (I18nͭͭ͠)දࣔɻ7݅Ҏ্͋Δ৔߹͸ʮ΋ͬͱݟ ΔʯϘλϯΛදࣔɻ Monday, September 3, 12
  25. τοϓϖʔδͰൃߦ͞ΕΔSQL ★before: SQL਺ඦൃ ★after: 2 SQLs Monday, September 3, 12

  26. SQL quiz ύϒϦέʔγϣϯ͝ͱʹgroup by ͨ͠άϧʔϓ͝ͱʹ order by + limitͰ࠷৽ͷΞΫςΟϏςΟΛ6 ݅ͣͭऔಘɺ͍ͭͰʹʮ΋ͬͱݟ

    Δʯ͔Ͳ͏͔΋஌Γ͍ͨ Monday, September 3, 12
  27. use vendor speci c SQL # -*- coding: utf-8 -*-

    class Activity < ActiveRecord::Base ... # ड͚औͬͨactivitiesΛɺpublication_idͷ஋͝ͱʹ࠷େ7݅ͣͭʹߜͬͯฦ͢ # [MySQLݶఆ] def self.select_top_7_per_publication_id(activities) # ࠷৽ͷ6+1݅(see moreΛදࣔ͢Δ͔Ͳ͏͔Λ൑ఆ͢ΔͨΊʹ׶͑ͯ1݅ଟΊʹऔಘ) Activity.from(<<-SQL).where("activities.row_number <= #{DISPLAY_ACTIVITY_NUM + 1}") (select *, if(@previous_publication_id <> publication_id, @rownum := 1, @rownum := @rownum + 1) as row_number, @previous_publication_id := publication_id from (#{activities.to_sql}) as a cross join (select @rownum := NULL, @previous_publication_id := 0) as r order by publication_id, id desc ) AS activities SQL end ... end ΩϞ͍ Monday, September 3, 12
  28. ੜSQL্౳ ★ ARͷύϑΥνϡʔ͸ੜSQLॻ͍ͯ ͳΜ΅ ★ Ή͠ΖARͷ୉ޣຯ͸ੜSQLͱͷڞଘ (ͬͯMartin Fowler΋ݴͬͯͨ) ★ ՄಡੑɾอकੑͱύϑΥʔϚϯεͷ

    τϨʔυΦϑ Monday, September 3, 12
  29. ṖSQLϩδοΫ ★scopeʹด͡ࠐΊͯ ★ద੾ͳ໊લΛ෇͚ͯ ★୯ମςετͰ୲อ Monday, September 3, 12

  30. use AR::Relation ★AR::Relation#merge ★AR::Relation#to_sql Monday, September 3, 12

  31. PROTIP: ੜSQLສࡀ Monday, September 3, 12

  32. PROTIP: use PostgreSQL Monday, September 3, 12

  33. N+1 queries ★Bullet https://github.com/ yerhzm/ bullet ★৭ʑڭ͑ͯ͘ΕΔͷͰɺ(ಛʹ SQL͕͋·Γಘҙ͡Όͳ͍ਓʹ ͸)ศར͔΋Ͷ Monday,

    September 3, 12
  34. PROTIP: use Bullet (if you need) Monday, September 3, 12

  35. “Activity” Monday, September 3, 12

  36. WUT SLOW? ★ܭଌ͠Α͏ʂ Monday, September 3, 12

  37. rack-mini-pro ler ★rack-mini-pro ler https:// github.com/SamSaffron/ MiniPro ler/tree/master/Ruby ★(demo) Monday,

    September 3, 12
  38. “Activity” ★ ࣮ߦऀͷFBΞΠίϯը૾ ★ ͳΜ͔ෳࡶͰॏ͍ͨۀ຿ϩδοΫΛܦͯ ग़͖ͯͨจݴΛI18nͨ͠΋ͷ ★ Ұ౓࡞ΒΕͨΒมΘΒͳ͍ ★ ঢ়ଶ΍ϩάΠϯϢʔβʔʹΑΔมԽΛड

    ͚ͳ͍(I18n.localeҎ֎͸) Monday, September 3, 12
  39. fragment cacheͷ ग़൪Ͱ͢Ͷɻ Monday, September 3, 12

  40. Rails3ϨγϐϒοΫ 293ϖʔδ Monday, September 3, 12

  41. fragment cache ͜ΕͰϖʔδશମ͕1.5ഒ଎ ͙Β͍ʹͳͬͨ Monday, September 3, 12

  42. PROTIP: use fragment cache Monday, September 3, 12

  43. PROTIP: ͓खݩʹҰ࡭ɺ ”Rails3ϨγϐϒοΫ” Monday, September 3, 12

  44. WHO SLOW? - network Amazon EC2 + S3 Monday, September

    3, 12
  45. Facebook API (fb_graph) FB APIΛසൟʹୟ͘ΞϓϦͩͱ αʔόʔ͕USʹ͋Δ΄͏͕଎͍ (͜ͱ΋͋Δ) Monday, September 3,

    12
  46. ͱࢥͬͯαʔόʔΛUS ੢ւ؛ʹஔ͍ͯͨ Monday, September 3, 12

  47. ͚Ͳ΍ͬͺΓ Ͳ͏ߟ͑ͯ΋஗͍ Monday, September 3, 12

  48. ͷͰࡢ೔Tokyo regionʹ Ҿͬӽ͠·ͨ͠ ★(demo) http://forkwell.com/ humans.txt Monday, September 3, 12

  49. PROTIP: use AWS Tokyo region Monday, September 3, 12

  50. WHO SLOW? - network ★ܭଌͯ͠ΈΔ Monday, September 3, 12

  51. tools ★ PageSpeed (Google) ★ YSlow (Yahoo) ★ Chrome Developer

    Tools -> Audits ★ PageSpeed Insights https:// developers.google.com/speed/pagespeed/ insights ★ WEBPAGETEST http://www.webpagetest.org/ Monday, September 3, 12
  52. PageSpeed ★(demo) Monday, September 3, 12

  53. ݪҼͱରࡦ ★ৄ͘͠͸͜ͷ΁Μݟ͍ͯͩ͘͞ Web Performance Best Practices https://developers.google.com/ speed/docs/best-practices/ rules_intro Monday,

    September 3, 12
  54. ରࡦ ★Optimize images ★ը૾ͷlazyload ★Defer parsing of JavaScript ★document.ready →

    $ -> ★CSS sprites Monday, September 3, 12
  55. Optimize images ★ImageOptim http:// imageoptim.com/ Monday, September 3, 12

  56. ը૾ͷlazyload FBΞΠίϯը૾ͨͪͷϩʔυ͕஗ ͗͢ΔͷͰɺ࠷ॳ͸ผͷը૾Λग़ ͓͍ͯͯ͠ޙ͔ΒJSͰࠩ͠ସ͑Δ ͱ͍͏࡞ઓ Monday, September 3, 12

  57. jquery.lazyload.js jquery.lazyload.js http:// www.appelsiini.net/projects/lazyload Monday, September 3, 12

  58. Defer parsing of JavaScript “Putting inline scripts after all other

    resources prevents blocking of other downloads, and it also enables progressive rendering.” https://developers.google.com/speed/ docs/best-practices/ rtt#PutStylesBeforeScripts Monday, September 3, 12
  59. document.ready → $ -> ΠϕϯτൃՐλΠϛϯάͷ ࠷దԽ Monday, September 3, 12

  60. CSS sprites ͜ΜͳͷσβΠφʔ͞Μ͕ͪ·ͪ ·΍Δ࡞ۀͰ͠ΐʁͬͯࠓ·Ͱ͸ ๻΋ࢥͬͯͨΜͰ͕͢ɺ Monday, September 3, 12

  61. Compass Spriting with Compass http:// compass-style.org/help/tutorials/ spriting/ Monday, September 3,

    12
  62. CompassϠό͍؆୯͗ͯ͢Ϡό͍ ★ ର৅ը૾ϑΝΠϧΛద౰ͳσΟϨΫτϦʹ Ҡಈ % mkdir app/assets/images/icons % mv app/assets/images/{foo.png,bar.png,icons}

    ★ SCSS import "icons/*.png"; @include all-icons-sprites; ★ HTML = link_to ‘’, somewhere_path, class: 'icons-foo' Monday, September 3, 12
  63. “Use a Content Delivery Network (CDN)” Monday, September 3, 12

  64. Amazon CloudFront CDN S3ʹஔ͍ͯΔϑΝΠϧͳͲΛੈք தʹedgeαʔόʔͰΩϟογϡ͠ ͓ͯಧ͚ Monday, September 3, 12

  65. CloudFront ★(demo) ★(Ͳͬͪʹ͠ΖTokyoͳΜͰɺେ ͖ͳࠩ͸ग़·ͤΜ) Monday, September 3, 12

  66. “Make fewer HTTP requests” ϦμΠϨΫτଟ͗͢ Monday, September 3, 12

  67. ϦμΠϨΫτଟ͗͢ ★https://graph.facebook.com/4/ picture ★ => (302) CDNͷURL ★࣮ࡍͷը૾ΛϦΫΤετ Monday, September

    3, 12
  68. https://graph.facebook.com/4/picture ★(demo) Monday, September 3, 12

  69. “Facebook”ͷͤ͘ʹإ ͷը૾औͬͯ͘Δͷ͕ ஗͍ͱ͸ͳʹ͝ͱͩ Monday, September 3, 12

  70. ͦ͜Ͱɺը૾ϑΝΠϧΛࣗલͰ Ωϟογϡ ★ αʔόʔଆͰ͋Β͔͡Ίը૾Λμ΢ϯϩʔυ ★ S3ʹసૹ ★ CloudFront্ͷը૾URLΛϢʔβʔͷ identi erͱඥ෇͚ͯmemcachedʹΩϟογϡ

    ★ Ҏ্ͷॲཧΛCarrierWaveͷuploaderΛྲྀ༻͠ ࣮ͯ૷͸ίϯύΫτʹ Monday, September 3, 12
  71. ͜Μͳۤ࿑ͯ͠·ͰFB ࢖͏ඞཁ͋Μͷʁ Monday, September 3, 12

  72. PROTIP: use Gravatar e.g. http://qa.atmarkit.co.jp/ users/a_matsuda Monday, September 3, 12

  73. Cache-Control S3, CF্ͷը૾ϑΝΠϧͷΩϟο γϡؔ࿈ϔομ Monday, September 3, 12

  74. CarrierWaveͳΒ؆୯ fog_attributesʹઃఆ͢Δ͚ͩ Monday, September 3, 12

  75. ͦΜͳ͜ΜͳͰݱࡏͷ http://forkwell.com/ 2ඵલޙɺ͙Β͍ʁ Monday, September 3, 12

  76. ࠓޙͷల๬ Monday, September 3, 12

  77. Y current forkwell.com still slow? ★Assets ★social buttons & tracking

    ★શ෦ೖΓJS & શ෦ೖΓCSSͷฐ֐ ★ͦ΋ͦ΋τοϓϖʔδ͕ ͪ͝Όͪ͝Ό͗͢͠ Monday, September 3, 12
  78. Assets ★·ͩPageSpeedʹౖΒΕΔ ★precompileͨ͠assets΋શ෦S3 & CFʹࡌͤΒΕͳ͍΋ͷ͔ʁ => asset_sync http://github.com/ rumblelabs/asset_sync Monday,

    September 3, 12
  79. social buttons & tracking ★ඇಉظͰಡΈࠐΜͰ΋ͦͷޙ͕ ஗͍ ★Ͳ͏ʹ͔ͳΒΜ΋ͷ͔ Monday, September 3,

    12
  80. ࢼ͠ʹ͍ͭ͜Β͕ແ͔ͬͨΒʁ ★࣮͸LikeϘλϯͱTweetϘλϯͱ ΞΫηεղੳ͕ແ͔ͬͨΒ1ඵ୹ ॖ͞ΕΔ ★(demo) Monday, September 3, 12

  81. શ෦ೖΓJS & શ෦ೖΓCSS ★Asset Pipelineͷ໋॓ ★τοϓϖʔδͰಡΈࠐΜͰΔCSS ͷ8ׂҎ্͸ؔ܎ͳ͍CSS ★΍ͬͺΓ࢖͏΋ͷ͚ͩʹ෼ׂ͠ ͨ΄͏͕଎ͦ͏ͳؾ͕ Monday,

    September 3, 12
  82. ͦ΋ͦ΋τοϓϖʔδ͕ͪ͝Ό͝ ͪΌ͗͢͠ ★͜Ε͕࠷଎ http://qiita.com/ ★(ݸਓతʹ͸)͜Μͳײ͡ʹ͍ͨ͠ ★ʮϦσβΠϯʯ http:// forkwell.com/jobs/100 Monday, September

    3, 12
  83. ʮϦσβΠϯʯ ৽σβΠφʔ͞Μʹظ଴ʂ Monday, September 3, 12

  84. end Monday, September 3, 12