Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
非機能要件を文化に _株式会社ニジボックス Yosuke Furukawa
Search
株式会社NIJIBOX
December 18, 2020
Programming
0
290
非機能要件を文化に _株式会社ニジボックス Yosuke Furukawa
リクルートグループ主催!『大規模メディアにおけるWeb開発の最前線』
https://business-and-creative.connpass.com/event/188628/
株式会社NIJIBOX
December 18, 2020
Tweet
Share
More Decks by 株式会社NIJIBOX
See All by 株式会社NIJIBOX
Tableau トレーニング【株式会社ニジボックス】
nbkouhou
0
19k
Adobe Analytics勉強会の種類とレベル分け【株式会社ニジボックス】
nbkouhou
0
13
Adobe Analytics入門講座【株式会社ニジボックス】
nbkouhou
0
19k
[Adobe Analytics]主な役割と必要な知識【株式会社ニジボックス】
nbkouhou
0
19
SQL初級中級_トレーニング【株式会社ニジボックス】
nbkouhou
0
19k
アクセシビリティ_株式会社ニジボックス Katsuhito Karube
nbkouhou
1
9.8k
モダンWebパフォーマンス2020_株式会社ニジボックス Yuki Irisawa
nbkouhou
9
14k
SUUMOでのパフォーマンス_株式会社ニジボックス Satoshi Arai
nbkouhou
1
9.3k
カスタマージャーニーマップを共通言語に、UXリサーチをアウトプットにつなげたい話_Qrio株式会社 神谷 郁
nbkouhou
0
2.2k
Other Decks in Programming
See All in Programming
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
890
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
320
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
170
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.1k
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.1k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Agile that works and the tools we love
rasmusluckow
327
21k
Building Adaptive Systems
keathley
38
2.3k
What's in a price? How to price your products and services
michaelherold
243
12k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
A designer walks into a library…
pauljervisheath
203
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Automating Front-end Workflow
addyosmani
1366
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Transcript
ඇػೳཁ݅ΛจԽʹ 2020/12/10 @ Business & Creative
Twitter: @yosuke_furukawa Github: 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ͳαΠτΛߏ
ஙɺύϑΥʔϚϯεΛվ ળͭͭ͠ɺϊϋ͕શ ମʹਁಁͰ͖ΔΑ͏ʹ͠ ͨ
AirSHIFT https://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/
HPBCosme https://youtu.be/S_UttIYzKtM Lighthouse CI Λͬͯఆظతʹ ύϑΥʔϚϯεܭଌ StoryBookͱreg-suitͰVRT
͍Ζ͍Ζ͖͚ͬͯͨͲ... • ϓϩμΫτ࣭Λվળ͚ͨͩ͠Ͱಓ • ͜ͷվળΛจԽʹ͠ɺܧଓతʹଓ͚ɺϏδω εΰʔϧʹͭͳ͛ͯͦ͜ޭ • վળ׆ಈΛܧଓͭͭ͠ɺ࠷ऴతͳϏδωε ΰʔϧΛࢦ͢
จԽʹ͢ΔͨΊʹԿΛͬͯ ͖͔ͨ
ͨΓతʹվળ => ͍͖ͳ ΓίϯόʔδϣϯͷୡͳͲ ͷநͷߴ͍ͱ͜ΖΛૂ͏ μϝύλʔϯ Ϙʔϧ࣋ͬͨΒ͍͖ͳΓγϡʔτଧͬͪΌ͏λΠϓ
ඇػೳཁ݅Λ্͍͛ͯ͘ͷʹ ઓུ͕͋Δ
ݟ͑ͳ͍ͷଌΕͳ͍ ଌΕͳ͍ͷվળͰ͖ͳ͍
·ͣݟ͑ΔΑ͏ʹ͠Α͏
ՄࢹԽ͕ॏཁ • AirSHIFTͰϢʔβʔͷ࣮ࡍͷૢ࡞Λجʹ͔ ͔ͬͨඵΛݟ͑ΔΑ͏ʹ͍ͯ͠Δɻ ݟ͑ΔͱؾʹͳΔɺෆࢥٞͱվળͨ͘͠ͳΔ
ݟ͑ͨΒܧଓతʹଌΖ͏
ଌΔ͜ͱΛश׳ʹ͠Α͏ɻ • HPBίεϝͰͷࣄྫ • Speed Curve ͳͲͷಋೖݕ౼͠ɺଌΓଓ͚Δ श׳Λ࡞Δɻ
ܧଓతʹଌΕͨΒ ܧଓతʹվળ͢ΔྲྀΕΛ࡞Δ
վળΛී௨ʹεϓϦϯτʹ ͤΔ • ඇػೳཁ݅ͷվળΛػೳͷՃͱ͘͠ѻ͍ɺ εϓϦϯτʹೖΕͯվળ͢ΔྲྀΕΛ࡞Δɻ • ߹ʹΑͬͯOSSʹPRΛग़͢ͱ͔ݕ౼͢ Δɻ AMP Optimizer
Bug... ƅ̖ƅ;)
ՄࢹԽ => ϞχλϦϯάͷश ׳ͮ͘Γ => վળΛॏͶΔ উͪύλʔϯ
ͱ͍͑ɺͦΜͳ࣌ؒ࡞Ε·ͤΜΑ
ͦΕͪΖΜͦ͏ɻ ϝϯόʔؒͰͷೳྗ্ඞཁɻ ೳྗ͕͋Δఔߴ͍ϝϯόʔ͡Όͳ͍ ͱΤϯϋϯε͠ͳ͕ΒվળͰ͖ͳ͍ɻ
ϝϯόʔͷҭηοτͰߟ ͑ΔɻҰ࣌తͳվળͰऴΘΓ ʹ͠ͳ͍ɻ
Ωʔϫʔυ ͦͷ1: ήʔϛϑΟέʔγϣϯ
ࢀըॳ 1ޙ ήʔϛϑΟέʔγϣϯ ήʔϜͷݸମάϥϑΈ͍ͨ ͳײ֮ͰεΩϧϚοϓΛ࡞Δ
ࢀըॳ 1ޙ ͜ͷϨʔμʔνϟʔτάϥϑΛ ίʔϯϑϨʔΫάϥϑͱݺΜͰ ͍Δʢອ࠽ͷωλΑΓʣ
ۀͷߦʹΓ͍ͯͳ͍ॴ ͕ՄࢹԽ͞Εɺೳྗ্ͷα ϙʔτʹ͑Δɻ
Ωʔϫʔυ ͦͷ2: εϐʔυϋοΧιϯ
ΣϒϑϩϯτΤϯυ͚ͩͰ Ͳ͜·ͰLighthouseͷείΞ Λ্͛ΒΕΔ͔ڝ͏େձ
ظతʹੑೳʹؔ͢ΔφϨο δΛ࣮ઓܗࣜͰஷΊΒΕΔɻ
ϝϯόʔͷೳྗ্ɺҭ· ͰηοτͰඇػೳཁ݅ͷจԽ ͷৢͱͯ͠औΓΉ
·ͱΊ
·ͱΊ • χδϘοΫεϦΫϧʔτͲͪΒඇػೳཁ݅ʹͩ͜Θͬ ͍ͯΔɻ • ඇػೳཁ݅ΛͨͩҰ࣌తʹୡ͢Δ͚ͩͰͳ͘தظతʹ औΓΜͰ͍͘ = จԽʹ͢ΔͨΊʹ͍ͬͯΔ͜ͱ •
ݟ͑ΔԽ => ܭଌͷश׳Խ => վળͷश׳Խ • ҭ·ͰηοτͰߟ͑Δ͖ɺεϐʔυϋοΧιϯήʔ ϛϑΟέʔγϣϯΛ׆༻ֶָͯ͘͠͠Δֻ͚࡞ΓΛɻ