Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

rhythm191
December 08, 2019

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

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

rhythm191

December 08, 2019
Tweet

More Decks by rhythm191

Other Decks in Technology

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