ϑϩϯτΤϯυͷվળΛܭଌ͠Α͏ ~ 2023/05/26 Kyoto.js 19 id:nanimono_demonai  

1. ࣗݾ঺հ 2. ϑϩϯτΤϯυͷվળ 3. ύϑΥʔϚϯεͷࢦඪ 4. SentryʹΑΔܭଌ  

ࣗݾ঺հ • id: nanimono_demonai • @NanimonoDaemon • େֶͰ͸ػցֶशͷݚڀ • ʮגࣜձࣾ͸ͯͳʯʹ2020೥ʹब৬ • ϑϩϯτΤϯυͷվળ΍͍Ζ͍Ζͳ͜ͱ • GCPͰBigQueryʹΑΔϨίϝϯυΛ࡞ͬͨΓ • ීஈ͸TypeScript/React/CSSͷ৘ใΛ௥͍ͬͯΔ • ੲSCP-JPͷ؅ཧऀ΍͍ͬͯ·ͨ͠ 3 

͸ͯͳϒϩά͸12೥໨ • 5/21ʢ೔ʣʹʮจֶϑϦϚ ౦ژ36ʯʹ͸ͯͳϒϩάͰग़ల͠·ͨ͠ ͸ͯͳϒϩά͸ʮ୭Ͱ΋ʯʮͲΜͳ͜ͱͰ΋ʯ ࣗ༝ʹָ͔͚͘͠Δ৔ॴͰ͋Γ͍ͨ • 12೥ͷϓϩμΫτʹ͸վળ͍ͨ͜͠ͱ͕ͨ͘͞Μʂ • վળ΋͍͍͚Ͳܭଌ͸͍ͨ͠ΑͶʂ 4 • https://bunfree.net/event/tokyo36/ ೥قͷ͋ΔϓϩμΫτΛվળ͢ΔͨΊʹɺܭଌΛ͢Δ 

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

ϑϩϯτΤϯυͷվળ • டংΛ΋ͨΒͤΔ • ։ൃπʔϧνΣʔϯΛϞμϯԽ͢Δ • σϦόϦʔ଎౓Λ্͛Δ • ύϑΥʔϚϯεΛվળ͢Δ • շదͳදࣔʹ͢Δ • දࣔ଎౓Λ্͛Δ 6 From Kyoto.js 12 https://speakerdeck.com/nanimonodemonai/ hatenaburogufalsehurontoendonizhi-xu- hamotarasaretafalseka ຊ೔ͷϝΠϯ͸ύϑΥʔϚϯεվળͷ࿩ 

զʑͷνʔϜͰ͸ • νʔϜ಺ͷϑϩϯτΤϯυʹڵຯͷ͋Δ༗ࢤͰఆྫձΛ։͍ͯվળҊΛ ·ͱΊͯɺεϓϦϯτʹ৐࣮ͤͯࢪ͍ͯ͠Δ • ྫ͑͹: • ݹ͍ϞδϡʔϧͷόʔδϣϯΞοϓ • CSSͷϏϧυج൫ͷվળ • IE11ରԠίʔυͷఫऩΛͯ͠όϯυϧαΠζΛܰݮ • ςετ΍LinterΛվળͯ͠։ൃମݧΛ্͛Δ 7 ։ൃମݧͷΈͳΒͣɺϢʔβʔମݧ΋͍͋͛ͨʂ 

ύϑΥʔϚϯεվળ • දࣔΛշదʹ͢Δ • දࣔޙͷཁૉͷͣΕΛܰݮ͢Δ • Accessibility • ϖʔδͷදࣔ଎౓Λ্͛Δ • Ԡ౴଎౓Λ্͛Δ • ίϯςϯπͷදࣔ଎౓Λ্͛Δ • Ϣʔβʔ͕ૢ࡞Ͱ͖Δ·Ͱͷ࣌ؒΛ୹͘͢Δ • etc… 8 ͸ͯͳϑΥτϥΠϑͷը૾Λදࣔ͢Δࡍʹɺը໘ʹζϨ͕ੜ͡ͳ͍Α͏มߋ͠·͠ ͨ - ͸ͯͳϒϩά։ൃϒϩά ը૾ͷදࣔͰը໘͕ζϨͳ͍Α͏มߋͨ͜͠ͱͰɺ͸ͯͳϒϩάͷԿ ͕վળ͞Εͨͷ͔ 

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

ϖʔδύϑΥʔϚϯεͷࢦඪ: Ұ෦ • ఻౷తͳࢦඪ • 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/ 

