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
360
非機能要件を文化に _株式会社ニジボックス 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
32k
Adobe Analytics勉強会の種類とレベル分け【株式会社ニジボックス】
nbkouhou
0
50
Adobe Analytics入門講座【株式会社ニジボックス】
nbkouhou
0
32k
[Adobe Analytics]主な役割と必要な知識【株式会社ニジボックス】
nbkouhou
0
59
SQL初級中級_トレーニング【株式会社ニジボックス】
nbkouhou
0
32k
アクセシビリティ_株式会社ニジボックス Katsuhito Karube
nbkouhou
1
10k
モダンWebパフォーマンス2020_株式会社ニジボックス Yuki Irisawa
nbkouhou
9
14k
SUUMOでのパフォーマンス_株式会社ニジボックス Satoshi Arai
nbkouhou
1
9.5k
カスタマージャーニーマップを共通言語に、UXリサーチをアウトプットにつなげたい話_Qrio株式会社 神谷 郁
nbkouhou
0
2.4k
Other Decks in Programming
See All in Programming
私の後悔をAWS DMSで解決した話
hiramax
4
140
TDD 実践ミニトーク
contour_gara
0
150
ゲームの物理
fadis
5
1.5k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
AIコーディングAgentとの向き合い方
eycjur
0
220
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
200
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.4k
ワープロって実は計算機で
pepepper
2
1.4k
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
13
7.7k
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
190
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
260
Claude Codeで挑むOSSコントリビュート
eycjur
0
180
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Balancing Empowerment & Direction
lara
2
590
GitHub's CSS Performance
jonrohan
1031
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Documentation Writing (for coders)
carmenintech
73
5k
We Have a Design System, Now What?
morganepeng
53
7.7k
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ͷείΞ Λ্͛ΒΕΔ͔ڝ͏େձ
ظతʹੑೳʹؔ͢ΔφϨο δΛ࣮ઓܗࣜͰஷΊΒΕΔɻ
ϝϯόʔͷೳྗ্ɺҭ· ͰηοτͰඇػೳཁ݅ͷจԽ ͷৢͱͯ͠औΓΉ
·ͱΊ
·ͱΊ • χδϘοΫεϦΫϧʔτͲͪΒඇػೳཁ݅ʹͩ͜Θͬ ͍ͯΔɻ • ඇػೳཁ݅ΛͨͩҰ࣌తʹୡ͢Δ͚ͩͰͳ͘தظతʹ औΓΜͰ͍͘ = จԽʹ͢ΔͨΊʹ͍ͬͯΔ͜ͱ •
ݟ͑ΔԽ => ܭଌͷश׳Խ => վળͷश׳Խ • ҭ·ͰηοτͰߟ͑Δ͖ɺεϐʔυϋοΧιϯήʔ ϛϑΟέʔγϣϯΛ׆༻ֶָͯ͘͠͠Δֻ͚࡞ΓΛɻ