Re-think about Web Performance

2014/6/21に開催されたFrontrend in NagoyaのRe-think about Web Performanceのセッションの資料です。

Transcript

1. 4GVJKPMCDQWVYGDRGTHQTOCPEG 'SPOUSFOE
   JO
   /BHPZB
   
   !DI
2. "EJ EJ JVVREJPGV
3. 1FSGPSNBODF
   &WBOHFMJTU ύϑΥʔϚϯεվળ ͓Αͼਪਐ׆ಈ
4. ໊ݹ԰ॳ্཮ʂ
5. (PPHMF
   *0
   
   ࢀՃ͖ͯ͠·͢ʂ
6. 8FCϑϩϯτΤϯυ࠷લઢ
   ৽࿈ࡌ࢝·Γ·͢ʂ
7. 9JCVKUň2GTHQTOCPEGʼn! +PVJGECUGQH#OGDC %QPENWUKQP #IGPFC *QYVQQRVKOK\G!
8. 9JCVKUň2GTHQTOCPEGʼn!
9. To me, performance is a feature, and I simply like using fast websites more than slow websites, so naturally I'm going to build a site that I would want to use. But I think there's also a lesson to be learned here about the competitive landscape of the public internet, where there are two kinds of websites: the quick and the dead. 1FSGPSNBODF
   JT
   B
   'FBUVSF
   IUUQCMPHDPEJOHIPSSPSDPNQFSGPSNBODFJTBGFBUVSF
10. ύϑΥʔϚϯε͸ ػೳͷ1ͭͰ͋Δɻ
11. ͜ͷੈʹ͸2छྨͷWebαΠτ͔͠ͳ͍ɻ ૣ͍͔ɺࢮΜͰ͍Δ ͔ͷͲͪΒ͔ͩɻ
12. ύϑΥʔϚϯεΛ࣠ʹͨ͠
    Ϣʔβʔମݧͷࠩʜ
13. ϖʔδ͕ඵͰදࣔ͞ΕΔͱʜ
14. ඵܦͬͯ΋ϖʔδ͕දࣔ͞Εͳ͍ͱʜ
15. ໿ͷϢʔβʔ͕཭୤͢Δ
    ͦͷ಺͸౓ͱ໭ͬͯ͜ͳ͍
16. ϖʔδϏϡʔͷ௿Լ &$αΠτͰ͋Ε͹ച্ͷ௿Լ ֤छίϯόʔδϣϯ ౰ͨΓલ͚ͩͲɺσϝϦοτ͔͠ͳ͍
17. ͍͘Βίϯςϯπ͕ྑͯ͘΋
 ஗͍αΠτʹϢʔβʔ͸དྷͳ͍
18. 8FCύϑΥʔϚϯεͷେཁૉ 3FOEFS $PNQVUF /FUXPSL
19. /FUXPSL
    Ϧιʔεऔಘؔ࿈ /FUXPSL αʔόʔαΠυ
    ϓϩάϥϜ %/4
    -PPLVQ
    ,FFQ"MJWF JNH
    TSDʜ
    MJOL
    ISFGʜ
20. 3FOEFS
    ඳըؔ࿈ 3FOEFS $44 $16
    PS
    (16 3FOEFS
    5SFF
    
    %0.
    
    $440.
21. $PNQVUF
    +4࣮ߦؔ࿈ $PNQVUF 7
    +*5
    $PNQJMF (BSCBHF
    $PMMFDUJPO ෺ཧԋࢉॲཧ
22. ϖʔδ͕දࣔ͞ΕΔ·Ͱ *OJUJBMJ[F
    1SPDFTT 3FOEFS /FUXPSL $PNQVUF
23. ӾཡதɾϖʔδΛด͡Δ·Ͱ 3VOUJNF
    1SPDFTT 3FOEFS $PNQVUF /FUXPSL
24. +PVJGECUGQH#OGDC
25. "NFCB͋Δ͋Δ
26. ϓϥϯφʔ σΟϕϩούʔ ͜͜ʹίϯςϯπΛ
    ௥Ճ͍ͨ͠Ͱ͢ʂ ʢͲΜͲΜϖʔδ͕ॎ ௕ʹͳ͍ͬͯ͘ʜʣ
27. ΤϯδχΞ σΟϕϩούʔ αʔόʔαΠυͷ
    ࣮૷ऴΘΓ·ͨ͠ʔʂ ʢ͜ͷ"1*·ͱΊͯཉ ͔ͬͨ͠ʜʣ
28. ύϑΥʔϚϯεʹର͢Δ
 ։ൃऀͷҙࣝͷܽམʜ
29. ϓϥϯφʔ σΟϕϩούʔ ͜ͷεέδϡʔϧͰ
    ͓ئ͍͠·͢ʂ ʢ๩ͯ͘͠νϡʔχϯ άͲ͜Ζ͡Όͳ͍ʜʣ
30. ։ൃෛՙ͕ߴ͗ͯ͢
 νϡʔχϯά͕ޙखʹճ͞ΕΔ
31. σβΠφʔ σΟϕϩούʔ ͜͜ͷϚʔδϯ
 ΍ͬͺΓQYͰʂ ʢ·ͨඍௐ੔͔ʜʣ
32. ΤϯδχΞ σΟϕϩούʔ ͜ͷ"1*͸͜͏ฦ٫͢ ΔΑ͏ʹ͠·͢ʂ ʢ+40/ͷܗࣜม͑ͳ͍ Ͱ͘ΕʔPS[ʣ
33. ΤϯδχΞͱσβΠφʔͷؒͰ
 ൘ڬΈʹͳΓ͕ͪ
34. ট͔ΕΔ݁Ռ
35. ੵΈ্͕ΔϨΨγʔίʔυ σβΠϯ΁ͷରԠͰංେԽ͢Δ$44 ٕज़తෛ࠴ ࠷దԽͤͣϦϦʔε͞ΕΔϓϩμΫτ
36. සൟʹߦΘΕΔσβΠϯϦχϡʔΞϧ ୹͗͢Δεέδϡʔϧ ർฐ͢Δ։ൃऀ ͱʹ͔͘৭ʑͱγϏΞ
37. ޙʹͳΕ͹ͳΔ΄Ͳ
    मਖ਼͸ࠔ೉ʹͳΔ
38. ϓϩδΣΫτ෼ੳ
39. ભҠϕʔε͕΄ͱΜͲʢ41"গͳ͍ʣ ήʔϜܥϓϩμΫτ͸ಛʹӡ༻͕ਏ͍ αʔϏεͷ෼෍ ΨϥέʔʹରԠ͍ͯ͠ΔݹࢀαʔϏε΋
40. ΠχγϟϧίετΛ࠷దԽग़དྷ͍ͯͳ͍ େྔͷαʔυύʔςΟϞδϡʔϧ ίʔυͷঢ়ଶ ௕͖ʹ౉ͬͨϓϩδΣΫτͷෛͷҨ࢈
41. ݁ߏେมʜPS[
42. *QYVQQRVKOK\G!
43. ֤ํ໘ͱ
    ର࿩ͯ͠΋Β͏
44. ʮϘλϯͷ༨നɺ౷Ұͯ͠ʂʯ ʮ͜ͷӨͳΒ$44Ͱग़དྷΔΜͰ͕͢ʂʯ ରσβΠφʔྫ ʮը૾ͷཁΒͳ͍ςΫενϟʹʂʯ
45. ʮϏϧυϑϩʔʹ˔˔ΛؚΊͯʂʯ ʮ͜ͷϨεϙϯεૣ͘ͳΓ·ͤΜ͔ʂʯ ରΤϯδχΞྫ ʮΩϟογϡΛޮ͔ͤͯʂʯ
46. ύϑΥʔϚϯεʹର͢Δ
    ҙࣝΛ২͑෇͚Δ
    
    ϑϩϯτΤϯυͰʢ͋Δఔ౓ʣ
    ΠχγΞνϒΛऔΔ
47. ΋ͪΖΜਫ਼ਆ࿦͚ͩ
    Ͱ͸μϝͳͷͰʜ
48. ۩ମతʹ਺஋Λࣔ͠
    ରࡦΛఏҊ͢Δ
49. ֤छܭଌπʔϧ͕
    ͋Γ·͢
50. 1BHF4QFFE
    *OTJHIUT
51. :4MPX
52. 14*
53. 1IBOUPNBT
54. 8FC1BHF5FTU
55. ,JOHGJTIFS
    8FC1BHF5FTU
    1SJWBUF
    *OTUBODF
56. ࣾ಺ઐ༻ͷϓϥΠϕʔτΠϯελϯε "NFCBઐ༻ʹ6*ΛΧελϚΠζ 8FC1BHF5FTU
    GPS Ωϡʔ଴ͪͳ͠ʂ"1*Ωʔෆཁʂ
57. ͜ΕΒͷπʔϧͰ
    ࣮ࡍʹܭଌ͢Δ
58. ൃੜ͍ͯ͠Δ
    )551ϦΫΤετͷҰཡ
59. $44΍ը૾ͱ͍ͬͨ
 αϒϦιʔεΛฦ٫͢Δ
 αʔόʔϨεϙϯε )5.-Λฦ٫͢Δ
 αʔόʔϨεϙϯε
60. 
61. )551ϦΫΤετ͸ʜ 3FOEFS $PNQVUF /FUXPSL
62. $44ɾ+4ϑΝΠϧͷ݁߹ͱѹॖ )5.-ϑΝΠϧͷѹॖ ωοτϫʔΫ࠷దԽ ը૾ͷݮ৭ͱϝλ࡟আ Ωϟογϡϔομɾ([JQ౳
63. ը૾ͷ࠷దԽɺॏཁ
64. $44ɺ+4Λ͍͘Β࡟ݮͯ͠΋
    ը૾ͷ࠷దԽΛ๨ΕΕ͹ਫͷ๐ ϑΝΠϧαΠζͷ൒෼Λ
    ϝλ৘ใ͕઎Ί͍ͯΔ͜ͱ΋͋Δ ͔͕ͨը૾͞ΕͲ ΩʔϏδϡΞϧͰͳ͚Ε͹
    ଟগͷྼԽ͸ڐ༰͢Δ൑அ΋ඞཁ
65. IUUQTHJUIVCDPNDIDPNQSFTTJNBHF 1/(ͷ࠷దԽ  
    CZUFT  
    CZUFT EPXO
66. IUUQTHJUIVCDPNDIDPNQSFTTJNBHF +1(ͷ࠷దԽ  
    CZUFT  
    CZUFT EPXO
67. *NBHF0QUJN
68. *NBHF"MQIB
69. HSVOUJNBHF
70. ͜ΕΒͷରࡦҊΛ
    ϓϩδΣΫτʹ
    ϑΟʔυόοΫ
71. !DI ϓϩδΣΫτ#ͷਓ ίίΛ௚ͯ͠Լ͍͞ʂ ϓϩδΣΫτ"ͷਓ
72. ϓϩδΣΫτ"͸΍ͬͯ͘Εͨ ϓϩδΣΫτ#͸΍ͬͯ͘Εͳ͔ͬͨ ͦͷޙʜ ๩͠͞ʹଟগͷࠩ͸͋ΕͲʜ
73. Ͳ͏ͯ͠΋
    ଐਓతʹͳΔ
74. ίʔυΛ௚ͯ͠ϓϧϦΫΤετ ศརπʔϧͷ࡞੒ͯ͠࢖ͬͯ΋Β͏ ͦΕͰ΋ͩΊͳͷͰ ͔͘ͳΔ্͸࠷ऴखஈʜ
75. ରࡦΛٛ຿Խ͢Δ
76. Ϩεϙϯεબखݖ
77. ϥϯΩϯά෇͚ͯ͠ڝ૪৺Λ͓͋Δ গͣͭ͠ϨεϙϯεΛؾʹ͢ΔΑ͏ʹ Ϩεϙϯεબखݖ ετοϓ΢ΥονͰܭଌ
78. ετοϓ΢Υονʜ
    ʅŋ˲ŋA ʁ
80. ɾʷɾ
81. രϨεେձ
82. 8FC1BHF5FTUͷϓϥΠϕʔτ൛Ͱܭଌ 4QFFE*OEFYͱ7JTVBM$PNQMFUF͕ࢦඪ രϨεେձ ೔ճܭଌɺिຖʹ݁Ռ഑৴ ݄ʹ౓ɺϥϯΩϯά্Ґʹܠ඼
83. 4QFFE
    *OEFY      ݄ि ݄ि ݄ि ݄ि ݄ि ϓϩδΣΫτ" ϓϩδΣΫτ# ϓϩδΣΫτ$ ௿͚Ε͹௿͍ఔ
    ύϑΥʔϚϯεྑ❤
84. 4QFFE
    *OEFY      ݄ि ݄ि ݄ि ݄ि ݄ि ϓϩδΣΫτ" ฏۉείΞ/P
85. 4QFFE
    *OEFY      ݄ि ݄ि ݄ि ݄ि ݄ि ϓϩδΣΫτ# վળ཰/P
86. νϡʔχϯΨιϯ
87. ӡ༻தͰ͸վળ͕ޙखʹճͬͯ͠·͏ 1+͔Β਺ਓબग़ͯ͠࿈Εͯߦ͘ ୹ظूதվળ߹॓ ௕ظతʹμϥμϥ΍ΔΑΓूதͯ͠௚͢
88. ઈࢍਐߦதʜ
89. ঃʑʹ޿͕Δ
    ύϑΥʔϚϯεจԽ
90. %QPENWUKQP
91. ύϑΥʔϚϯεΛ
    ॏཁࢹ͢Δ౔৕͕ඞཁ
92. ։ൃͷத৺͔ͩΒͦ͜ पΓΛר͖ࠐΜͰ͍͘
93. ύϑΥʔϚϯεͱͷ
    ઓ͍͸ऴΘΒͳ͍ʜ
94. 6JCPM[QW "EJ EJ JVVREJPGV