CWV - CoreWebVitals • Googleͷൃදͨ͠ॏཁࢦඪ3બ • ͍ͣΕ΋ϖʔδͷϢʔβʔମݧʹؔΘΔ΋ͷ • ϖʔδಡΈࠐΈ׬ྃͷࢦඪ • LCP (s) - Largest Contentful Paint: ࠷େͷ”ίϯςϯπ”ͷදࣔ࣌ؒ • ϖʔδͷԠ౴ੑͷࢦඪ • FID (s) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • ࢹ֮త҆ఆੑͷࢦඪ • CLS (ແ୯Ґ) - ϖʔδͷදࣔதʹى͖ͨίϯςϯπͷζϨͷࢦඪ 11 ίϯςϯπ

ςΩετɺը૾
എܠը૾ΛؚΉ ɺTWH
ཁૉɺനҎ֎ͷ
DBOWBT
ཁૉͷ͜ͱ 

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 

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ͷ༗༻ͳࢦඪʹҧ͍ͳ͍ 

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 

INP • ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷΋஗͍ ࣌ؒ • ͙͢ʹදࣔͰ͖ͳͯ͘΋ϩʔσΟϯάཁૉͳͲग़ͤ͹ྑ͍ • ϖʔδ͕INPΛฦͤͳ͍Մೳੑ͕͋Δ 15 • ϖʔδ্શͯ • ϝΠϯυΩϡϝϯτɺ͓ΑͼɺυΩϡϝϯτʹຒΊࠐ·Εͨiframe • ΠϯλϥΫγϣϯ • Ϛ΢εΫϦοΫ • λονεΫϦʔϯͷλοϓ • ෺ཧΩʔϘʔυ·ͨ͸ΦϯεΫϦʔϯΩʔϘʔυͷΩʔΛԡ͢ɻ • ϗόϦϯάͱεΫϩʔϧ͸ߟྀͤͣ • ࠷΋஗͍࣌ؒ • ΠϯλϥΫγϣϯ͕ଟ͍ͱ99%ileΛใࠂ 

4. SentryʹΑΔܭଌ  

ύϑΥʔϚϯεվળͷͨΊʹ • ϢʔβʔϥϯυͷύϑΥʔϚϯεΛܧଓతʹ؂ࢹ͍ͨ͠ • վળͷޮՌ͕ݕূͰ͖Δ • ύϑΥʔϚϯεͷԼམʹΞϥʔτΛ࢓ࠐΉ͜ͱΛ͢Δ͜ͱͰ ࢪࡦʹΑΔύϑΥʔϚϯεྼԽͳͲʹؾ͕͚ͭΔ • ͦͷͨΊʹɺ͜Μͳπʔϧ͕ཉ͍͠ • CWVΛܭଌͰ͖Δπʔϧ • ܭଌͨ݁͠ՌΛ·ͱΊͯ͘ΕΔπʔϧ 17 ܭଌ͕͍ͨ͠ 

CWVͷܭଌ • Chromeͷ։ൃऀπʔϧʹ͍͍ͭͯΔLighthouseͰܭଌͰ͖Δ • INP͸ʮφϏήʔγϣϯʯͰ͸ଌఆͰ͖ͳ͍ͷͷͰʮଌఆظؒʯͰଌఆ • Google Search Console͔Β΋֬ೝͰ͖Δ • WebPageTestͰܭଌͰ͖Δ • https://www.webpagetest.org/ • SentryΛ࢖͏ • https://sentry.io 18 

Sentryͱ͸Կ͔ • ΤϥʔͷՄࢹԽ • ؂ࢹ • Sentry/Performance Monitoring • SentryͷμογϡϘʔυ্ͰύϑΥʔϚϯεଌఆ͕Ͱ͖Δ • Core Web Vitalsͷܭଌ͕Մೳ • INP͸·ͩଌఆͰ͖ͳ͍ • SentryΛಋೖ͍ͯ͠ΔͳΒ͹؆୯ʹಋೖͰ͖Δ • ͦΕࣗମ΋JSͳΒϥΠϒϥϦΛಡΈࠐΉ͚ͩͰγϯϓϧʹಋೖՄೳ 19 

SentryΛબΜͩཧ༝ • ͢ͰʹSentryΛΤϥʔऩूͰಋೖ͍ͯ͠Δ • ύϑΥʔϚϯεͷྼԽʹ͸Τϥʔ͕൐͏͜ͱ͕͋ΔͷͰɺಉ͡ը໘Ͱ؍ ΕΔͱ͓ಘ • طଘͷSDKʹύϑΥʔϚϯεଌఆػೳΛࡌ͚ͬΔ࢓૊ΈͰಋೖՄೳ • ͞·͟·ϒϥ΢βͷCWV͕ܭଌͰ͖Δ • ※ Ұ෦ͷࢦඪ͸Chromeͷ΋ͷ͔͠ݟΕͳ͍ 20 

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

