Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ 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ʹؔ͢Δ਍அ
  2. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ Google Lighthouse - Performance ओͳࢦඪ • First Contentful Paint(FCP)

    Ϣʔβʔ͕ϖʔδʹΞΫηεͨ͠ޙɺϒϥ΢β͕࠷ॳͷ%0.ίϯςϯπΛϨϯμϦϯά͢Δͷʹ͔͔Δ࣌ؒ • Time to Interactive(TTI) ϖʔδ͕׬શʹΠϯλϥΫςΟϒʹͳΔ·Ͱʹ͔͔Δ࣌ؒ • Speed Index ϖʔδϩʔυ࣌ʹίϯςϯπ͕ࢹ֮తʹදࣔ͞ΕΔ·Ͱͷ࣌ؒ • Total Blocking Time(TBT) Ϛ΢εΫϦοΫ εΫϦʔϯλοϓ ΩʔೖྗͳͲͷϢʔβೖྗʹରͯ͠ϖʔδ͕Ԡ౴͠ͳ͍Α͏ʹϒϩοΫ͞Εͨ࣌ؒͷ߹ܭ • Largest Contentful Paint(LCP) ϖʔδͷϝΠϯίϯςϯπ͕Ϣʔβʔʹݟ͑ΔΑ͏ʹͳΔ·Ͱͷ࣌ؒ ࠷େͷίϯςϯπཁૉ͕ը໘ʹϨϯμϦϯά͞ΕΔ࣌ؒ
  3. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @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
  4. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @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
  5. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @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 ൈਮʣ Կ͕໰୊͔ʜ
  6. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @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 ֤ϖʔδͰ໿࡟ݮ
  7. ϑϩϯτΤϯυΞϓϦͷύϑΥʔϚϯεվળΛͨ͠࿩ @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'; ݺͼग़͠ํ