forkwell.com Y U SO SLOW

Forkwell Nite #2の発表スライド

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