ಋೖͯ͠ؾ͕͍ͭͨ͜ͱ1 • SDKΛonʹ͚ͨͩ͠Ͱ͸ɺσʔλ͕όϥόϥͰղੳ͕ͮ͠Β͍ • σϑΥϧτͰ͸URL͕ه࿥୯ҐͰ͋Δ͕… • ϒϩά͸ϚϧνςφϯτͰ • URLͷ਺͕͔ͳΓଟ͍ • ͔͠͠ɺURL͕ҧͬͯ΋ಉ͡छྨͷϖʔδΛه࿥୯Ґͱ͍ͨ͠ • ಉ͡छྨͷϖʔδͰ΋ϒϩάʹΑͬͯ܏޲͕ҧ͏ 22 ܭଌ୯Ґͷ੔ཧΛ͢Δඞཁ͕͋ͬͨ 

੔ཧͨ͠಺༰ • ه࿥୯Ґ: transaction-name • ϖʔδͷछྨͰCWVΛܭଌ͢Δ • छྨ: • ϒϩάͷهࣄϖʔδ • Ұཡϖʔδ • ؅ཧը໘ͷϖʔδ͝ͱ • ϒϩά͝ͱʹҧ͏ه࿥୯Ґʹ͢Δ • ͜ΕҎ֎ʹৄ͍͠಺༰Λݟ͚ͨΕ͹ɺSentryͷλάΛ࢖ͬͯ֬ೝ͢Δ 23 

ಋೖͯ͠ؾ͕͍ͭͨ͜ͱ2 • ͦͷଞ • Sentryͷه࿥Ͱ͖Δ૯਺͸ແݶͰ͸ͳ͍ͷͰɺαϯϓϦϯά͍ͯ͠Δ • σϑΥϧτͷμογϡϘʔυΑΓ΋ɺݟ͍ͨ΋ͷΛ·ͱΊ͍ͨ 24 

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

ܭଌج൫Λ੔͑ͨͷͰվળͰ͖ͦ͏ͩͥ • LCP͕஗͍ϖʔδΛμογϡϘʔυ͔Βݟ͚ͭͯ͜ΒΕΔ • ۩ମతʹ͸هࣄҰཡϖʔδ • SentryͷμογϡϘʔυ͔ΒݸผϖʔδͷϨίʔυΛݟΔͱ • ը૾ಡΈࠐΈ͕ଟ͍ϖʔδͰ͋Δ͜ͱ͕Θ͔Δ • LCPʹӨڹ͢Δઌ಄ͷํͷը૾͔ΒಡΈࠐ·Ε͍ͯͳ͍ • → ʮը૾ͷಡΈࠐΈॱΛ౷੍ͯ͠΍Ε͹LCP͕վળ͢Δʯ ͱ͍͏Ծઆཱ͕ͭ • ͜ΕΛIssueʹͯ͠վળͷΠςϨʔγϣϯΛճ͢ 26 

Sentry͚ͩͰվળํ๏͕ؾ͕͚ͭΔ͔ʁ • ஗͍ϖʔδΛݟ͚ͭͨΒखݩͷLighthouseΛ૸ΒͤΔ • ʮվળͰ͖Δ߲໨ʯ͕ώϯτ • ࠓճͷྫͰ͸ʮΦϑεΫϦʔϯը૾ͷ஗ԆಡΈࠐΈʯ • खݩͷLighthouse͸͋͘·Ͱ̍αϯϓϧ • SentryʹஷΊΔ͜ͱͰશମ؍͕͔ͭΊΔ 27 Sentry͕ศར 

બΜͰΑ͔͔ͬͨʁ • ܭଌ͠΍͍͢μογϡϘʔυΛ૊ΊͯΑ͔ͬͨ • ݁Ռɺશମ؍ΛಘΒΕͨ • ݸผͷΠϕϯτʹ͍ͭͯ΋ɺϦΫΤετͷ΢ΥʔλʔϑΥʔϧ͕֬ೝͰ ͖ͯɺLighthouseΛݟΔΑ͏ͳײ֮ͰΑ͔ͬͨ 28 Կ͕໰୊͔ɺԿΛվળ͢Δ΂͖͔આ໌͢ΔͨΊͷπʔϧΛಘΒΕͨ 

ܭଌπʔϧͷ੔උ͕Ͱ͖ͨͷͰ ࣍͸վળͷࢪࡦΛ΍͍ͬͯͧ͘ʂ 29 

·ͱΊ • CoreWebVitalsͷۙگΛ঺հ • Sentry Λ࢖͏͜ͱͰύϑΥʔϚϯεͷܭଌج൫Λ࡞੒Ͱ͖ͨ • ϑϧϚωʔδυͳͷͰ޻਺Λ͔͚ͣʹ࣮ݱͰ͖ͨ • Τϥʔऩू΋ύϑΥʔϚϯε΋ಉ͡ը໘ͰͰ͖Δ • ύϑΥʔϚϯεͷঢ়گΛݟ΍͍͢μογϡϘʔυ͕Ͱ͖ͨ • ͸ͯͳϒϩάͷվળ͸ܭଌج൫Λಘͯ·͢·͢Ճ଎͍͖ͤͯ͞·͢ 30