Webフロントエンドパフォーマンスチューニング

Transcript

1. 1.

   8FCϑϩϯτΤϯυ ύϑΥʔϚϯενϡʔχϯά ؙࢁ྄!IJNBSV

2. 2.

   ࣗݾ঺հ wؙࢁ྄!IJNBSV w,-BCגࣜձࣾॴଐ w+BWB4DSJQUॻ͓͘࢓ࣄ ,OPDLPVU+4
   #VTUFS+4
   FUD wྉཧͱ৯ثूΊ͕झຯ IUUQTUXJUUFSDPNIJNBSV

3. 3.

   +BWB4DSJQU͸ॏ͍ ࣮ࡍͲΕ͘Β͍ॏ͍ͷʁ

4. 4.

   +BWB4DSJQU
   WT
   $

5. 5.

   +BWB4DSJQU
   WT
   $ +BWB4DSJQU
   ୈ൛ ্Լ $ ΫΠοΫϦϑΝϨϯε ্Լ

6. 6.

   +BWB4DSJQU
   WT
   $ +BWB4DSJQU
   ୈ൛ ্Լ $ ΫΠοΫϦϑΝϨϯε ্Լ LH LH

7. 7.

   ͱɺ+BWB4DSJQU͕ॏ͍ͷ͸෼͔ͬͨɻ Ͱ΋8FCϑϩϯτΤϯυ͸ +BWB4DSJQU͚ͩͰ͸ͳ͍ͷͰɺ શମతͳ͓࿩Λ͠·͢ɻ ͪͳΈʹ࠷େͷϘτϧωοΫ͸ʮୈষ
   K2VFSZϥΠϒϥϦ ϖʔδ ʯ

8. 8.

   ࠓ೔ͷ಺༰ wͱ͋ΔϞόΠϧҊ݅ͰߦͬͨύϑΥʔϚϯε νϡʔχϯάʹ͍ͭͯ "OESPJE
   J04 wεςοϓ wπʔϧ wϙΠϯτ

9. 9.

   νϡʔχϯάͷεςοϓ ॏ͍ͱ͜ΖΛϦετΞοϓ ࣌ؒ΍'14Λଌఆ ϘτϧωοΫΛௐࠪ ରԠࡦΛߟ͑Δ ࣮૷ ޮՌଌఆ

10. 10.

    νϡʔχϯάͷεςοϓ ॏ͍ͱ͜ΖΛϦετΞοϓ ࣌ؒ΍'14Λଌఆ ϘτϧωοΫΛௐࠪ ରԠࡦΛߟ͑Δ ࣮૷ ޮՌଌఆ Ͳ͏ͨ͠Β ͍͍ͷʁ

11. 11.

    IUUQTEFWFMPQFSTHPPHMFDPNDISPNFEFWFMPQFSUPPMT $ISPNF
    %FW5PPMT

12. 12.

    $ISPNF
    %FW5PPMT w/FUXPSL w ωοτϫʔΫΞΫηεʹ͍ͭͯͷ৘ใ w5JNFMJOF w ϒϥ΢β಺෦ͷΠϕϯτʹ͍ͭͯͷ৘ใ w$16
    1SPpMF w ίʔϧελοΫͱ$16λΠϜʹ͍ͭͯͷ৘ใ

    w3FNPUF
    %FCVHHJOH
    PO
    "OESPJE w ࣮ػ্Ͱͷσόοά
13. 13.

    /FUXPSL

14. 14.

    5JNFMJOF

15. 15.

    $16
    1SPpMF "OESPJE
    $ISPNF W ͸ಈ͖͕͓͔͍͠ͷͰ"OESPJE
    $ISPNF
    #FUB W ࢖͍·͠ΐ͏

16. 16.

    3FNPUF
    %FCVHHJOH
    PO
    "OESPJE

17. 17.

    ͭͷϘτϧωοΫ

18. 18.

    ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε

19. 19.

    ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε w+BWB4DSJQU࣮ߦ࣌ؒ

