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

登壇資料.pdf

NanimonoDemonai
May 29, 2023
180

 登壇資料.pdf

NanimonoDemonai

May 29, 2023
Tweet

Transcript

  1. ϑϩϯτΤϯυͷվળΛܭଌ͠Α͏


    ~
    2023/05/26 Kyoto.js 19


    id:nanimono_demonai

    View full-size slide

  2. 1. ࣗݾ঺հ


    2. ϑϩϯτΤϯυͷվળ


    3. ύϑΥʔϚϯεͷࢦඪ


    4. SentryʹΑΔܭଌ

    View full-size slide

  3. ࣗݾ঺հ
    • id: nanimono_demonai


    • @NanimonoDaemon


    • େֶͰ͸ػցֶशͷݚڀ


    • ʮגࣜձࣾ͸ͯͳʯʹ2020೥ʹब৬


    • ϑϩϯτΤϯυͷվળ΍͍Ζ͍Ζͳ͜ͱ


    • GCPͰBigQueryʹΑΔϨίϝϯυΛ࡞ͬͨΓ


    • ීஈ͸TypeScript/React/CSSͷ৘ใΛ௥͍ͬͯΔ


    • ੲSCP-JPͷ؅ཧऀ΍͍ͬͯ·ͨ͠
    3

    View full-size slide

  4. ͸ͯͳϒϩά͸12೥໨
    • 5/21ʢ೔ʣʹʮจֶϑϦϚ ౦ژ36ʯʹ͸ͯͳϒϩάͰग़ల͠·ͨ͠


    ͸ͯͳϒϩά͸ʮ୭Ͱ΋ʯʮͲΜͳ͜ͱͰ΋ʯ


    ࣗ༝ʹָ͔͚͘͠Δ৔ॴͰ͋Γ͍ͨ


    • 12೥ͷϓϩμΫτʹ͸վળ͍ͨ͜͠ͱ͕ͨ͘͞Μʂ


    • վળ΋͍͍͚Ͳܭଌ͸͍ͨ͠ΑͶʂ
    4
    • https://bunfree.net/event/tokyo36/
    ೥قͷ͋ΔϓϩμΫτΛվળ͢ΔͨΊʹɺܭଌΛ͢Δ

    View full-size slide

  5. 2. ϑϩϯτΤϯυͷվળ

    View full-size slide

  6. ϑϩϯτΤϯυͷվળ
    • டংΛ΋ͨΒͤΔ


    • ։ൃπʔϧνΣʔϯΛϞμϯԽ͢Δ


    • σϦόϦʔ଎౓Λ্͛Δ


    • ύϑΥʔϚϯεΛվળ͢Δ


    • շదͳදࣔʹ͢Δ


    • දࣔ଎౓Λ্͛Δ
    6
    From Kyoto.js 12
    https://speakerdeck.com/nanimonodemonai/
    hatenaburogufalsehurontoendonizhi-xu-
    hamotarasaretafalseka
    ຊ೔ͷϝΠϯ͸ύϑΥʔϚϯεվળͷ࿩

    View full-size slide

  7. զʑͷνʔϜͰ͸
    • νʔϜ಺ͷϑϩϯτΤϯυʹڵຯͷ͋Δ༗ࢤͰఆྫձΛ։͍ͯվળҊΛ
    ·ͱΊͯɺεϓϦϯτʹ৐࣮ͤͯࢪ͍ͯ͠Δ


    • ྫ͑͹:


    • ݹ͍ϞδϡʔϧͷόʔδϣϯΞοϓ


    • CSSͷϏϧυج൫ͷվળ


    • IE11ରԠίʔυͷఫऩΛͯ͠όϯυϧαΠζΛܰݮ


    • ςετ΍LinterΛվળͯ͠։ൃମݧΛ্͛Δ
    7
    ։ൃମݧͷΈͳΒͣɺϢʔβʔମݧ΋͍͋͛ͨʂ

    View full-size slide

  8. ύϑΥʔϚϯεվળ
    • දࣔΛշదʹ͢Δ


    • දࣔޙͷཁૉͷͣΕΛܰݮ͢Δ


    • Accessibility


    • ϖʔδͷදࣔ଎౓Λ্͛Δ


    • Ԡ౴଎౓Λ্͛Δ


    • ίϯςϯπͷදࣔ଎౓Λ্͛Δ


    • Ϣʔβʔ͕ૢ࡞Ͱ͖Δ·Ͱͷ࣌ؒΛ୹͘͢Δ


    • etc…
    8
    ͸ͯͳϑΥτϥΠϑͷը૾Λදࣔ͢Δࡍʹɺը໘ʹζϨ͕ੜ͡ͳ͍Α͏มߋ͠·͠
    ͨ - ͸ͯͳϒϩά։ൃϒϩά
    ը૾ͷදࣔͰը໘͕ζϨͳ͍Α͏มߋͨ͜͠ͱͰɺ͸ͯͳϒϩάͷԿ
    ͕վળ͞Εͨͷ͔

    View full-size slide

  9. 3. ύϑΥʔϚϯεͷࢦඪ

    View full-size slide

  10. ϖʔδύϑΥʔϚϯεͷࢦඪ: Ұ෦
    • ఻౷తͳࢦඪ


    • 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 (ແ୯Ґ) - ϖʔδͷදࣔதʹى͖ͨίϯςϯπͷζϨͷࢦඪ
    10
    ίϯςϯπ
    ςΩετɺը૾ എܠը૾ΛؚΉ
    ɺTWH
    ཁૉɺനҎ֎ͷDBOWBTཁૉͷ͜ͱ
    https://web.dev/metrics/

    View full-size slide

  11. CWV - CoreWebVitals
    • Googleͷൃදͨ͠ॏཁࢦඪ3બ


    • ͍ͣΕ΋ϖʔδͷϢʔβʔମݧʹؔΘΔ΋ͷ


    • ϖʔδಡΈࠐΈ׬ྃͷࢦඪ


    • LCP (s) - Largest Contentful Paint: ࠷େͷ”ίϯςϯπ”ͷදࣔ࣌ؒ


    • ϖʔδͷԠ౴ੑͷࢦඪ


    • FID (s) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ


    • ࢹ֮త҆ఆੑͷࢦඪ


    • CLS (ແ୯Ґ) - ϖʔδͷදࣔதʹى͖ͨίϯςϯπͷζϨͷࢦඪ
    11
    ίϯςϯπ
    ςΩετɺը૾ എܠը૾ΛؚΉ
    ɺTWH
    ཁૉɺനҎ֎ͷDBOWBTཁૉͷ͜ͱ

    View full-size slide

  12. CWVͷۙگ1 - SEOͱCWV.1
    • 4݄ͷGoogleΞοϓσʔτͰݕࡧϥϯΩϯάγεςϜ͔Β


    ʮϖʔδ ΤΫεϖϦΤϯε γεςϜʯͷ߲໨͕ͳ͘ͳͬͨ


    • Wayback machine 3݄ https://web.archive.org/web/20230315210053/https://developers.google.com/search/docs/appearance/ranking-systems-guide?hl=ja


    • Google ݕࡧϥϯΩϯά γεςϜͷ͝঺հ


    • ϖʔδ ΤΫεϖϦΤϯε γεςϜ


    • Ϣʔβʔ͸ɺ༏Εͨϖʔδ ΤΫεϖϦΤϯεΛఏڙ͢ΔαΠτΛ޷Έ·͢ɻͦͷͨΊ Google ͸ɺϖʔδ ΤΫεϖϦΤϯε γεςϜΛಋೖͯ͠ɺಡΈࠐΈ͕଎
    ͍͔ɺϞόΠϧ ϑϨϯυϦʔ͔ɺ൥Θ͍͠ΠϯλʔεςΟγϟϧ͕ͳ͍͔ɺ҆શͳख๏Ͱఏڙ͞Ε͍ͯΔ͔ͳͲɺ͞·͟·ͳج४ͰϖʔδΛධՁ͍ͯ͠·͢ɻݕ
    ࡧΫΤϦʹҰக͢Δީิ͕ଟ਺͋Γɺؔ࿈ੑ͕ಉఔ౓ͷ৔߹ɺ͜ͷγεςϜʹΑΓϖʔδ ΤΫεϖϦΤϯε͕༏Εͨίϯςϯπ͕༏ઌ͞ΕΔΑ͏ʹͳΓ·͢ɻ


    • ͔͠͠ʮϖʔδ ΤΫεϖϦΤϯεͷ Google ݕࡧ݁Ռ΁ͷӨڹʹ͍ͭͯʯͷϖʔ
    δ͸͋Δ


    • >Google ͷίΞ ϥϯΩϯά γεςϜ͸ɺ༏Εͨϖʔδ ΤΫεϖϦΤϯεΛ
    ఏڙ͢ΔίϯςϯπΛߴ͘ධՁ͢ΔΑ͏ʹઃܭ͞Ε͍ͯ·͢ɻ
    12
    https://developers.google.com/search/docs/appearance/page-experience?hl=ja


    https://developers.google.com/search/docs/appearance/ranking-systems-guide?hl=ja


    View full-size slide

  13. CWVͷۙگ1 - SEOͱCWV.2
    • ʮϖʔδ ΤΫεϖϦΤϯεͷ Google ݕࡧ݁Ռ΁ͷӨڹʹ͍ͭͯʯʹॻ
    ͔Ε͍ͯΔʮCWV͸ॏཁ͔ʯʹ͍ͭͯ


    • > Core Web Vitals Λվળ͢Δ͜ͱΛڧ͓͘͢͢Ί


    • > ߴ͍ϥϯΩϯά͕อূ͞ΕΔΘ͚Ͱ͸͋Γ·ͤΜ


    Core Web Vitals ͸ॏཁͰ͔͢ʁ


    ݕࡧ݁ՌͰͷϥϯΩϯάΛ্͛ɺશൠతʹ༏ΕͨϢʔβʔ ΤΫεϖϦΤϯεΛఏڙͰ͖ΔΑ͏ɺαΠτॴ༗ऀͷօ༷ʹ͸ɺCore Web Vitals Λվળ͢Δ͜ͱ
    Λڧ͓͘͢͢Ί͠·͢ɻͨͩ͠ɺ༏Εͨϖʔδ ΤΫεϖϦΤϯεʹؔ܎͢Δͷ͸ɺCore Web Vitals ͚ͩͰ͸͋Γ·ͤΜɻSearch Console ͷ Core Web
    Vitals Ϩϙʔτͷσʔλ΍αʔυύʔςΟͷ Core Web Vitals Ϩϙʔτͷ݁Ռ͕ྑ޷ͳঢ়ଶͰ͋ͬͯ΋ɺߴ͍ϥϯΩϯά͕อূ͞ΕΔΘ͚Ͱ͸͋Γ·ͤΜɻ
    13
    SEOʹޮ͔͍͘͏࿩ΑΓ΋ɺUXͷ༗༻ͳࢦඪʹҧ͍ͳ͍

    View full-size slide

  14. CWVͷۙگ2 - CWVͷࢦඪͷมߋ
    • ͜Ε·Ͱ


    • FID (sec) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ


    • 2024೥3݄͔Β


    • INP (sec) -Interaction to Next Paint


    ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷
    ΋஗͍࣌ؒ
    14
    ͢΂ͯͷΠϯλϥΫγϣϯʹجͮ͘ͷͰɺԠ౴ੑΛแׅతʹධՁ


    INP͸FIDΑΓ΋શମతͳԠ౴ੑͷΑΓ৴པੑͷߴ͍ࢦඪ
    https://developers.google.com/search/blog/2023/05/introducing-inp

    View full-size slide

  15. INP
    • ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷΋஗͍
    ࣌ؒ


    • ͙͢ʹදࣔͰ͖ͳͯ͘΋ϩʔσΟϯάཁૉͳͲग़ͤ͹ྑ͍


    • ϖʔδ͕INPΛฦͤͳ͍Մೳੑ͕͋Δ
    15
    • ϖʔδ্શͯ


    • ϝΠϯυΩϡϝϯτɺ͓ΑͼɺυΩϡϝϯτʹຒΊࠐ·Εͨiframe


    • ΠϯλϥΫγϣϯ


    • Ϛ΢εΫϦοΫ


    • λονεΫϦʔϯͷλοϓ


    • ෺ཧΩʔϘʔυ·ͨ͸ΦϯεΫϦʔϯΩʔϘʔυͷΩʔΛԡ͢ɻ


    • ϗόϦϯάͱεΫϩʔϧ͸ߟྀͤͣ


    • ࠷΋஗͍࣌ؒ


    • ΠϯλϥΫγϣϯ͕ଟ͍ͱ99%ileΛใࠂ


    View full-size slide

  16. 4. SentryʹΑΔܭଌ

    View full-size slide

  17. ύϑΥʔϚϯεվળͷͨΊʹ
    • ϢʔβʔϥϯυͷύϑΥʔϚϯεΛܧଓతʹ؂ࢹ͍ͨ͠


    • վળͷޮՌ͕ݕূͰ͖Δ


    • ύϑΥʔϚϯεͷԼམʹΞϥʔτΛ࢓ࠐΉ͜ͱΛ͢Δ͜ͱͰ


    ࢪࡦʹΑΔύϑΥʔϚϯεྼԽͳͲʹؾ͕͚ͭΔ


    • ͦͷͨΊʹɺ͜Μͳπʔϧ͕ཉ͍͠


    • CWVΛܭଌͰ͖Δπʔϧ


    • ܭଌͨ݁͠ՌΛ·ͱΊͯ͘ΕΔπʔϧ
    17
    ܭଌ͕͍ͨ͠

    View full-size slide

  18. CWVͷܭଌ
    • Chromeͷ։ൃऀπʔϧʹ͍͍ͭͯΔLighthouseͰܭଌͰ͖Δ


    • INP͸ʮφϏήʔγϣϯʯͰ͸ଌఆͰ͖ͳ͍ͷͷͰʮଌఆظؒʯͰଌఆ


    • Google Search Console͔Β΋֬ೝͰ͖Δ


    • WebPageTestͰܭଌͰ͖Δ


    • https://www.webpagetest.org/


    • SentryΛ࢖͏


    • https://sentry.io
    18

    View full-size slide

  19. Sentryͱ͸Կ͔
    • ΤϥʔͷՄࢹԽ


    • ؂ࢹ


    • Sentry/Performance Monitoring


    • SentryͷμογϡϘʔυ্ͰύϑΥʔϚϯεଌఆ͕Ͱ͖Δ


    • Core Web Vitalsͷܭଌ͕Մೳ


    • INP͸·ͩଌఆͰ͖ͳ͍


    • SentryΛಋೖ͍ͯ͠ΔͳΒ͹؆୯ʹಋೖͰ͖Δ


    • ͦΕࣗମ΋JSͳΒϥΠϒϥϦΛಡΈࠐΉ͚ͩͰγϯϓϧʹಋೖՄೳ
    19

    View full-size slide

  20. SentryΛબΜͩཧ༝
    • ͢ͰʹSentryΛΤϥʔऩूͰಋೖ͍ͯ͠Δ


    • ύϑΥʔϚϯεͷྼԽʹ͸Τϥʔ͕൐͏͜ͱ͕͋ΔͷͰɺಉ͡ը໘Ͱ؍
    ΕΔͱ͓ಘ


    • طଘͷSDKʹύϑΥʔϚϯεଌఆػೳΛࡌ͚ͬΔ࢓૊ΈͰಋೖՄೳ


    • ͞·͟·ϒϥ΢βͷCWV͕ܭଌͰ͖Δ


    • ※ Ұ෦ͷࢦඪ͸Chromeͷ΋ͷ͔͠ݟΕͳ͍
    20

    View full-size slide

  21. SentryͰܭଌͨ͠ޙͷμογϡϘʔυͷ༷ࢠ
    21
    ܭଌ͸͸ͯͳͰ؅ཧ͍ͯ͠Δϒϩάͷ
    Ұ෦͚͕ͩର৅

    View full-size slide

  22. ಋೖͯ͠ؾ͕͍ͭͨ͜ͱ1
    • SDKΛonʹ͚ͨͩ͠Ͱ͸ɺσʔλ͕όϥόϥͰղੳ͕ͮ͠Β͍


    • σϑΥϧτͰ͸URL͕ه࿥୯ҐͰ͋Δ͕…


    • ϒϩά͸ϚϧνςφϯτͰ


    • URLͷ਺͕͔ͳΓଟ͍


    • ͔͠͠ɺURL͕ҧͬͯ΋ಉ͡छྨͷϖʔδΛه࿥୯Ґͱ͍ͨ͠


    • ಉ͡छྨͷϖʔδͰ΋ϒϩάʹΑͬͯ܏޲͕ҧ͏
    22
    ܭଌ୯Ґͷ੔ཧΛ͢Δඞཁ͕͋ͬͨ

    View full-size slide

  23. ੔ཧͨ͠಺༰
    • ه࿥୯Ґ: transaction-name


    • ϖʔδͷछྨͰCWVΛܭଌ͢Δ


    • छྨ:


    • ϒϩάͷهࣄϖʔδ


    • Ұཡϖʔδ


    • ؅ཧը໘ͷϖʔδ͝ͱ


    • ϒϩά͝ͱʹҧ͏ه࿥୯Ґʹ͢Δ


    • ͜ΕҎ֎ʹৄ͍͠಺༰Λݟ͚ͨΕ͹ɺSentryͷλάΛ࢖ͬͯ֬ೝ͢Δ
    23

    View full-size slide

  24. ಋೖͯ͠ؾ͕͍ͭͨ͜ͱ2
    • ͦͷଞ


    • Sentryͷه࿥Ͱ͖Δ૯਺͸ແݶͰ͸ͳ͍ͷͰɺαϯϓϦϯά͍ͯ͠Δ


    • σϑΥϧτͷμογϡϘʔυΑΓ΋ɺݟ͍ͨ΋ͷΛ·ͱΊ͍ͨ
    24

    View full-size slide

  25. Sentry ͷσϑΥϧτͷμογϡϘʔυͰ͸ͳ͘ɺ࢖͍΍͍͢ܗʹ͢Δ
    25

    View full-size slide

  26. ܭଌج൫Λ੔͑ͨͷͰվળͰ͖ͦ͏ͩͥ
    • LCP͕஗͍ϖʔδΛμογϡϘʔυ͔Βݟ͚ͭͯ͜ΒΕΔ


    • ۩ମతʹ͸هࣄҰཡϖʔδ


    • SentryͷμογϡϘʔυ͔ΒݸผϖʔδͷϨίʔυΛݟΔͱ


    • ը૾ಡΈࠐΈ͕ଟ͍ϖʔδͰ͋Δ͜ͱ͕Θ͔Δ


    • LCPʹӨڹ͢Δઌ಄ͷํͷը૾͔ΒಡΈࠐ·Ε͍ͯͳ͍


    • → ʮը૾ͷಡΈࠐΈॱΛ౷੍ͯ͠΍Ε͹LCP͕վળ͢Δʯ


    ͱ͍͏Ծઆཱ͕ͭ


    • ͜ΕΛIssueʹͯ͠վળͷΠςϨʔγϣϯΛճ͢
    26

    View full-size slide

  27. Sentry͚ͩͰվળํ๏͕ؾ͕͚ͭΔ͔ʁ
    • ஗͍ϖʔδΛݟ͚ͭͨΒखݩͷLighthouseΛ૸ΒͤΔ


    • ʮվળͰ͖Δ߲໨ʯ͕ώϯτ


    • ࠓճͷྫͰ͸ʮΦϑεΫϦʔϯը૾ͷ஗ԆಡΈࠐΈʯ


    • खݩͷLighthouse͸͋͘·Ͱ̍αϯϓϧ


    • SentryʹஷΊΔ͜ͱͰશମ؍͕͔ͭΊΔ
    27
    Sentry͕ศར

    View full-size slide

  28. બΜͰΑ͔͔ͬͨʁ
    • ܭଌ͠΍͍͢μογϡϘʔυΛ૊ΊͯΑ͔ͬͨ


    • ݁Ռɺશମ؍ΛಘΒΕͨ


    • ݸผͷΠϕϯτʹ͍ͭͯ΋ɺϦΫΤετͷ΢ΥʔλʔϑΥʔϧ͕֬ೝͰ
    ͖ͯɺLighthouseΛݟΔΑ͏ͳײ֮ͰΑ͔ͬͨ
    28
    Կ͕໰୊͔ɺԿΛվળ͢Δ΂͖͔આ໌͢ΔͨΊͷπʔϧΛಘΒΕͨ

    View full-size slide

  29. ܭଌπʔϧͷ੔උ͕Ͱ͖ͨͷͰ


    ࣍͸վળͷࢪࡦΛ΍͍ͬͯͧ͘ʂ
    29

    View full-size slide

  30. ·ͱΊ
    • CoreWebVitalsͷۙگΛ঺հ


    • Sentry Λ࢖͏͜ͱͰύϑΥʔϚϯεͷܭଌج൫Λ࡞੒Ͱ͖ͨ


    • ϑϧϚωʔδυͳͷͰ޻਺Λ͔͚ͣʹ࣮ݱͰ͖ͨ


    • Τϥʔऩू΋ύϑΥʔϚϯε΋ಉ͡ը໘ͰͰ͖Δ


    • ύϑΥʔϚϯεͷঢ়گΛݟ΍͍͢μογϡϘʔυ͕Ͱ͖ͨ


    • ͸ͯͳϒϩάͷվળ͸ܭଌج൫Λಘͯ·͢·͢Ճ଎͍͖ͤͯ͞·͢
    30

    View full-size slide