Re-think about Web Performance

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

Transcript

1. 4GVJKPMCDQWVYGDRGTHQTOCPEG
   'SPOUSFOEJO/BHPZB
   
   !DI
   

   View Slide

2. "EJ
   EJ
   JVVREJPGV
   

   View Slide

3. 1FSGPSNBODF
   &WBOHFMJTU
   ύϑΥʔϚϯεվળ
   ͓Αͼਪਐ׆ಈ
   

   View Slide

4. ໊ݹ԰ॳ্཮ʂ
   

   View Slide

5. (PPHMF*0
   ࢀՃ͖ͯ͠·͢ʂ
   

   View Slide

6. 8FCϑϩϯτΤϯυ࠷લઢ
   ৽࿈ࡌ࢝·Γ·͢ʂ
   

   View Slide

7. 9JCVKUň2GTHQTOCPEGʼn!
   +PVJGECUGQH#OGDC
   %QPENWUKQP
   #IGPFC
   *QYVQQRVKOK\G!
   

   View Slide

8. 9JCVKUň2GTHQTOCPEGʼn!
   

   View Slide

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.
   1FSGPSNBODFJTB'FBUVSF
   IUUQCMPHDPEJOHIPSSPSDPNQFSGPSNBODFJTBGFBUVSF
   

   View Slide

10. ύϑΥʔϚϯε͸
    ػೳͷ1ͭͰ͋Δɻ
    

    View Slide

11. ͜ͷੈʹ͸2छྨͷWebαΠτ͔͠ͳ͍ɻ
    ૣ͍͔ɺࢮΜͰ͍Δ
    ͔ͷͲͪΒ͔ͩɻ
    

    View Slide

12. ύϑΥʔϚϯεΛ࣠ʹͨ͠
    Ϣʔβʔମݧͷࠩʜ
    

    View Slide

13. ϖʔδ͕ඵͰදࣔ͞ΕΔͱʜ
    

    View Slide

14. ඵܦͬͯ΋ϖʔδ͕දࣔ͞Εͳ͍ͱʜ
    

    View Slide

15. ໿ͷϢʔβʔ͕཭୤͢Δ
    ͦͷ಺͸౓ͱ໭ͬͯ͜ͳ͍
    

    View Slide

16. ϖʔδϏϡʔͷ௿Լ
    &$αΠτͰ͋Ε͹ച্ͷ௿Լ
    ֤छίϯόʔδϣϯ
    ౰ͨΓલ͚ͩͲɺσϝϦοτ͔͠ͳ͍
    

    View Slide

17. ͍͘Βίϯςϯπ͕ྑͯ͘΋

    ஗͍αΠτʹϢʔβʔ͸དྷͳ͍
    

    View Slide

18. 8FCύϑΥʔϚϯεͷେཁૉ
    3FOEFS $PNQVUF
    /FUXPSL
    

    View Slide

19. /FUXPSL Ϧιʔεऔಘؔ࿈
    
    /FUXPSL
    αʔόʔαΠυ
    ϓϩάϥϜ
    %/4-PPLVQ
    ,FFQ"MJWF
    JNHTSDʜ
    MJOLISFGʜ
    

    View Slide

20. 3FOEFS ඳըؔ࿈
    
    3FOEFS
    $44
    $16PS(16
    3FOEFS5SFF
    %0.$440.
    

    View Slide

21. $PNQVUF +4࣮ߦؔ࿈
    
    $PNQVUF
    7
    +*5$PNQJMF
    (BSCBHF$PMMFDUJPO
    ෺ཧԋࢉॲཧ
    

    View Slide

22. ϖʔδ͕දࣔ͞ΕΔ·Ͱ
    *OJUJBMJ[F1SPDFTT
    3FOEFS
    /FUXPSL $PNQVUF
    

    View Slide

23. ӾཡதɾϖʔδΛด͡Δ·Ͱ
    3VOUJNF1SPDFTT
    3FOEFS $PNQVUF
    /FUXPSL
    

    View Slide

24. +PVJGECUGQH#OGDC
    

    View Slide

25. "NFCB͋Δ͋Δ
    

    View Slide

26. ϓϥϯφʔ σΟϕϩούʔ
    ͜͜ʹίϯςϯπΛ
    ௥Ճ͍ͨ͠Ͱ͢ʂ
    ʢͲΜͲΜϖʔδ͕ॎ
    ௕ʹͳ͍ͬͯ͘ʜʣ
    

    View Slide

27. ΤϯδχΞ σΟϕϩούʔ
    αʔόʔαΠυͷ
    ࣮૷ऴΘΓ·ͨ͠ʔʂ
    ʢ͜ͷ"1*·ͱΊͯཉ
    ͔ͬͨ͠ʜʣ
    

    View Slide

28. ύϑΥʔϚϯεʹର͢Δ

    ։ൃऀͷҙࣝͷܽམʜ
    

    View Slide

29. ϓϥϯφʔ σΟϕϩούʔ
    ͜ͷεέδϡʔϧͰ
    ͓ئ͍͠·͢ʂ
    ʢ๩ͯ͘͠νϡʔχϯ
    άͲ͜Ζ͡Όͳ͍ʜʣ
    

    View Slide

30. ։ൃෛՙ͕ߴ͗ͯ͢

    νϡʔχϯά͕ޙखʹճ͞ΕΔ
    

    View Slide

31. σβΠφʔ σΟϕϩούʔ
    ͜͜ͷϚʔδϯ

    ΍ͬͺΓQYͰʂ
    ʢ·ͨඍௐ੔͔ʜʣ
    

    View Slide

32. ΤϯδχΞ σΟϕϩούʔ
    ͜ͷ"1*͸͜͏ฦ٫͢
    ΔΑ͏ʹ͠·͢ʂ
    ʢ+40/ͷܗࣜม͑ͳ͍
    Ͱ͘ΕʔPS[ʣ
    

    View Slide

33. ΤϯδχΞͱσβΠφʔͷؒͰ

    ൘ڬΈʹͳΓ͕ͪ
    

    View Slide

34. ট͔ΕΔ݁Ռ
    

    View Slide

35. ੵΈ্͕ΔϨΨγʔίʔυ
    σβΠϯ΁ͷରԠͰංେԽ͢Δ$44
    ٕज़తෛ࠴
    ࠷దԽͤͣϦϦʔε͞ΕΔϓϩμΫτ
    

    View Slide

36. සൟʹߦΘΕΔσβΠϯϦχϡʔΞϧ
    ୹͗͢Δεέδϡʔϧ
    ർฐ͢Δ։ൃऀ
    ͱʹ͔͘৭ʑͱγϏΞ
    

    View Slide

37. ޙʹͳΕ͹ͳΔ΄Ͳ
    मਖ਼͸ࠔ೉ʹͳΔ
    

    View Slide

38. ϓϩδΣΫτ෼ੳ
    

    View Slide

39. ભҠϕʔε͕΄ͱΜͲʢ41"গͳ͍ʣ
    ήʔϜܥϓϩμΫτ͸ಛʹӡ༻͕ਏ͍
    αʔϏεͷ෼෍
    ΨϥέʔʹରԠ͍ͯ͠ΔݹࢀαʔϏε΋
    

    View Slide

40. ΠχγϟϧίετΛ࠷దԽग़དྷ͍ͯͳ͍
    େྔͷαʔυύʔςΟϞδϡʔϧ
    ίʔυͷঢ়ଶ
    ௕͖ʹ౉ͬͨϓϩδΣΫτͷෛͷҨ࢈
    

    View Slide

41. ݁ߏେมʜPS[
    

    View Slide

42. *QYVQQRVKOK\G!
    

    View Slide

43. ֤ํ໘ͱ
    ର࿩ͯ͠΋Β͏
    

    View Slide

44. ʮϘλϯͷ༨നɺ౷Ұͯ͠ʂʯ
    ʮ͜ͷӨͳΒ$44Ͱग़དྷΔΜͰ͕͢ʂʯ
    ରσβΠφʔྫ
    ʮը૾ͷཁΒͳ͍ςΫενϟʹʂʯ
    

    View Slide

45. ʮϏϧυϑϩʔʹ˔˔ΛؚΊͯʂʯ
    ʮ͜ͷϨεϙϯεૣ͘ͳΓ·ͤΜ͔ʂʯ
    ରΤϯδχΞྫ
    ʮΩϟογϡΛޮ͔ͤͯʂʯ
    

    View Slide

46. ύϑΥʔϚϯεʹର͢Δ
    ҙࣝΛ২͑෇͚Δ
    
    ϑϩϯτΤϯυͰʢ͋Δఔ౓ʣ
    ΠχγΞνϒΛऔΔ
    

    View Slide

47. ΋ͪΖΜਫ਼ਆ࿦͚ͩ
    Ͱ͸μϝͳͷͰʜ
    

    View Slide

48. ۩ମతʹ਺஋Λࣔ͠
    ରࡦΛఏҊ͢Δ
    

    View Slide

49. ֤छܭଌπʔϧ͕
    ͋Γ·͢
    

    View Slide

50. 1BHF4QFFE*OTJHIUT
    

    View Slide

51. :4MPX
    

    View Slide

52. 14*
    

    View Slide

53. 1IBOUPNBT
    

    View Slide

54. 8FC1BHF5FTU
    

    View Slide

55. ,JOHGJTIFS
    8FC1BHF5FTU1SJWBUF*OTUBODF
    

    View Slide

56. ࣾ಺ઐ༻ͷϓϥΠϕʔτΠϯελϯε
    "NFCBઐ༻ʹ6*ΛΧελϚΠζ
    8FC1BHF5FTUGPS
    Ωϡʔ଴ͪͳ͠ʂ"1*Ωʔෆཁʂ
    

    View Slide

57. ͜ΕΒͷπʔϧͰ
    ࣮ࡍʹܭଌ͢Δ
    

    View Slide

58. ൃੜ͍ͯ͠Δ
    )551ϦΫΤετͷҰཡ
    

    View Slide

59. $44΍ը૾ͱ͍ͬͨ

    αϒϦιʔεΛฦ٫͢Δ

    αʔόʔϨεϙϯε
    )5.-Λฦ٫͢Δ

    αʔόʔϨεϙϯε
    

    View Slide

60. 
    

    View Slide

61. )551ϦΫΤετ͸ʜ
    3FOEFS $PNQVUF
    /FUXPSL
    

    View Slide

62. $44ɾ+4ϑΝΠϧͷ݁߹ͱѹॖ
    )5.-ϑΝΠϧͷѹॖ
    ωοτϫʔΫ࠷దԽ
    ը૾ͷݮ৭ͱϝλ࡟আ
    Ωϟογϡϔομɾ([JQ౳
    

    View Slide

63. ը૾ͷ࠷దԽɺॏཁ
    

    View Slide

64. $44ɺ+4Λ͍͘Β࡟ݮͯ͠΋
    ը૾ͷ࠷దԽΛ๨ΕΕ͹ਫͷ๐
    ϑΝΠϧαΠζͷ൒෼Λ
    ϝλ৘ใ͕઎Ί͍ͯΔ͜ͱ΋͋Δ
    ͔͕ͨը૾͞ΕͲ
    ΩʔϏδϡΞϧͰͳ͚Ε͹
    ଟগͷྼԽ͸ڐ༰͢Δ൑அ΋ඞཁ
    

    View Slide

65. IUUQTHJUIVCDPNDIDPNQSFTTJNBHF
    1/(ͷ࠷దԽ
    CZUFT CZUFT
    EPXO
    

    View Slide

66. IUUQTHJUIVCDPNDIDPNQSFTTJNBHF
    +1(ͷ࠷దԽ
    CZUFT CZUFT
    EPXO
    

    View Slide

67. *NBHF0QUJN
    

    View Slide

68. *NBHF"MQIB
    

    View Slide

69. HSVOUJNBHF
    

    View Slide

70. ͜ΕΒͷରࡦҊΛ
    ϓϩδΣΫτʹ
    ϑΟʔυόοΫ
    

    View Slide

71. !DI
    ϓϩδΣΫτ#ͷਓ
    ίίΛ௚ͯ͠Լ͍͞ʂ
    ϓϩδΣΫτ"ͷਓ
    

    View Slide

72. ϓϩδΣΫτ"͸΍ͬͯ͘Εͨ
    ϓϩδΣΫτ#͸΍ͬͯ͘Εͳ͔ͬͨ
    ͦͷޙʜ
    ๩͠͞ʹଟগͷࠩ͸͋ΕͲʜ
    

    View Slide

73. Ͳ͏ͯ͠΋
    ଐਓతʹͳΔ
    

    View Slide

74. ίʔυΛ௚ͯ͠ϓϧϦΫΤετ
    ศརπʔϧͷ࡞੒ͯ͠࢖ͬͯ΋Β͏
    ͦΕͰ΋ͩΊͳͷͰ
    ͔͘ͳΔ্͸࠷ऴखஈʜ
    

    View Slide

75. ରࡦΛٛ຿Խ͢Δ
    

    View Slide

76. Ϩεϙϯεબखݖ
    

    View Slide

77. ϥϯΩϯά෇͚ͯ͠ڝ૪৺Λ͓͋Δ
    গͣͭ͠ϨεϙϯεΛؾʹ͢ΔΑ͏ʹ
    Ϩεϙϯεબखݖ
    ετοϓ΢ΥονͰܭଌ
    

    View Slide

78. ετοϓ΢Υονʜ
    ʅŋ˲ŋA
    ʁ
    

    View Slide

79. View Slide

80. ɾʷɾ
    
    

    View Slide

81. രϨεେձ
    

    View Slide

82. 8FC1BHF5FTUͷϓϥΠϕʔτ൛Ͱܭଌ
    4QFFE*OEFYͱ7JTVBM$PNQMFUF͕ࢦඪ
    രϨεେձ
    ೔ճܭଌɺिຖʹ݁Ռ഑৴
    ݄ʹ౓ɺϥϯΩϯά্Ґʹܠ඼
    

    View Slide

83. 4QFFE*OEFY
    
    
    
    
    
    ݄ि ݄ि ݄ि ݄ि ݄ि
    ϓϩδΣΫτ"
    ϓϩδΣΫτ#
    ϓϩδΣΫτ$
    ௿͚Ε͹௿͍ఔ
    ύϑΥʔϚϯεྑ❤
    

    View Slide

84. 4QFFE*OEFY
    
    
    
    
    
    ݄ि ݄ि ݄ि ݄ि ݄ि
    ϓϩδΣΫτ"
    ฏۉείΞ/P
    

    View Slide

85. 4QFFE*OEFY
    
    
    
    
    
    ݄ि ݄ि ݄ि ݄ि ݄ि
    ϓϩδΣΫτ#
    վળ཰/P
    

    View Slide

86. νϡʔχϯΨιϯ
    

    View Slide

87. ӡ༻தͰ͸վળ͕ޙखʹճͬͯ͠·͏
    1+͔Β਺ਓબग़ͯ͠࿈Εͯߦ͘
    ୹ظूதվળ߹॓
    ௕ظతʹμϥμϥ΍ΔΑΓूதͯ͠௚͢
    

    View Slide

88. ઈࢍਐߦதʜ
    

    View Slide

89. ঃʑʹ޿͕Δ
    ύϑΥʔϚϯεจԽ
    

    View Slide

90. %QPENWUKQP
    

    View Slide

91. ύϑΥʔϚϯεΛ
    ॏཁࢹ͢Δ౔৕͕ඞཁ
    

    View Slide

92. ։ൃͷத৺͔ͩΒͦ͜
    पΓΛר͖ࠐΜͰ͍͘
    

    View Slide

93. ύϑΥʔϚϯεͱͷ
    ઓ͍͸ऴΘΒͳ͍ʜ
    

    View Slide

94. 6JCPM[QW
    "EJ
    EJ
    JVVREJPGV
    

    View Slide