Webパフォーマンスチューニング

2年前に社内勉強会で発表したモダンなWebパフォーマンスチューニングの話です。

Transcript

1. 8FCύϑΥʔϚϯε
   νϡʔχϯά
   (JOPJODۚݪ
   

   View Slide

2. "HFOEB
   w ύϑΥʔϚϯεͷࢦඪ
   w ϨϯμϦϯάͷ࢓૊Έ
   w ܭଌํ๏
   w νϡʔχϯάͷجຊ
   

   View Slide

3. ࢦඪͷॏཁੑ
   

   View Slide

4. Ϣʔβʔͷ൓Ԡ
   ஗Ԇ Ϣʔβʔͷ൓Ԡ
   dNT Ξχϝʔγϣϯ͕εϜʔζͩͱײ͡Δ
   dNT
   ΞΫγϣϯʹର͙ͯ͢͠ʹ݁Ռ͕ಘΒΕͨͱײ͡Δ
   ͜ΕҎ্͕͔͔࣌ؒΔͱɺૢ࡞ͱ൓ԠʹζϨΛײ͡Δ
   dNT Ϣʔβʔ͸΍΍஗͍ͱײ͡Δ
   dNT ϖʔδಡΈࠐΈ΍Ϗϡʔͷ੾Γସ͕͑ࣗવʹਐΜͰ͍Δͱײ͡Δ
   NTҎ্ Ϣʔβʔ͸࣮ߦͨ͠λεΫ΁ͷؔ৺Λࣦ͏
   TҎ্ Ϣʔβʔ͸΋͏໭ͬͯ͜ͳ͍
   

   View Slide

5. 3"*-
   w 3FTQPOTF
   w "OJNBUJPO
   w *EMF
   w -PBE
   3FTQPOTF
   ϢʔβʔͷΞΫγϣϯʹରͯ͠
   Ԡ౴Λฦ͢·Ͱͷ࣌ؒ
   NT
   "OJNBUJPO
   ࿈ଓͨ͠ΞχϝʔγϣϯͷதͰɺ
   ϑϨʔϜลΓͷॲཧ࣌ؒ
   NT
   NT
   
   *EMF ΞΠυϧঢ়ଶʹ࣮ߦ͞ΕΔ+BWB4DSJQUͷॲཧ࣌ؒ NT
   -PBE ϖʔδͷίϯςϯπͷಡΈࠐΈʹ͔͔Δ࣌ؒ NT
   

   View Slide

6. ϨϯμϦϯάͷͭͷ޻ఔ
   -PBEJOH
   4DSJQUJOH
   3FOEFSJOH
   1BJOUJOH
   'SBNF
   

   View Slide

7. ϑϨʔϜͷৄࡉ
   

   View Slide

8. -PBEJOH
   w %PXOMPBE
   w ίϯςϯπΛϩʔυ
   w 1BSTF
   w %0.πϦʔɺ$440.ͷπϦʔ
   

   View Slide

9. 4DSJQUJOH
   w ࣈ۟ղੳ
   w ߏจղੳ
   w ίϯύΠϧ
   w ࣮ߦ
   

   View Slide

10. 3FOEFSJOH
    w $BMDVMBUF4UZMF
    w ఏڙ͞ΕΔTUZMFͷܭࢉ
    w -BZPVU
    w ϨΠΞ΢τ৘ใͷܭࢉ
    w ཁૉͷେ͖͞
    w ཁૉͷϚʔδϯ
    w ཁૉͷ͍ͪ
    w ;࣠
    

    View Slide

11. 1BJOUJOH
    w 1BJOU
    w άϥϑΟοΫΤϯδϯͷͨΊͷ໋ྩͷྻΛੜ੒
    w 3BTUFSJ[F
    w ໋ྩྻ͔ΒϐΫηϧΛੜ੒͢Δ
    w ϨΠϠʔ΋͜͜Ͱ࡞੒͞ΕΔ
    w $PNQPOFOU-BZPVU
    w ϨΠϠʔΛ߹੒ͯ͠ίϯςϯπදࣔ
    

    View Slide

12. νϡʔχϯάͷجຊ
    w جຊ͸ܭଌ͔Β࢝ΊΔ
    w νϡʔχϯάͷੋඇ͸ࢦඪͱরΒ͠߹Θͤͯߦ͏
    

    View Slide

13. ଌఆͷํ๏
    w ͍͔ͭ͋͘Δ
    w $ISPNF"VEJU MJHIUIPVTF
    
    w $ISPNF%FW5PPMT
    w +BWB4DSJQUͷຒΊࠐΈ
    w ύϑΥʔϚϯε਍அπʔϧ
    w /FX3FMJD
    

    View Slide

14. $ISPNF%FW5PPMT
    1FSGPNBODF
    

    View Slide

15. ͰɺQBJ[B͸ʁ
    

    View Slide

16. ͰɺQBJ[B͸ʁ
    

    View Slide

17. 10)
    

    View Slide

18. 10)
    

    View Slide

19. Ұํ(SFFO͸ʁ
    

    View Slide

20. Ұํ(SFFO͸ʁ
    

    View Slide

21. ΋͔ͯ͠͠
    

    View Slide

22. -PBEJOHͷνϡʔχϯά
    w ಡΈࠐΉϦιʔεͷେ͖͞ͱ਺ΛݮΒ͢
    w ϨϯμϦϯάΛϒϩοΫ͢ΔಡΈࠐΈΛݮΒ͢
    w ϒϥ΢βͱαʔόʔؒͷ஗ԆΛݮΒ͢
    w ΩϟογϡΛ׆༻͢Δ
    w )551
    

    View Slide

23. +BWBTDSJQUͷEFGFSBTZOD
    w ඇಉظʹಡΈࠐΉ͕ɺ࣮ߦλΠϛϯάͱ࣮ߦॱ͕ҟͳΔ
    ͳ͠ EFGFS BTZOD
    )5.-ͷύʔε ϒϩοΫ͢Δ ϒϩοΫ͠ͳ͍ ϒϩοΫ͠ͳ͍
    ࣮ߦλΠϛϯά ಉظత )5.-ͷύʔεޙ εΫϦϓτऔಘ௚ޙ
    ࣮ߦॱ એݴॱͰอূ એݴॱͰอূ อূ͞Εͳ͍
    

    View Slide

24. 4DSJQUJOHͷνϡʔχϯά
    w ($Λ๷͙
    w 8FC8PSLFSTΛ࢖͏
    w BTNKTͰߴ଎Խ
    w 1BTTJWF&WFOU-JTUFOFS
    w 8FC(-
    

    View Slide

25. Ұ൪͸ϝΠϯͷ6*εϨουΛ
    ࢭΊͳ͍͜ͱ
    

    View Slide

26. 'PSDFE4ZODISPOPVT
    -BZPVU
    w 4DSJQUJOH಺Ͱ$BMDVMBUF4UZMFͱ-BZPVU͕૸Δ͜ͱ
    WBSEJWEPDVNFOUDSFBUF&MFNFOU EJW`
    
    EJWJOOFS)5.-EJWFMFNFOU`
    EPDVNFOUCPEZBQQFOE$IJME EJW
    
    ͜͜Ͱ'PSDFE4ZODISPOPVT-BZPVU͕ൃੜ͢Δ
    DPOTPMFMPH EJWP⒎TFU5PQ
    
    SFRVFTU"OJNBUJPO'SBNF GVODUJPO
    \
    ͜͜Ͱऔಘ͢Δͱ'PSDFE4ZODISPOPVT-BZPVU͸ى͖ͳ͍
    DPOTPMFMPH EPNP⒎TFU5PQ
    
    ^
    
    

    View Slide

27. 3FOEFSJOHͷνϡʔχϯά
    w %0.΍$44Λখ͘͢͞Δ
    w JNHͷαΠζΛࢦఆ͢Δ
    

    View Slide

28. $44ͷϚονϯάϧʔϧ
    w ηϨΫλ͸ӈ͔Βࠨʹղऍͯ͠ϚονϯάΛߦ͏
    w CVUUPOཁૉ͋Δ
    w ਌ཁૉʹDPOUBJOFSؚ͕·Ε͍ͯΔ
    w ਌ཁૉ͕CPEZͰ͋Δ
    CPEZDPOUBJOFSCVUUPO\
    ^
    

    View Slide

29. ࠶ϨϯμϦϯά
    w લճͷ$BMDVMBUF4UZMF΍-BZPVUͷ݁ՌΛۃྗ࢖͍ճ͢
    w ͨͩ͠ɺมߋ෦෼͸ܭࢉ͠௚͢ඞཁ͕͋Δ
    w KTͰTUZMFϓϩύςΟΛ௚ͨ͠ΓɺBEE$MBTTͨ͠Γ
    

    View Slide

30. ϨϯμϦϯάͷνϡʔχϯά
    w લߦఔ͕ى͖ͳ͍Α͏ʹ͢Δ
    w IUUQTDTTUSJHHFSTDPN
    w มԽ෦෼ͷΈϨΠϠʔΛ෼͚Δ
    

    View Slide

31. &OE
    

    View Slide