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

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

Ryo Maruyama
November 19, 2013

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

Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。

Ryo Maruyama

November 19, 2013
Tweet

More Decks by Ryo Maruyama

Other Decks in Technology

Transcript

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

    View Slide

  2. ࣗݾ঺հ
    wؙࢁ྄!IJNBSV
    w,-BCגࣜձࣾॴଐ
    w+BWB4DSJQUॻ͓͘࢓ࣄ ,OPDLPVU+4 #VTUFS+4 FUD

    wྉཧͱ৯ثूΊ͕झຯ
    IUUQTUXJUUFSDPNIJNBSV

    View Slide

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

    View Slide

  4. +BWB4DSJQUWT$

    View Slide

  5. +BWB4DSJQUWT$
    +BWB4DSJQUୈ൛
    ্Լ

    $ΫΠοΫϦϑΝϨϯε
    ্Լ

    View Slide

  6. +BWB4DSJQUWT$
    +BWB4DSJQUୈ൛
    ্Լ

    $ΫΠοΫϦϑΝϨϯε
    ্Լ

    LH LH

    View Slide

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

    View Slide

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

    wεςοϓ
    wπʔϧ
    wϙΠϯτ

    View Slide

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

    View Slide

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

    View Slide

  11. IUUQTEFWFMPQFSTHPPHMFDPNDISPNFEFWFMPQFSUPPMT
    $ISPNF%FW5PPMT

    View Slide

  12. $ISPNF%FW5PPMT
    w/FUXPSL
    w ωοτϫʔΫΞΫηεʹ͍ͭͯͷ৘ใ
    w5JNFMJOF
    w ϒϥ΢β಺෦ͷΠϕϯτʹ͍ͭͯͷ৘ใ
    w$161SPpMF
    w ίʔϧελοΫͱ$16λΠϜʹ͍ͭͯͷ৘ใ
    w3FNPUF%FCVHHJOHPO"OESPJE
    w ࣮ػ্Ͱͷσόοά

    View Slide

  13. /FUXPSL

    View Slide

  14. 5JNFMJOF

    View Slide

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

    View Slide

  16. 3FNPUF%FCVHHJOHPO"OESPJE

    View Slide

  17. ͭͷϘτϧωοΫ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. ωοτϫʔΫΞΫηε

    View Slide

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

    View Slide

  24. ωοτϫʔΫΞΫηε
    w੩తίϯςϯπΛΩϟογϡ
    wΩϟογϡ༰ྔ͸"OESPJEܥͰ.#
    w ΞϓϦͷߏ੒΍όʔδϣϯɺ୺຤ͰมΘΔ͔΋
    w$BDIF$POUSPM
    w OPDBDIFJGNPEJpFETJODF
    w NBYBHF೥
    w ӡ༻΍ΞϓϦͷߋ৽ස౓ͳͲʹؔ͘͢͝܎͢Δ
    Ωϟογϡ

    View Slide

  25. ωοτϫʔΫΞΫηε
    wίωΫγϣϯͷઅ໿Φʔόʔϔουܰݮ
    w"OESPJE 9QFSJB49

    ͩͱಉ࣌ίωΫγϣϯ͸ຊ
    w,FFQ"MJWFΛ༗ޮʹͯ͠5$1઀ଓΛ࠶ར༻
    ίωΫγϣϯ਺

    View Slide

  26. +BWB4DSJQU࣮ߦ࣌ؒ

    View Slide

  27. +BWB4DSJQU࣮ߦ࣌ؒ
    wϑΝΠϧΛϩʔυ͢Δ͚ͩͰ͕͔͔࣌ؒΔ
    wK2VFSZͰ໿NT 9QFSJB(9

    w K2VFSZϓϥάΠϯ΍'BTU$MJDL΋͍ΕΔͱ໿NT
    w K2VFSZΛ΍Ίͯඞཁͳػೳ͚ͩΛ΋ͬͨK2VFSZ-JLFͳϥΠϒϥϦΛ࣮૷
    w $MJDLΠϕϯτ΋΍Ίͯ5PVDIΠϕϯτͰ࣮૷
    ϩʔυ࣌ؒ

    View Slide

  28. +BWB4DSJQU࣮ߦ࣌ؒ
    wΠϕϯτΛॲཧ͢Δ࣌ؒΛ୹͘͢Δ
    wදࣔཁૉ͕ଟ͍ςϯϓϨʔτΛϑϨʔϜϫʔΫ
    ʹॲཧͤ͞Δͱॏ͍ ৔߹͕͋Δ

    w ,OPDLPVU+4ͰTFD͔͔Δॲཧ͕͋ͬͨ ίʔϧελοΫେྔ

    w ͦͷ෦෼͸ಠࣗͷςϯϓϨʔτॲཧΛ࣮૷ͯ͠TFDʹ཈͑ͨ
    w 6*8FC7JFX J04
    ͸+*5͕ޮ͔ͳ͍ͷͰ"OESPJEΑΓ΋஗͍
    w ࣮ݧతʹ8FC8PSLFSΛ࢖ͬͨΒര଎ʹͳͬͨ
    Πϕϯτॲཧ࣌ؒ

    View Slide

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

    View Slide

  30. ϨΠΞ΢τϖΠϯτ

    View Slide

  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͋ͨΓΛٙ͏
    ϒϥ΢βʹ༏͘͠

    View Slide

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

    View Slide

  33. ·ͱΊ

    View Slide

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

    View Slide

  35. ͓·͚
    wύϑΥʔϚϯενϡʔχϯάϝϞ
    w ϲ݄ؒͷνϡʔχϯάաఔΛϖʔδͷϝϞͱͯ͠ެ։ ࣾ಺ݶఆ

    w$ISPNFUSBDJOH
    w 5JNFMJOF͸ΞϚνϡΞ༻ɺ5SBDJOH͸ϓϩ༻Β͍͠
    w6*8FC7JFXͷΩϟογϡػߏ͸͜ΘΕͯΔ
    w ϝϞϦ্ͷΩϟογϡΛফڈͰ͖ͳ͍
    w 6TFS"HFOU͕ҟͳΔͱಉ͡63-Ͱ΋ผ෺ͷΩϟογϡͱͯ͠ѻΘΕΔ

    View Slide

  36. ͓ΘΓ
    IUUQTUXJUUFSDPNIJNBSV

    View Slide