20. 20.

    ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε w+BWB4DSJQU࣮ߦ࣌ؒ wϨΠΞ΢τϖΠϯτ

21. 21.

    ͭͷϘτϧωοΫ wωοτϫʔΫΞΫηε w+BWB4DSJQU࣮ߦ࣌ؒ wϨΠΞ΢τϖΠϯτ ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ҆ఆͷࠃ࢈"OESPJE୺຤ɹʻ ʉ?:?:?:?:?:?:?:?:?ʉ ࠓ೔͸্ͷͭʹ͍͚ͭͯͩɻ

22. 22.

    ωοτϫʔΫΞΫηε

23. 23.

    ωοτϫʔΫΞΫηε wసૹ͢ΔσʔλαΠζ͸ͳΔ΂͘খ͘͞ wNJOJGZ
    NBOHMF w ѹॖ཰ɺѹॖ͕࣌ؒΑ͍ͷͰ6HMJGZ+4͓͢͢Ί wςΩετσʔλ͸H[JQѹॖ w1/(ը૾͸CJU
    1BMFUUF w ඼࣭͕ྑ͍ͷͰ0151J9͓͢͢Ί

    σʔλαΠζ
24. 24.

    ωοτϫʔΫΞΫηε w੩తίϯςϯπΛΩϟογϡ wΩϟογϡ༰ྔ͸"OESPJEܥͰ.# w ΞϓϦͷߏ੒΍όʔδϣϯɺ୺຤ͰมΘΔ͔΋ w$BDIF$POUSPM w OPDBDIF
    
    JGNPEJpFETJODF w NBYBHF೥

    w ӡ༻΍ΞϓϦͷߋ৽ස౓ͳͲʹؔ͘͢͝܎͢Δ Ωϟογϡ
25. 25.

    ωοτϫʔΫΞΫηε wίωΫγϣϯͷઅ໿
    
    Φʔόʔϔουܰݮ w"OESPJE 9QFSJB49 ͩͱಉ࣌ίωΫγϣϯ͸ຊ w,FFQ"MJWFΛ༗ޮʹͯ͠5$1઀ଓΛ࠶ར༻ ίωΫγϣϯ਺

26. 26.

    +BWB4DSJQU࣮ߦ࣌ؒ

27. 27.

    +BWB4DSJQU࣮ߦ࣌ؒ wϑΝΠϧΛϩʔυ͢Δ͚ͩͰ͕͔͔࣌ؒΔ wK2VFSZͰ໿NT 9QFSJB(9 w K2VFSZϓϥάΠϯ΍'BTU$MJDL΋͍ΕΔͱ໿NT w K2VFSZΛ΍Ίͯඞཁͳػೳ͚ͩΛ΋ͬͨK2VFSZ
    -JLFͳϥΠϒϥϦΛ࣮૷ w $MJDLΠϕϯτ΋΍Ίͯ5PVDIΠϕϯτͰ࣮૷

    ϩʔυ࣌ؒ
28. 28.

    +BWB4DSJQU࣮ߦ࣌ؒ wΠϕϯτΛॲཧ͢Δ࣌ؒΛ୹͘͢Δ wදࣔཁૉ͕ଟ͍ςϯϓϨʔτΛϑϨʔϜϫʔΫ ʹॲཧͤ͞Δͱॏ͍ ৔߹͕͋Δ w ,OPDLPVU+4ͰTFD͔͔Δॲཧ͕͋ͬͨ ίʔϧελοΫେྔ w ͦͷ෦෼͸ಠࣗͷςϯϓϨʔτॲཧΛ࣮૷ͯ͠TFDʹ཈͑ͨ

    w 6*8FC7JFX J04 ͸+*5͕ޮ͔ͳ͍ͷͰ"OESPJEΑΓ΋஗͍ w ࣮ݧతʹ8FC8PSLFSΛ࢖ͬͨΒര଎ʹͳͬͨ Πϕϯτॲཧ࣌ؒ
29. 29.

    +BWB4DSJQU࣮ߦ࣌ؒ wλΠϚʔϧʔϓ͸ҰՕॴͰ؅ཧ͢Δ w .Z-PPQFSBEE DBMMCBDL ͱͯ͠λΠϚʔϧʔϓΛ؅ཧ͢Δ w ίʔϧόοΫͷྦྷੵ࣮ߦ͕࣌ؒ௕͘ͳͬͨ৔߹ɺॲཧΛதஅ͢Δ w୺຤εϖοΫʹԠͯ͡'14Λม͑Δ wSFRVFTU"OJNBUJPO'SBNF͸҆ఆͯ͠ͳ͍

    w J04ͰSFRVFTU"OJNBUJPO'SBNF͕ൃՐ͠ͳ͍৔߹͕͋Δ λΠϚʔϧʔϓ
30. 30.

    ϨΠΞ΢τϖΠϯτ

31. 31.

    ϨΠΞ΢τϖΠϯτ wը໘ʹදࣔ͞Εͳ͍΋ͷ͸EJTQMBZOPOF w %0.ϨΠΞ΢τπϦʔ͔Βআ֎͢Δ wΞχϝʔγϣϯॲཧ͸(16Ͱߦ͏ w ͨͩ͠"OESPJEҎ্ͰͷΈ(16Λ༗ޮʹ͢Δ "OESPJE
    .BOJGFTU
    8JOEPX.BOBHFS-BZPVU1BSBNT'-"(@)"3%8"3&@"$$&-&3"5&%

    w %ܥ͸҆ఆͯ͠ͳ͍ͷͰ࢖Θͳ͍ w Կ͔ϨϯμϦϯά͕͓͔͍͠ͱࢥͬͨΒɺUSBOTGPSN
    PQBDJUZ
    USBOTJUJPO
    ! XFCLJULFZGSBNFT͋ͨΓΛٙ͏ ϒϥ΢βʹ༏͘͠
32. 32.

    ϨΠΞ΢τϖΠϯτ w-8'
    $SFBUF+4
    &EHF
    "OJNBUF͸+4 w4FODIB"OJNBUPS͸8FCLJU
    "OJNBUJPO w +4Ͱ੍ޚ͢Δ΋ͷΑΓύϑΥʔϚϯε͕Α͍ w "OESPJE͸͝ΊΜͳ͍͞ Ξχϝʔγϣϯπʔϧ

33. 33.

    ·ͱΊ

34. 34.

    ·ͱΊ w$ISPNF
    %FW5PPMT͍͢͝ w ͨ͘͞Μͷػೳ͕͋ΔͷͰ࢖͍͜ͳͤΔΑ͏ʹͳΔͷ͸େม wௐࠪɺ࣮૷ɺଌఆͷ܁Γฦ͠ w ஍ಓʹͭͭ͜͜ؤுΔ wϒϥ΢β͸جຊతʹ༏ल w ϒϥ΢β͕࠷େݶͷྗΛൃش͢ΔΑ͏ʹαϙʔτ͢Δ

35. 35.

    ͓·͚ wύϑΥʔϚϯενϡʔχϯάϝϞ w ϲ݄ؒͷνϡʔχϯάաఔΛϖʔδͷϝϞͱͯ͠ެ։ ࣾ಺ݶఆ w$ISPNFUSBDJOH w 5JNFMJOF͸ΞϚνϡΞ༻ɺ5SBDJOH͸ϓϩ༻Β͍͠ w6*8FC7JFXͷΩϟογϡػߏ͸͜ΘΕͯΔ w

    ϝϞϦ্ͷΩϟογϡΛফڈͰ͖ͳ͍ w 6TFS"HFOU͕ҟͳΔͱಉ͡63-Ͱ΋ผ෺ͷΩϟογϡͱͯ͠ѻΘΕΔ
36. 36.

    ͓ΘΓ IUUQTUXJUUFSDPNIJNBSV