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
370
非機能要件を文化に _株式会社ニジボックス 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
54
Adobe Analytics入門講座【株式会社ニジボックス】
nbkouhou
0
32k
[Adobe Analytics]主な役割と必要な知識【株式会社ニジボックス】
nbkouhou
0
60
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
One Enishi After Another
snoozer05
PRO
0
130
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
contribution to astral-sh/uv
shunsock
0
200
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
340
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Catch Up: Go Style Guide Update
andpad
0
230
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
350
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
490
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
370
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Site-Speed That Sticks
csswizardry
13
910
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Scaling GitHub
holman
463
140k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
510
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
For a Future-Friendly Web
brad_frost
180
10k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.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ͷείΞ Λ্͛ΒΕΔ͔ڝ͏େձ
ظతʹੑೳʹؔ͢ΔφϨο δΛ࣮ઓܗࣜͰஷΊΒΕΔɻ
ϝϯόʔͷೳྗ্ɺҭ· ͰηοτͰඇػೳཁ݅ͷจԽ ͷৢͱͯ͠औΓΉ
·ͱΊ
·ͱΊ • χδϘοΫεϦΫϧʔτͲͪΒඇػೳཁ݅ʹͩ͜Θͬ ͍ͯΔɻ • ඇػೳཁ݅ΛͨͩҰ࣌తʹୡ͢Δ͚ͩͰͳ͘தظతʹ औΓΜͰ͍͘ = จԽʹ͢ΔͨΊʹ͍ͬͯΔ͜ͱ •
ݟ͑ΔԽ => ܭଌͷश׳Խ => վળͷश׳Խ • ҭ·ͰηοτͰߟ͑Δ͖ɺεϐʔυϋοΧιϯήʔ ϛϑΟέʔγϣϯΛ׆༻ֶָͯ͘͠͠Δֻ͚࡞ΓΛɻ