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

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