$30 off During Our Annual Pro Sale. View Details »

Re-think about Web Performance

Re-think about Web Performance

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

Shogo Sensui

June 21, 2014
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

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