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

はてなブログのブログ表示に必要なJSを1/6にした話

NanimonoDemonai
November 15, 2023
550

 はてなブログのブログ表示に必要なJSを1/6にした話

2023/11/16 Hatena Engineer Seminar #27「パフォーマンスチューニング編」

NanimonoDemonai

November 15, 2023
Tweet

Transcript

  1. ύϑΥʔϚϯεվળ • දࣔΛշదʹ͢Δ • දࣔޙͷཁૉͷͣΕΛܰݮ͢Δ • Accessibility • ϖʔδͷදࣔ଎౓Λ্͛Δ •

    Ԡ౴଎౓Λ্͛Δ • ίϯςϯπͷදࣔ଎౓Λ্͛Δ • Ϣʔβʔ͕ૢ࡞Ͱ͖Δ·Ͱͷ࣌ؒΛ୹͘͢Δ • etc… 6 ͸ͯͳϑΥτϥΠϑͷը૾Λදࣔ͢Δࡍʹɺը໘ʹζϨ͕ੜ͡ͳ͍Α͏มߋ͠·͠ ͨ - ͸ͯͳϒϩά։ൃϒϩά ը૾ͷදࣔͰը໘͕ζϨͳ͍Α͏มߋͨ͜͠ͱͰɺ͸ͯͳϒϩάͷԿ ͕վળ͞Εͨͷ͔
  2. ϖʔδύϑΥʔϚϯεͷࢦඪ: Ұ෦ • ఻౷తͳࢦඪ • TTFB (s) - Time To

    First Byte: ϖʔδͷμ΢ϯϩʔυ։࢝࣌ؒ • Page Weight (byte) -ϖʔδͷαΠζ • ϖʔδಡΈࠐΈ׬ྃͷࢦඪ • FCP (s) -First Contentful Paint : ࠷ॳͷ”ίϯςϯπ”͕දࣔ͞Εͨ࣌ؒ • LCP (s) - Largest Contentful Paint: ࠷େͷ”ίϯςϯπ”ͷදࣔ࣌ؒ • Speed Index (s) - ϖʔδͷදࣔ׬ྃ཰ΛՃຯͨ͠දࣔ࣌ؒ • ϖʔδͷԠ౴ੑͷࢦඪ • FID (s) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • TTI (s) - Time to Interactive: ૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • TBT (s) - Total Blocking Time: FCPͱTTIͷ߹ܭ • INP (s) -Interaction to Next Paint: ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷΋஗͍࣌ؒ • ࢹ֮త҆ఆੑͷࢦඪ • CLS (ແ୯Ґ) - ϖʔδͷදࣔதʹى͖ͨίϯςϯπͷζϨͷࢦඪ 8 ίϯςϯπ ςΩετɺը૾ എܠը૾ΛؚΉ ɺTWH ཁૉɺനҎ֎ͷDBOWBTཁૉͷ͜ͱ https://web.dev/metrics/
  3. CWV - CoreWebVitals • Googleͷൃදͨ͠ॏཁࢦඪ3બ • ͍ͣΕ΋ϖʔδͷϢʔβʔମݧʹؔΘΔ΋ͷ • ϖʔδಡΈࠐΈ׬ྃͷࢦඪ •

    LCP (s) - Largest Contentful Paint: ࠷େͷ”ίϯςϯπ”ͷදࣔ࣌ؒ • ϖʔδͷԠ౴ੑͷࢦඪ • FID (s) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • ࢹ֮త҆ఆੑͷࢦඪ • CLS (ແ୯Ґ) - ϖʔδͷදࣔதʹى͖ͨίϯςϯπͷζϨͷࢦඪ 9 ίϯςϯπ ςΩετɺը૾ എܠը૾ΛؚΉ ɺTWH ཁૉɺനҎ֎ͷDBOWBTཁૉͷ͜ͱ
  4. CWVͷۙگ - CWVͷࢦඪͷมߋ • ͜Ε·Ͱ • FID (sec) - First

    Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • 2024೥3݄͔Β • INP (sec) -Interaction to Next Paint ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷ ΋஗͍࣌ؒ 10 ͢΂ͯͷΠϯλϥΫγϣϯʹجͮ͘ͷͰɺԠ౴ੑΛแׅతʹධՁ INP͸FIDΑΓ΋શମతͳԠ౴ੑͷΑΓ৴པੑͷߴ͍ࢦඪ https://developers.google.com/search/blog/2023/05/introducing-inp
  5. INP • ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷΋஗͍ ࣌ؒ • ͙͢ʹදࣔͰ͖ͳͯ͘΋ϩʔσΟϯάཁૉͳͲग़ͤ͹ྑ͍ • ϖʔδ͕INPΛฦͤͳ͍Մೳੑ͕͋Δ 11 •

    ϖʔδ্શͯ • ϝΠϯυΩϡϝϯτɺ͓ΑͼɺυΩϡϝϯτʹຒΊࠐ·Εͨiframe • ΠϯλϥΫγϣϯ • Ϛ΢εΫϦοΫ • λονεΫϦʔϯͷλοϓ • ෺ཧΩʔϘʔυ·ͨ͸ΦϯεΫϦʔϯΩʔϘʔυͷΩʔΛԡ͢ɻ • ϗόϦϯάͱεΫϩʔϧ͸ߟྀͤͣ • ࠷΋஗͍࣌ؒ • ΠϯλϥΫγϣϯ͕ଟ͍ͱ99%ileΛใࠂ
  6. Sentryͱ͸Կ͔ • ΤϥʔͷՄࢹԽ • ؂ࢹ • Sentry/Performance Monitoring • SentryͷμογϡϘʔυ্ͰύϑΥʔϚϯεଌఆ͕Ͱ͖Δ

    • Core Web Vitalsͷܭଌ͕Մೳ • INP͸·ͩଌఆͰ͖ͳ͍ • SentryΛಋೖ͍ͯ͠ΔͳΒ͹؆୯ʹಋೖͰ͖Δ • ͦΕࣗମ΋JSͳΒϥΠϒϥϦΛಡΈࠐΉ͚ͩͰγϯϓϧʹಋೖՄೳ 14
  7. ಋೖͯ͠ؾ͕͍ͭͨ͜ͱ • SDKΛonʹ͚ͨͩ͠Ͱ͸ɺσʔλ͕όϥόϥͰղੳ͕ͮ͠Β͍ • σϑΥϧτͰ͸URL͕ه࿥୯ҐͰ͋Δ͕… • ϒϩά͸ϚϧνςφϯτͰ • URLͷ਺͕͔ͳΓଟ͍ •

    ͔͠͠ɺURL͕ҧͬͯ΋ಉ͡छྨͷϖʔδΛه࿥୯Ґͱ͍ͨ͠ • ಉ͡छྨͷϖʔδͰ΋ϒϩάʹΑͬͯ܏޲͕ҧ͏ 17 ܭଌ୯Ґͷ੔ཧΛ͢Δඞཁ͕͋ͬͨ
  8. ੔ཧͨ͠಺༰ • ه࿥୯Ґ: transaction-name • ϖʔδͷछྨͰCWVΛܭଌ͢Δ • छྨ: • ϒϩάͷهࣄϖʔδ

    • Ұཡϖʔδ • ؅ཧը໘ͷϖʔδ͝ͱ • ϒϩά͝ͱʹҧ͏ه࿥୯Ґʹ͢Δ • ͜ΕҎ֎ʹৄ͍͠಺༰Λݟ͚ͨΕ͹ɺSentryͷλάΛ࢖ͬͯ֬ೝ͢Δ 18
  9. ܭଌج൫Λ੔͑ͨͷͰվળ • LCP͕஗͍ϖʔδΛμογϡϘʔυ͔Βݟ͚ͭͯ͜ΒΕΔ • ۩ମతʹ͸هࣄҰཡϖʔδ • SentryͷμογϡϘʔυ͔ΒݸผϖʔδͷϨίʔυΛݟΔͱ • ը૾ಡΈࠐΈ͕ଟ͍ϖʔδͰ͋Δ͜ͱ͕Θ͔Δ •

    LCPʹӨڹ͢Δઌ಄ͷํͷը૾͔ΒಡΈࠐ·Ε͍ͯͳ͍ • → ʮը૾ͷಡΈࠐΈॱΛ౷੍ͯ͠΍Ε͹LCP͕վળ͢Δʯ ͱ͍͏Ծઆཱ͕ͭ • ը૾ͷಡΈࠐΈॱΛίϯτϩʔϧ͢ΔվળΛಋೖ 20
  10. ͸ͯͳϒϩάͷJS - ྺ࢙ͱແடং • ͸ͯͳϒϩά͸೔ʑ։ൃ͞Ε͍ͯΔ • ϑϩϯτΤϯυͷίʔυ͸ଟ͍ • աڈݱࡏͷϑϩϯτΤϯυͷΪϟοϓ͕ແடংΛੜΉ •

    ݴޠ, ελΠϧ, ςετ, etc… • Ϟδϡʔϧܗࣜͷࠞࡏ 23 From Kyoto.js 12 https://speakerdeck.com/nanimonodemonai/ hatenaburogufalsehurontoendonizhi-xu- hamotarasaretafalseka ࠓճ͸ϞδϡʔϧΛ੔͑ͨ࿩ +BWB4DSJQU ߦ 5ZQF4DSJQU ߦ
  11. JSͷϞδϡʔϧܗࣜʹ͍ͭͯ • JSͷϞδϡʔϧܗࣜ • CJS: Node.jsͰ࠾༻͞Ε͍ͯΔܗࣜ • requireؔ਺ͰϞδϡʔϧղܾ • ESM:

    ES2015͔ΒJSͷ࢓༷ʹೖͬͨϞδϡʔϧܗࣜ • import/exportจͰϞδϡʔϧղܾ • ͸ͯͳϒϩάͰ͸͜ΕΒ͕ࠞࡏ • Ϗϧυ࣌ʹESMΛCJSʹม׵͍ͯͨ͠ (Babel preset-envͱtscon fi gͰmodule = “common”ͱ͍ͯͨ͠) 29
  12. CJS→ESMԽͷ΍Γํ: ͞ΒͳΔ͏·ຯ: ϑΟʔνϟʔϑϥά • ͞Βʹ৽ػೳ։ൃ͕ศརʹͳΔ • ϑΟʔνϟʔϑϥά͕͋Ε͹… • ։ൃମݧ͕޲্ •

    ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ • σϞ΋͠΍͘͢ • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠΋Β͏ͷ͕༰қʹͳΔ • σϞΛ௨ͯ͡ϦϦʔε·Ͱʹ׬੒౓Λ্͛ΒΕΔ • ͦͷଞʹ΋ • ABςετͱ͔ 33 ͋ͱͰ΋͏Ұճ࿩͠·͢
  13. CJS→ESMԽͷ΍Γํ: ࡞ۀฤ • େྔʹ͋ΔͷͰࣗಈม׵ • jscodeshiftͷcommonjs-to-es-module-codemodΛ࢖༻ • ESMʹ౷Ұͨ͠ΒɺWebpack͕ϞδϡʔϧղܾͷΤϥʔΛग़͢Α͏ʹ • ػցతͳஔ׵ʹΑΔΤϥʔ΋ؾ͕͚ͭɺࣗ৴Λ࣋ͬͯҠߦ͕Ͱ͖ͨ

    34 ෺ྔ͸ׂ͕͋ͬͨͱ؆୯ʹͰ͖ͨ https://www.npmjs.com/package/commonjs-to-es-module-codemod https://www.npmjs.com/package/jscodeshift ࣗಈతʹஔ׵Ͱ͖ͳ͔ͬͨ΋ͷͷྫ • named export͍ͯ͠ͳ͍ͷʹnamed import͍ͯ͠ΔϞδϡʔϧ • ΦϒδΣΫτΛ࡞͔ͬͯΒdefault export͍ͯ͠ΔϞδϡʔϧ
  14. ϒϩάͷJSαΠζ࡟ݮͰύϑΥʔϚϯεվળ • ESMԽʹΑͬͯTreeShaking͕ޮ͖ɺJSͷαΠζ͕࡟ݮ • ಉ࣌ʹTreeShaking͕ޮ͘ϥΠϒϥϦʹม͑ͨ (lodash -> lodash-es) • ߹Θͤͯόϯυϧͷ࠷దԽ΋࣮ࢪ

    • ϒϩάͷμογϡϘʔυͷJSΛϒϩάදࣔ໘͔Βୀආ • ߹Θͤͯάϩʔόϧϔομ΋όϯυϧ෼ׂ 37 ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳ+4͕લ݄ൺ
  15. ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳJS͕લ݄ൺ1/6 39 ݱࡏ͸൒೥લͷ10෼ͷ1αΠζ վળલ ݄ όϯυϧ෼ׂޙ  &4.౷Ұޙ  ݱࡏ

    IBUFOBCMPHKT .# ,# ,# ,# ,# ,# ,# ,# CVOEMF HMPCBMIFBEFSKT ,# ,# ,# ,# ,# ,# ϖʔδڞ௨෦෼ WFOEPSKT .# ,# ,# ,# ϖʔδڞ௨෦෼ DPNNPOTKT ,# ,# ߹ܭ .# ,# ,# ,# ,# ,# ,# ,#
  16. CJS→ESMԽͷ΍Γํ: આಘฤ (࠶ܝ) • ৽ػೳ։ൃ͕ศརʹͳΔ • ϑΟʔνϟʔϑϥά͕͋Ε͹… • ։ൃମݧ͕޲্ •

    ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ • σϞ΋͠΍͘͢ • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠΋Β͏ͷ͕༰қʹͳΔ • σϞΛ௨ͯ͡ϦϦʔε·Ͱʹ׬੒౓Λ্͛ΒΕΔ • ͦͷଞʹ΋ • ABςετͱ͔ 43 ESMԽͰϑΟʔνϟʔϑϥάΛ࣮ݱͨ͠
  17. ϑΟʔνϟʔϑϥά • Ϗϧυ࣌ʹDead Code࡟আͰϑΟʔνϟʔϑϥάΛ࣮ݱ • WebpackͰ Ϗϧυ࣌ʹ FEATURES.featureA Λ false͔trueʹม׵͢Δ

    • Webpack De fi ne Plugin • WebpackͰ if(false){ } ͱͳΔՕॴΛফͯ͠΋Β͏ • Webpack.optimizeͷػೳ • TreeShakingͰimport͍ͯ͠Δ͕࢖ΘΕͯͳ͍Ϟδϡʔϧ͸ফ͑Δ 46 if (FEATURES.hogehoge){ / / fugafuga const elem = document.querySelector<HTMLElement>('.js - fugafuga'); if (elem) renderHogehoge(elem); }
  18. ·ͱΊ • Sentry Λ࢖͏͜ͱͰύϑΥʔϚϯεͷܭଌج൫Λ࡞੒Ͱ͖ͨ • ϒϩάͷJSΛ࡟ݮ • ͦͷͨΊʹESMԽΛ࣮ࢪ • όϯυϧͷ࡞ΓํΛݟ௚ͯ͠ύϑΥʔϚϯεվળ

    • TreeShakingͰϑΟʔνϟʔϑϥάΛ࣮ݱ 48 ͜Ε͔Β΋ϒϩάͷϑϩϯτΤϯυΛΑͯ͘͠ɺ ύϑΥʔϚϯε΋։ൃମݧ΋্͍͛ͯͧ͘