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

20220908_フロントエンドパフォーマンス改善.pdf

Kaz Watanabe
September 08, 2022

 20220908_フロントエンドパフォーマンス改善.pdf

Kaz Watanabe

September 08, 2022
Tweet

More Decks by Kaz Watanabe

Other Decks in Technology

Transcript

  1. !LB[
    ϑϩϯτΤϯυΞϓϦͷ
    ύϑΥʔϚϯεվળΛͨ͠࿩
    "MUFSOBUJWF"SDIJUFDUVSF%0+0

    View Slide

  2. 8)0
    ౉ลҰ޺


    (Θͨͳ΂ ͔ͣͻΖ)


    ɹ @kaz_29


    גࣜձࣾϋʔτϏʔπ ։ൃࣄۀ෦ ࣄۀ෦௕

    View Slide

  3. גࣜձࣾϋʔτϏʔπ͕೔ຊॳʮΫϥ΢υ্Ͱಈ࣍͘ੈ୅ܕλΠϜελϯϓγεςϜʯͷ։ൃʹ੒ޭɺʮ,P[VUVNJʯ্Ͱ࣮ূ࣮ݧ΁
    IUUQTQSUJNFTKQNBJOIUNMSEQIUNM
    IUUQTLP[VUVNJDPN

    View Slide

  4. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    Θͨͳ΂ͷ΍͍ͬͯΔ͜ͱ
    w όοΫΤϯυΤϯδχΞ
    w $BLF1)1࢖͍#BLFS
    w ϑϩϯτΤϯυΤϯδχΞ
    w 3FBDUOFYUKT
    w $*$%؀ڥͷߏஙɾӡ༻
    w "[VSF%FW0QT
    w (JUIVC"DUJPOT

    View Slide

  5. ͋Δ೔ʜ

    View Slide

  6. zͳΜ͔ϖʔδͷಡΈࠐΈ஗͘Ͷʁz

    View Slide

  7. ʜ🤔

    View Slide

  8. ͍Ζ͍Ζࢼߦࡨޡͨ͠࿩Λ͠·͢

    View Slide

  9. ·ͣ͸ݱঢ়Λ೺Ѳ͍ͨ͠

    View Slide

  10. Google Lighthouse

    View Slide

  11. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    Google Lighthouse

    View Slide

  12. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    Google Lighthouse
    w (PPHMF੡8FCͷύϑΥʔϚϯεɾΞΫηγϏϦςΟ਍அπʔϧ
    w %FTLUPQ 1$ϒϥ΢β
    .PCJMF εϚϗϒϥ΢β
    ͷ਍அ͕Ͱ͖Δ
    w ෳ਺ͷ਍அ߲໨
    w 1FSGPSNBODFಡࠐΈ଎౓΍ඳըͳͲɺύϑΥʔϚϯεʹؔ͢Δ਍அ
    w "DDFTTJCJMJUZݴޠઃఆ΍৭ͳͲɺࢹ֮ো֐ऀ޲͚ͳͲͷΞΫηγϏϦςΟʹؔ͢Δ਍அ
    w #FTU1SBDUJDFTਪ঑͞ΕΔٕज़Λ࢖͍ͬͯΔ͔ʁඇਪ঑ͷ"1*ͳͲΛ࢖͍ͬͯͳ͍͔ͳͲ࣮૷ʹؔ͢Δ਍அ
    w 4&04&0ʹؔ͢Δ਍அ
    w 18"1SPHSFTTJWF8FC"QQʹؔ͢Δ਍அ

    View Slide

  13. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    Google Lighthouse - Performance ओͳࢦඪ
    • First Contentful Paint(FCP)


    Ϣʔβʔ͕ϖʔδʹΞΫηεͨ͠ޙɺϒϥ΢β͕࠷ॳͷ%0.ίϯςϯπΛϨϯμϦϯά͢Δͷʹ͔͔Δ࣌ؒ
    • Time to Interactive(TTI)


    ϖʔδ͕׬શʹΠϯλϥΫςΟϒʹͳΔ·Ͱʹ͔͔Δ࣌ؒ
    • Speed Index


    ϖʔδϩʔυ࣌ʹίϯςϯπ͕ࢹ֮తʹදࣔ͞ΕΔ·Ͱͷ࣌ؒ
    • Total Blocking Time(TBT)


    Ϛ΢εΫϦοΫ εΫϦʔϯλοϓ ΩʔೖྗͳͲͷϢʔβೖྗʹରͯ͠ϖʔδ͕Ԡ౴͠ͳ͍Α͏ʹϒϩοΫ͞Εͨ࣌ؒͷ߹ܭ
    • Largest Contentful Paint(LCP)


    ϖʔδͷϝΠϯίϯςϯπ͕Ϣʔβʔʹݟ͑ΔΑ͏ʹͳΔ·Ͱͷ࣌ؒ ࠷େͷίϯςϯπཁૉ͕ը໘ʹϨϯμϦϯά͞ΕΔ࣌ؒ

    View Slide

  14. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    Google Lighthouse
    ͍͍ײ͡ʹվળ͍͖͍ͯͨ͠

    View Slide

  15. Reduce unused JavaScript


    ͕͍ͬͺ͍ग़ͨ

    View Slide

  16. Ͳ͏΍ͬͯ୳͔͢ʁ

    View Slide

  17. @next/bundle-analyzer

    View Slide

  18. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer
    IUUQTHJUIVCDPNWFSDFMOFYUKTUSFFDBOBSZQBDLBHFTOFYUCVOEMFBOBMZ[FS

    View Slide

  19. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer
    • Installation


    • Setting - next.con
    fi
    g.js


    • Run
    IUUQTHJUIVCDPNWFSDFMOFYUKTUSFFDBOBSZQBDLBHFTOFYUCVOEMFBOBMZ[FS
    const withBundleAnalyzer = require('@next/bundle-analyzer')({


    enabled: process.env.ANALYZE === 'true',


    });


    module.exports = withBundleAnalyzer({});


    yarn add —dev @next/bundle-analyzer
    ANALYZE=true yarn build

    View Slide

  20. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer
    IUUQTHJUIVCDPNWFSDFMOFYUKTUSFFDBOBSZQBDLBHFTOFYUCVOEMFBOBMZ[FS

    View Slide

  21. !OFYUCVOEMFBOBMZ[FSΛར༻ͯ͠
    όϯυϧαΠζΛ࡟ݮͨ͠ࣄྫ

    View Slide

  22. ҙਤ͠ͳ͍ݴޠઃఆΛ
    ಡΈࠐΜͰ͍ͨ

    View Slide

  23. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer

    View Slide

  24. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ
    $ ls node_modules/date-fns/locale
    _lib da et hr ko pl th
    af de eu hu lb pt tr
    ar-DZ el fa-IR hy lt pt-BR types.js
    ar-MA en-AU fi id lv ro ug
    ar-SA en-CA fr index.js mk ru uk
    az en-GB fr-CA index.js.flow ms sk uz
    be en-IN fr-CH is mt sl vi
    bg en-NZ gd it nb sr zh-CN
    bn en-US gl ja nl sr-Latn zh-TW
    ca en-ZA gu ka nl-BE sv
    cs eo he kk nn ta
    cy es hi kn package.json te
    $ du -hs node_modules/date-fns/locale
    2.8M node_modules/date-fns/locale

    View Slide

  25. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ
    import { Ja } from ‘date-fns/locale';





    var _index39 = _interopRequireDefault(require("./id/index.js"));


    var _index40 = _interopRequireDefault(require("./is/index.js"));


    var _index41 = _interopRequireDefault(require("./it/index.js"));


    var _index42 = _interopRequireDefault(require("./ja/index.js"));


    var _index43 = _interopRequireDefault(require("./ka/index.js"));


    var _index44 = _interopRequireDefault(require("./kk/index.js"));


    var _index45 = _interopRequireDefault(require(“./kn/index.js"));



    ౰ॳͷ࢖༻ํ๏
    OPEF@NPEVMFTEBUFGOTMPDBMFJOEFYKT ൈਮʣ
    Կ͕໰୊͔ʜ

    View Slide

  26. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ

    View Slide

  27. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ
    Page Size First Load JS
    ! ○ / (7997 ms) 2.05 kB 333 kB
    " /_app 0 B 331 kB
    " ○ /404 195 B 331 kB
    " λ /api/callback 0 B 331 kB
    " ○ /bucket/[id] (8016 ms) 5.05 kB 342 kB
    " ○ /buckets (8015 ms) 1.86 kB 333 kB
    " ○ /download/[id] (8016 ms) 669 B 331 kB
    " ○ /faq (8186 ms) 1.4 kB 363 kB
    " ○ /home (8000 ms) 674 B 331 kB
    " ○ /inbox (8012 ms) 3.83 kB 335 kB
    " ○ /inbox/[id] (8018 ms) 3.93 kB 341 kB
    " ○ /manual (8192 ms) 1.41 kB 363 kB
    " ○ /oauth/callback (8029 ms) 1.4 kB 332 kB
    " ○ /privacy (8188 ms) 1.42 kB 363 kB
    " ○ /signup (8010 ms) 1.91 kB 333 kB
    " ○ /tos (8186 ms) 1.41 kB 363 kB
    # ○ /users/login (8025 ms) 641 B 331 kB
    + First Load JS shared by all 331 kB
    " chunks/framework.2f6124.js 42.4 kB
    " chunks/main.4804be.js 23.4 kB
    " chunks/pages/_app.b8d6b2.js 264 kB
    " chunks/webpack.f9197a.js 1.01 kB
    # css/52ba53715136f2f1420a.css 2.17 kB
    Page Size First Load JS
    ! ○ / (7959 ms) 2.04 kB 237 kB
    " /_app 0 B 235 kB
    " ○ /404 194 B 235 kB
    " λ /api/callback 0 B 235 kB
    " ○ /bucket/[id] (7986 ms) 5 kB 246 kB
    " ○ /buckets (7997 ms) 1.83 kB 237 kB
    " ○ /download/[id] (7985 ms) 659 B 236 kB
    " ○ /faq (8194 ms) 1.38 kB 268 kB
    " ○ /home (7994 ms) 667 B 236 kB
    " ○ /inbox (7994 ms) 3.79 kB 239 kB
    " ○ /inbox/[id] (7994 ms) 3.88 kB 245 kB
    " ○ /manual (8196 ms) 1.39 kB 268 kB
    " ○ /oauth/callback (7968 ms) 1.38 kB 237 kB
    " ○ /privacy (8197 ms) 1.4 kB 268 kB
    " ○ /signup (7992 ms) 1.89 kB 237 kB
    " ○ /tos (8192 ms) 1.39 kB 268 kB
    # ○ /users/login (7997 ms) 628 B 236 kB
    + First Load JS shared by all 235 kB
    " chunks/framework.2191d1.js 42.4 kB
    " chunks/main.6cb893.js 23.3 kB
    " chunks/pages/_app.b10a04.js 168 kB
    " chunks/webpack.f9197a.js 1.01 kB
    # css/52ba53715136f2f1420a.css 2.17 kB
    ֤ϖʔδͰ໿࡟ݮ

    View Slide

  28. 🎉

    View Slide

  29. ར༻͍ͯ͠ͳ͍ΞΠίϯΛ
    େྔʹಡΈࠐΜͰ͍ͨ

    View Slide

  30. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer - ར༻͍ͯ͠ͳ͍ΞΠίϯΛେྔʹಡΈࠐΜͰ͍ͨ

    View Slide

  31. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ
    export * from './CheckIcon';


    export * from './SuccessIcon';


    export * from './CloseIcon';


    export * from './OpenIcon';


    export * from './ErrorIcon';


    export * from './InformationIcon';


    export * from './LoginIcon';


    export * from './LogoutIcon';


    export * from './FileIcon';


    export * from ‘./HomeIcon’;





    ~/src/components/icons/index.ts
    import {


    LoginIcon,


    LogoutIcon,


    } from 'components/icons';


    ݺͼग़͠ํ

    View Slide

  32. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ
    w JOEFYUTͰ഑ԼͷίϯϙʔωϯτΛ·ͱΊΔͷ͸ѱख
    w JOEFYUTܦ༝ͰJNQPSU͢Δͱશͯͷίϯϙʔωϯτ͕ಡΈࠐ·Εͯ͠·͏
    w JNQPSUํ๏͕ෳ਺ଘࡏ͢Δͷ΋ࠞཚͷݩʹͳΓ͏Δ
    w JNQPSUจ͕௕͘ͳΓ͕ͪͳͷ͸࢓ํͳ͍ͷͰڐ༰͢Δ

    View Slide

  33. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    @next/bundle-analyzer - ҙਤ͠ͳ͍ݴޠઃఆΛಡΈࠐΜͰ͍ͨ
    w dTSDDPNQPOFOUTJDPOTJOEFYUTͰΞΠίϯΛJNQPSU͢ΔͷΛ΍Ίͨ
    w ར༻͍ͯ͠ΔΞΠίϯΛ໌ࣔతʹJNQPSU͢ΔΑ͏ʹमਖ਼
    w ҎԼͷΑ͏ͳܗࣜʹશͯमਖ਼
    import { LoginIcon } from ‘components/icons/LoginIcon';


    import { LogoutIcon } from ‘components/icons/LogoutIcon';


    ֤ϖʔδͰʙ࡟ݮ

    View Slide

  34. 🎉

    View Slide

  35. lighthouse-ci

    View Slide

  36. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    lighthouse-ci
    w -JHIUIPVTFͷ݁Ռʹର͢Δܧଓతͳ࣮ߦɺอଘɺऔಘɺΞαʔγϣϯΛՄೳ
    ͳݶΓ؆୯ʹߦ͏ͨΊͷπʔϧ܈
    IUUQTHJUIVCDPNBQQTMJHIUIPVTFDJ

    View Slide

  37. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    lighthouse-ci
    IUUQTHJUIVCDPNBQQTMJHIUIPVTFDJ

    View Slide

  38. w ύϑΥʔϚϯεվળ͸஍ಓͳ࡞ۀͷ܁Γฦ͠
    w MJHIUIPVTFͰݱঢ়Λ೺Ѳ
    w !OFYUCVOEMFBOBMZ[FSͰ໰୊఺Λચ͍ग़͠
    w վળ࡞ۀ
    w MJHIUIPVTFDJΛ࢖͏ͱΑΓศརʂ
    ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩
    lighthouse-ci
    IUUQTHJUIVCDPNBQQTMJHIUIPVTFDJ

    View Slide

  39. ͓͠·͍
    @kaz_29

    View Slide