リクルートグループ主催!『大規模メディアにおけるWeb開発の最前線』 https://business-and-creative.connpass.com/event/188628/
ඇػೳཁ݅ΛจԽʹ2020/12/10 @ Business & Creative
View Slide
Twitter: @yosuke_furukawaGithub: yosuke-furukawa࠷ۙͷ׆ಈ$ISPNF"EWJTPSZ#PBSE+4$POG+1PSHBOJ[FSFUD
ඇػೳཁ݅ʹͩ͜ΘΔ
ػೳཁ݅ͱඇػೳཁ݅• ػೳཁ݅ɿ࣮͠ͳ͖Ό͍͚ͳ͍ػೳϢʔβʔ͔ΒͷཁٻΛ͑ΔγεςϜͷػೳ• ඇػೳཁ݅ɿඞ࣮ͣ͠͠ͳ͖Ό͍͚ͳ͍Θ͚Ͱͳ͍͕ɺϓϩδΣΫτΛ্ͤ͞ΔͨΊʹඞཁͳ͜ͱ
ඇػೳཁ݅• ηΩϡϦςΟ• XSS/XSRF/DoS etc• ύϑΥʔϚϯε• SPA/PWA/AMP etc• ϝϯςφϯαϏϦςΟ• ςετॻ͘/e2e/storyboard etc
ػೳཁ݅Λຬͨͯ͠ظʹΘΕΔதͰͲ͜·Ͱඇػೳཁ݅ΛೖΕࠐΊΔ͔ͱ͍͏ͷ͕ΤϯδχΞͷҰछͷೳྗ
ඇػೳཁ݅จԽ• ߴͰϝϯςφϒϧͰΞΫηγϒϧͰૉΒ͍͠ͷΛ࡞ͬͨͱͯͦ͠ΕΛҡ࣋͠ଓ͚ΒΕͳ͚Εҙຯ͕ͳ͍ɻ• ύϑΥʔϚϯεʹͤΑϝϯςφϯαϏϦςΟʹͤΑɺҰ࣌తͳରࡦ͚ͩͰͳ͘ɺϝϯόʔͷҭؚΊͨ߃ٱతͳରࡦ͕ඞཁɻ
ϦΫϧʔτͱχδϘοΫε
ϦΫϧʔτͱχδϘοΫε• ϦΫϧʔτͷϑϩϯτΤϯυΛڠۀ͍ͯ͠Δύʔτφʔ• ϦΫϧʔτଆͷϑϩϯτΤϯυ༷͕ະ֬ఆͩͬͨΓɺٕज़ελοΫ͕ܾ·ͬͯͳ͔ͬͨΓͱ͍ͬͨෆ࣮֬ੑͷߴ͍ΞϓϦέʔγϣϯͰ࣮֬ʹ࡞Δ͜ͱʹओ؟Λ͓͍ͯΔ• χδϘοΫεଆͷϑϩϯτΤϯυ࡞ͬͨͷΛҡ࣋ɾͤ͞Δ͜ͱʹओ؟Λ͓͍ͯΔ• ͲͪΒҰॹʹ࡞͓ͬͯΓɺڥքΛ͖ͬΓҾ͍ͯΔΘ͚Ͱͳ͍• ҰॹʹࣄۀΛͤ͞Δɺඇػೳཁ݅ʹͩ͜ΘΔͱ͍͏ҙຯͰͲͪΒಉ͡ɻ
͜Ε·Ͱ͖ͬͯͨ͜ͱ
ϦΫϧʔτͷWebΛߴԽ͠ɺϢʔβϏϦςΟΛ্ͤ͞Δ׆ಈΛ֤αΠτͰ࣮ࢪ
466.0ੑೳͷఆ؍ଌπʔϧΛ࡞ڝ߹ͱͷࠩΛఆৗൺֱ"JS4)*'5͍ͱݴΘΕ͍ͯͨΫϥΠΞϯτΛ๚͠ɺߴԽ)1#ίεϝ".1'JSTUͳαΠτΛߏஙɺύϑΥʔϚϯεΛվળͭͭ͠ɺϊϋ͕શମʹਁಁͰ͖ΔΑ͏ʹͨ͠
AirSHIFThttps://web.dev/five-ways-airshift-improved-their-react-app/virtual renderingͰදࣔཁૉΛݮҰ෦ͷཁૉΛComlinkͰworkerize
SUUMO͍ͬͯͳ͍CSS Λ95%ݮը૾αΠζΛ90%ݮCore Web Vitals All Green ୡhttps://recruit-tech.co.jp/blog/2020/08/07/suumo_performance_improvement/
HPBCosmehttps://youtu.be/S_UttIYzKtMLighthouse CI ΛͬͯఆظతʹύϑΥʔϚϯεܭଌStoryBookͱreg-suitͰVRT
͍Ζ͍Ζ͖͚ͬͯͨͲ...• ϓϩμΫτ࣭Λվળ͚ͨͩ͠Ͱಓ• ͜ͷվળΛจԽʹ͠ɺܧଓతʹଓ͚ɺϏδωεΰʔϧʹͭͳ͛ͯͦ͜ޭ• վળ׆ಈΛܧଓͭͭ͠ɺ࠷ऴతͳϏδωεΰʔϧΛࢦ͢
จԽʹ͢ΔͨΊʹԿΛ͖͔ͬͯͨ
ͨΓతʹվળ => ͍͖ͳΓίϯόʔδϣϯͷୡͳͲͷநͷߴ͍ͱ͜ΖΛૂ͏μϝύλʔϯϘʔϧ࣋ͬͨΒ͍͖ͳΓγϡʔτଧͬͪΌ͏λΠϓ
ඇػೳཁ݅Λ্͍͛ͯ͘ͷʹઓུ͕͋Δ
ݟ͑ͳ͍ͷଌΕͳ͍ଌΕͳ͍ͷվળͰ͖ͳ͍
·ͣݟ͑ΔΑ͏ʹ͠Α͏
ՄࢹԽ͕ॏཁ• AirSHIFTͰϢʔβʔͷ࣮ࡍͷૢ࡞Λجʹ͔͔ͬͨඵΛݟ͑ΔΑ͏ʹ͍ͯ͠Δɻݟ͑ΔͱؾʹͳΔɺෆࢥٞͱվળͨ͘͠ͳΔ
ݟ͑ͨΒܧଓతʹଌΖ͏
ଌΔ͜ͱΛश׳ʹ͠Α͏ɻ• HPBίεϝͰͷࣄྫ• Speed Curve ͳͲͷಋೖݕ౼͠ɺଌΓଓ͚Δश׳Λ࡞Δɻ
ܧଓతʹଌΕͨΒܧଓతʹվળ͢ΔྲྀΕΛ࡞Δ
վળΛී௨ʹεϓϦϯτʹͤΔ• ඇػೳཁ݅ͷվળΛػೳͷՃͱ͘͠ѻ͍ɺεϓϦϯτʹೖΕͯվળ͢ΔྲྀΕΛ࡞Δɻ• ߹ʹΑͬͯOSSʹPRΛग़͢ͱ͔ݕ౼͢ΔɻAMP Optimizer Bug... ƅ̖ƅ;)
ՄࢹԽ => ϞχλϦϯάͷश׳ͮ͘Γ => վળΛॏͶΔউͪύλʔϯ
ͱ͍͑ɺͦΜͳ࣌ؒ࡞Ε·ͤΜΑ
ͦΕͪΖΜͦ͏ɻϝϯόʔؒͰͷೳྗ্ඞཁɻೳྗ͕͋Δఔߴ͍ϝϯόʔ͡Όͳ͍ͱΤϯϋϯε͠ͳ͕ΒվળͰ͖ͳ͍ɻ
ϝϯόʔͷҭηοτͰߟ͑ΔɻҰ࣌తͳվળͰऴΘΓʹ͠ͳ͍ɻ
Ωʔϫʔυ ͦͷ1:ήʔϛϑΟέʔγϣϯ
ࢀըॳ1ޙήʔϛϑΟέʔγϣϯήʔϜͷݸମάϥϑΈ͍ͨͳײ֮ͰεΩϧϚοϓΛ࡞Δ
ࢀըॳ1ޙ͜ͷϨʔμʔνϟʔτάϥϑΛίʔϯϑϨʔΫάϥϑͱݺΜͰ͍Δʢອ࠽ͷωλΑΓʣ
ۀͷߦʹΓ͍ͯͳ͍ॴ͕ՄࢹԽ͞Εɺೳྗ্ͷαϙʔτʹ͑Δɻ
Ωʔϫʔυ ͦͷ2:εϐʔυϋοΧιϯ
ΣϒϑϩϯτΤϯυ͚ͩͰͲ͜·ͰLighthouseͷείΞΛ্͛ΒΕΔ͔ڝ͏େձ
ظతʹੑೳʹؔ͢ΔφϨοδΛ࣮ઓܗࣜͰஷΊΒΕΔɻ
ϝϯόʔͷೳྗ্ɺҭ·ͰηοτͰඇػೳཁ݅ͷจԽͷৢͱͯ͠औΓΉ
·ͱΊ
·ͱΊ• χδϘοΫεϦΫϧʔτͲͪΒඇػೳཁ݅ʹͩ͜Θ͍ͬͯΔɻ• ඇػೳཁ݅ΛͨͩҰ࣌తʹୡ͢Δ͚ͩͰͳ͘தظతʹऔΓΜͰ͍͘ = จԽʹ͢ΔͨΊʹ͍ͬͯΔ͜ͱ• ݟ͑ΔԽ => ܭଌͷश׳Խ => վળͷश׳Խ• ҭ·ͰηοτͰߟ͑Δ͖ɺεϐʔυϋοΧιϯήʔϛϑΟέʔγϣϯΛ׆༻ֶָͯ͘͠͠Δֻ͚࡞ΓΛɻ