Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
性能に関する考え方
Yosuke Furukawa
PRO
December 08, 2021
Programming
8
7.4k
性能に関する考え方
Yamagoya Fastly で発表した内容です。
Yosuke Furukawa
PRO
December 08, 2021
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
キャリアの悩みについて
yosuke_furukawa
PRO
19
7.8k
Bun first impressions techfeed
yosuke_furukawa
PRO
1
45
MPA化するSPAとSPA化するMPA
yosuke_furukawa
PRO
12
7.4k
プログラミング教育について(公開版)
yosuke_furukawa
PRO
6
6.1k
Bun first impressions
yosuke_furukawa
PRO
8
2.5k
React Server Components について
yosuke_furukawa
PRO
0
1.8k
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
13
3.4k
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
7
6.7k
Node.js / Deno 徹底討論の時のスライド
yosuke_furukawa
PRO
3
4.1k
Other Decks in Programming
See All in Programming
Enumを自動で網羅的にテストしてみた
estie
0
1.2k
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
340
SHOWROOMの分析目的を意識した伝え方・コミュニケーション
hatapu
0
240
フロントエンドで 良いコードを書くために
t_keshi
3
1.6k
Step Functions Distributed Map を使ってみた
codemountains
0
100
Milestoner
bkuhlmann
1
240
Listかもしれない
irof
1
240
Writing Greener Java Applications
hollycummins
0
340
Glance App Widgetでウィジェットを作ろう / MoT TechTalk #15
mot_techtalk
0
110
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.4k
Ruby Pattern Matching
bkuhlmann
0
610
2023年にクル(かもしれない)通信ミドルウェア技術(仮)
s_hosoai
0
190
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
2
280
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
Adopting Sorbet at Scale
ufuk
65
7.8k
Gamification - CAS2011
davidbonilla
75
4.1k
Teambox: Starting and Learning
jrom
124
7.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Visualization
eitanlees
128
12k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
How to train your dragon (web standard)
notwaldorf
66
4.2k
Transcript
ੑೳʹؔ͢Δߟ͑ํ 2021/12/8 @ Yamagoya Fastly
Twitter: @yosuke_furukawa Github: yosuke-furukawa
ฐࣾʹαʔϏε͕ଟଘࡏ͢Δ • େখ߹Θͤͯ1000Ҏ্࣮֬ʹ͋Δɻ • ಛʹେ͖ͳͷͰ͋Ε Web ͔Βͷྲྀೖͷظ ͕େ͖͍ • ͜ΕΒͷྲྀೖ͕গͳ͘ͳΔ͜ͱආ͚͍ͨ
ݕࡧΤϯδϯ͔ΒͷධՁ͕ ͷ͘͢͝ॏཁ
ݕࡧΤϯδϯ Ͳ͏ͬͯධՁ͍ͯ͠Δ͔
%# 8FC4JUFT 8FC4JUFT 8FC4JUFT Crawler ͕αΠτΛ๚ͯ͠ɺϖʔδΛऩू ऩूͨ͠ϖʔδΛ֨ೲʢΠϯσΫγϯάʣ Crawler bot
%# 8FC4JUFT 8FC4JUFT 8FC4JUFT Crawler ͕αΠτΛ๚ͯ͠ɺϖʔδΛऩू ऩूͨ͠ϖʔδΛ֨ೲʢΠϯσΫγϯάʣ Crawler bot ͜ͷ࣌ʹ
Crawler ͕ߟ͍͑ͯΔ͜ͱԿ͔
Crawler ͕ؾʹ͍ͯ͠Δ͜ͱ • ͜ͷαΠτͲΕ͚ͩ๚ͯ͠େৎͳΜͩ Ζ͏͔ɾɾɾʁ • ͲΕ͘Β͍ͷසͰ๚͢Δͱྑ͍ͷͳΜ ͩΖ͏͔ɾɾɾʁ • αΠτ͕ͷ͍ͤͰམͪͪΌͬͨΒͩ
ͳ͊ɻɻɻ
8FC4JUFT Crawler bot GET /articles/1 500 Server Error ๚ͨ͠Βམͪ ͪΌͬͨʂ
͠Β͘๚ΊΑ͏
8FC4JUFT Crawler bot GET /articles/1 200 OK ΊͬͪΌ͍ɻॏ͍αΠτͳͷ͔ ͳɻͦΜͳʹ๚͠ͳ͍΄͏͕͍͍͔ ...
10ඵܦա ...
Crawler αΠτͷԠੑೳͱ Ԡ҆ఆੑΛݟ͍ͯΔ • ͦͷ্ͰɺαΠτʹ๚ͯ͠ྑ͍සɺ࠶๚ ظ͕ܾؒ·Δɻ • ͔ͬͨ͠ΓɺԠੑೳ͕ѱ͍ͱ๚͠ ͯ͘Εͳ͍ɻ •
Ұͷ๚ͰΠϯσοΫε͞ΕΔϖʔδ͕গ ͳ͘ͳΔ͜ͱΛҙຯ͢Δɻ
Crawler αΠτͷԠੑೳͱ Ԡ҆ఆੑΛݟ͍ͯΔ • ͦͷ্ͰɺαΠτʹ๚ͯ͠ྑ͍සɺ࠶๚ ظ͕ܾؒ·Δɻ • ͔ͬͨ͠ΓɺԠੑೳ͕ѱ͍ͱ๚͠ ͯ͘Εͳ͍ɻ •
Ұͷ๚ͰΠϯσοΫε͞ΕΔϖʔδ͕গ ͳ͘ͳΔ͜ͱΛҙຯ͢Δɻ ͜ͷ๚ՄೳͳසɺظؒΛαΠτͷ༧ࢉͱͯ͠ ܭࢉ͍ͯ͠Δɺ͜ΕΛ Crawl Budget ͱݺͿ
8FC4JUFT ϖʔδΛμϯϩʔυͨ͠ޙϨϯμϦϯάΛߦ͏ɻ Crawler bot IUNM +4 $44 Rendering
8FC4JUFT ϖʔδΛμϯϩʔυͨ͠ޙϨϯμϦϯάΛߦ͏ɻ Crawler bot IUNM +4 $44 Rendering Rendering݁ՌΛجʹίϯςϯπͷείΞ͚Λߦ ͍ɺ࠷ऴతʹΠϯσοΫεʹө͢Δ
8FC4JUFT ϨϯμϦϯάʹΊͬͪΌίετ͕͔͔Δͱͦ ΕͦΕͰධՁʹӨڹ͢Δ Crawler bot CMBOL IUNM +4 $44 Rendering
8FC4JUFT ϖʔδ͕ JavaScript ͳͲͰߏங͞ΕΔ߹ JSΛ࣮ߦͯ͠ϨϯμϦϯά͢Δɻ Crawler bot CMBOL IUNM +4
$44 Rendering ϖʔδʹίϯςϯπ͕ͳ͍ͷͰɺ+4 Λ࣮ߦͯ͠ίϯςϯπΛදࣔ͠Α͏ ͍ʂʂʂ͋·Γʹ͕͔͔࣌ؒΔ ͳΒεΩοϓ͢Δɻ
Crawler ϨϯμϦϯάʹ͔͔ Δ࣌ؒݟ͍ͯΔ • αΠτͷԠੑೳ͚ͩͰͳ͘ɺϨϯμϦϯάͷੑೳ ಉ༷ʹݟ͍ͯΔ • ͪ͜Βಉ༷ʹ͋·ΓʹϨϯμϦϯά͕͔͔࣌ؒΔͳ Β్தͰϨϯμϦϯάΛΊͯ͠·͏ •
ྫ͑ JS Ͱେͷ HTML Λߏங͢ΔͳͲɺϨϯμϦϯ ά͕͔͔࣌ؒΔαΠτʹؔͯ͠Ԡͨ͠ͷͷɺ్த ͰΊͯ͠·͏ɺ͘͠ޙʹճͯ͠ΠϯσοΫε͕ ͘ͳΔέʔε͋Δ
Crawler ϨϯμϦϯάʹ͔͔ Δ࣌ؒݟ͍ͯΔ • αΠτͷԠੑೳ͚ͩͰͳ͘ɺϨϯμϦϯάͷੑೳ ಉ༷ʹݟ͍ͯΔ • ͪ͜Βಉ༷ʹ͋·ΓʹϨϯμϦϯά͕͔͔࣌ؒΔͳ Β్தͰϨϯμϦϯάΛΊͯ͠·͏ •
ྫ͑ JS Ͱେͷ HTML Λߏங͢ΔͳͲɺϨϯμϦϯ ά͕͔͔࣌ؒΔαΠτʹؔͯ͠Ԡͨ͠ͷͷɺ్த ͰΊͯ͠·͏ɺ͘͠ޙʹճͯ͠ΠϯσοΫε͕ ͘ͳΔέʔε͋Δ ϨϯμϦϯάʹ͔͔Δ࣌ؒΛݟ͍ͯΔɻ͜Ε Rendering Budget ͱݺΕ͍ͯΔɻ
͞Βʹ
࠷ۙ Core Web Vitals ͱݺ ΕΔࢦඪଘࡏ͢Δ • ϢʔβʔͷϑϥετϨʔγϣϯΛܭଌ͢Δࢦඪ • Google
͕ఏএ
Core Web Vitals • Largest Contentful Paint: ϖʔδ্ͷҰ൪࠷େ໘ੵΛ࣋ͬͯ ͍ΔΤϦΞ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒʢώʔϩʔը૾ͷදࣔ࣌ ؒͳͲʣ
• First Input Delay: ϨϯμϦϯά͕։࢝͞Ε͔ͯΒೖྗՄೳʹ ͳΔ·Ͱͷ࣌ؒʢԡͯ͠Ԡ͠ͳ͍ϖʔδͳͲʣ • Cumulative Layout Shift: ϨϯμϦϯά్தͰίϯςϯπ͕ ͣΕͨ߹ͷζϨ෯ʢޡλοϓૂ͍ͷࠂͳͲ͕Α͘Δ ͭʣ
Crawler bot ͕๚͢Δ࣌ʹؾ Λ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱ • ͦͦԠੑೳΛߴ͘อͨͳ͍ͱ͍͚ͳ͍ • ๚தʹམ͍͚ͪͯͳ͍ • ๚ޙͷϨϯμϦϯάͷύϑΥʔϚϯεߴ͘ͳ
͍ͱ͍͚ͳ͍ • ͜ΕΒΛؾΛ্͚ͭͨͰɺ Core Web Vitals ͳͲ ͷ৽͍͠ࢦඪʹέΞ͕ඞཁ
Crawler bot ͕๚͢Δ࣌ʹؾ Λ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱ • ͦͦԠੑೳΛߴ͘อͨͳ͍ͱ͍͚ͳ͍ • ๚தʹམ͍͚ͪͯͳ͍ • ๚ޙͷϨϯμϦϯάͷύϑΥʔϚϯεߴ͘ͳ
͍ͱ͍͚ͳ͍ • ͜ΕΒΛؾΛ্͚ͭͨͰɺ Core Web Vitals ͳͲ ͷ৽͍͠ࢦඪʹέΞ͕ඞཁ ؾΛ͚ͭͳ͍ͱ͍͚ͳ͍͜ͱଟ͍ɻ͔͠ఆৗ։ൃ ࡞ۀΛ͍ͯ͠Δ͚ͩͰதʑؾ͚ͮͳ͔ͬͨΓ͢Δ
ϦΫϧʔτࣾͰ֤αΠτ ͷঢ়گΛఆظతʹΞηεϝϯ τ͠ɺमਖ਼Ͱ͖Δͱ͜Ζ͔Β मਖ਼͍ͯ͠Δ
https://blog.recruit.co.jp/rtc/2021/09/22/core-web-vitals- %e3%81%ab%e5%af%be%e5%bf%9c%e3%81%99%e3%82%8b%e3%81%9f%e3%82%81%e3%80%81%e5%90%84% e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e6%94%b9%e5%96%84%e6%b4%bb%e5%8b%95%e3%82%92 %e5%ae%9f%e6%96%bd/
࣮ࡍʹ͋ͬͨέʔεͱ ͦͷղܾࡦ
έʔε1: CDNΛೖΕͨͷʹԠੑೳ͕ ҆ఆ͠ͳ͍έʔε
CDNΛಋೖ͢Δ͜ͱͰɺલड़ͷ Ԡੑೳͷ҆ఆԽΛਤͬͨ ※ CDNΛखલʹೖΕͯͱΓ͋͑ͣղܾ͢ΕOKͱ ࢥ͍ͬͯͨ࣌ظͷͰ͢ɻ
$%/ Crawler bot ҆ఆ͢Δ͔ͳʔͱࢥ͚ͬͨͲɺ͍͍࣌࣌͋ͬ ͨɻΑ͘Α͘ݟΔͱɺ origin ʹҰఆҎ্ͷϦΫΤε τ͕ඈΜͰ͠·͍ͬͯͨɻ 8FC4JUFT ૣ͔ͬͨΓ͔ͬͨΓ͢Δɻ
ͳΜ͔҆ఆ͠ͳ͍ͳɻɻɻ ΦϦδϯʹϦΫΤετ͕ߴසͰඈ ΜͰ͠·͏ɻ
QPE Crawler bot pod ͕ͨ͘͞Μ͋ΓɺΫϥΠΞϯτͷϦΫΤετઌ͕ ࢄ͞ΕΔࣄͰɺCDN෦ͷΩϟογϡ͕ଘࡏ͠ͳ͍ podʹߦ͘ͱɺoriginͷ͍߹Θ͕ͤ૿͍͑ͯͨɻ 8FC4JUFT QPE QPE
QPE͕ෳ͋ΓɺΩϟογϡ͕͋Δ ͱ͜Ζͱແ͍ॴͰ͍߹Θ͕ͤൃੜͯ͠͠·ͬ ͍ͯͨ
CDNΛೖΕͨͷʹԠੑೳ͕҆ ఆ͠ͳ͍ • ※ Fastly Ͱ͋Γ·ͤΜɻ • ͋·Γஶ໊Ͱͳ͍ɺผͳCDNΛ࠾༻͍ͯ͠ ͨɻ •
CDNͷpodͷ͕ଟ͋Γɺͦͷ pod શମʹ Ωϟογϡ͕ਁಁ͍ͯ͠ͳ͔ͬͨɻ
ղܾࡦ • CDN Λ Fastly ʹม্͑ͨͰɺ Origin Shield ͱݺΕΔ ػߏΛಋೖͨ͠ɻ
• origin ͷखલͰcacheΛ࣋ͭpodʹϦΫΤετΛҕৡ͢Δ QPE QPE QPE PSJHJO TIJFME 8FC4JUFT جຊతʹDBDIF͔ Βؼͬͯ͘Δɻ ҆ఆͨ͠Ϩεϙϯε͕͋Δɻ
ղܾࡦ • ͜ΕʹՃ͑ͯ Stale While Revalidate ͱݺΕΔɺҰ୴ݹ ͘ͳͬͨΩϟογϡΛฦͭͭ͠ɺཪଆͰΩϟογϡΛߋ ৽͢ΔΈΛಋೖͨ͠ɻ $%/
8FC4JUFT ݹ͍Ωϟογϡ͔͠ແ͍ͷͰɺҰ୴ݹ ͍ͷΛͦͷ··ฦͭͭ͠ɺ৽͍͠ίϯςϯ πΛཪͰߋ৽͢Δ request Ұ୴Ωϟογϡ͔Βฦ͢ Ϩεϙϯεޙʹ ίϯςϯπΛ࠶ߋ৽
CDNΛೖΕͨͷʹԠੑೳ͕҆ ఆ͠ͳ͍ • ͲΜͳCDNΛೖΕͨͱͯ͠Ԡੑೳ͕ྑ͘ͳΔΘ͚ Ͱͳ͍ • ಛʹίϯςϯπͷߋ৽͕සൟʹ͋ͬͨΓɺαΠτͷߋ ৽͕සൟʹ͋ΔΑ͏ͳαΠτͩͱCDNଆͷػೳͦΕ ʹ߹Θͤͨͷ͕ඞཁ •
ࠓճ Origin Shield ͱ Stale While Revalidate Λͬ ͯԠੑೳΛ҆ఆͤͨ͞
έʔε2: ڊେը૾͕৴͞Ε͍ͯͨ έʔε
ڊେը૾͕৴͞ΕΔέʔε • ฐࣾͷαΠτը૾͕ଟ͍ • ͔͠͠ɺը૾ͷϦαΠζ͕͍ͱ͜Ζ͕ଟ͍ • ख࡞ۀͷϦαΠζʹΑΓɺ͖ͪΜͱͨ͠ม͕ ͞Ε͍ͯͳ͍έʔε༗Δ • ·͍͔ͨͭ͘ͷαΠτదͨ͠ը૾ϑΥʔϚο
τ͕ΘΕ͍ͯͳ͔ͬͨΓ͢Δ
8FC4JUFT ը૾͕ॏ͍ͱԠੑೳѱ͍͕ɺϨϯμϦϯάύ ϑΥʔϚϯεѱ͘ͳΔɻ Crawler bot IUNM +4 $44 Rendering JNBHFT
JNBHFT JNBHFT
ղܾࡦ • Fastly ͷ Image Optimizer ʹΑΓɺCDN্Ͱ ը૾ͷ࠷దԽΛߦ͏Α͏ʹͨ͠ɻ • ͘͠ը૾ͷ࠷దԽΛӡ༻ʹ࣮֬ʹΈࠐ
ΉΑ͏ʹ͠ɺ͠࿙Εͨͱͯ͠ݕͰ͖ ΔΈΛ lighthouse CI ͳͲͰߏஙͨ͠ɻ
खલʹ͍ΔCDN͕ը૾ͷϑΥʔϚοτΛ࠷దԽ͠ɺ ΫϥΠΞϯτʹ߹Θͤͯ৴͢Δɻ JNBHFT XFCQ $%/ *NBHF0QUJNJ[FS JNBHFT BW Browser A
Browser B
Before => After • Before • After
Before => After • Before • After 3398ms => 1729ms
ʹLCPΛݮɺԠੑೳ҆ఆԽʹد༩
έʔε3: 3rd party resource ͷϦΫ Τετ͕ଟ͍
3rd party resource ͷϦΫΤ ετ͕ଟ͍ • ͣͬͱӡ༻͞Ε͖ͯͨ͜ͱͰɺ3rd party resource ͕ͷ͘͢͝ଟ͍ɻ
• A/BςετɺࠂɺੳπʔϧͳͲͳͲͷπʔϧ ྨΛಋೖͯ͠ޮՌΛଌఆͯ͠... • ͱ͍͏աఔͷதͰνϦπϞͰϦΫΤετ͕૿͑ͯ ͍ͬͯ͠·ͬͨɻ
3rd party resource ͷϦΫΤ ετ͕ଟ͍ ҰͭͷϚϧ͕ϦΫΤετઌΛද͢ɻ͜͜Ͱݴ͏ͱɺेݸͷ ϦιʔεΛμϯϩʔυ͍ͯ͠Δɻ
ղܾࡦ • ٕज़తͳϨΠϠͰͷղܾࡦͳ͍ • աڈʹͬͨͷͰࠓ͍ͬͯͳ͍ͷΛؔ࿈ ෦ॺʹώΞϦϯά͠ɺ͍ͬͯͳ͍ͷΛআ٫ • ঃʑʹݮΒ͢Α͏ʹ࿈བྷ͠ͳ͕ΒαΠζΛϞχ λϦϯά͍ͯ͠Δɻ •
·ͩ͜ͷ׆ಈܧଓதɻɻɻ
ੑೳվળڑͰͳ͍ɻ ڑͰͳ͍ɻ ϩϯάδϟʔχʔͰ͋Δɻ
ੑೳվળ • ΣϒΞϓϦέʔγϣϯʹ͓͍ͯࢸ্໋Ͱ͋Δ • ҰํͰڑͰαοͱͬͯҰճͰ์ஔͯ͠͠·͏ͱɺ݁ ہ͍ͰݟΔͱແҙຯͩͬͨΓ͢Δɻ • ࢦඪมΘΔ͠ɺྼԽ͢ΔϙΠϯτมΘΔ • ͣͬͱ͍ظؒΛ௨ͯ͠αʔϏεͷঢ়گΛϞχλϦϯά͠
ଓ͚Δඞཁ͕͋Δɻ • ͜͏͍͏νʔϜΛ࡞ΓɺࣾͷจԽʹ͢Δඞཁ͕͋Δɻ
·ͱΊ
·ͱΊ • Ϋϩʔϥ͔ΒݟΔͱ࣮৭ʑͱݕ౼͠ͳ͍ͱ͍͚ͳ͍͜ͱ͕ଟ͍ • ΫϩʔϦϯάόδΣοτ • ϨϯμϦϯάόδΣοτ • Core Web
Vitals • ͦͷ্Ͱ࠷దԽΛ͖ͯͨ͠ɻ • ੑೳվળ͕࣮ࢪͰ͖ͨ • ͨͩ͠ɺ·ͩಓɺಛʹٕज़తͳϨΠϠҎ্ͷͱ͜ΖͰࠓޙվળͷ༨͕͋Δ • ੑೳվળظεύϯͰऴΘΔΑ͏ͳͰͳ͘ɺதظΛݟਾ͍͑ͯεύϯͰͬͯ ͍͘ඞཁ͕͋Δ
ࢀߟจݙ • https://developers.google.com/search/docs/advanced/crawling/large-site- managing-crawl-budget?hl=ja • https://www.botify.com/blog/from-crawl-budget-to-render-budget • https://blog.recruit.co.jp/rtc/2021/09/22/core-web-vitals- %e3%81%ab%e5%af%be%e5%bf%9c%e3%81%99%e3%82%8b%e3%81%9f %e3%82%81%e3%80%81%e5%90%84%e3%82%b5%e3%82%a4%e3%83%8
8%e3%81%ae%e6%94%b9%e5%96%84%e6%b4%bb%e5%8b%95%e3%82 %92%e5%ae%9f%e6%96%bd/ • https://developers.google.com/search/docs/advanced/javascript/javascript- seo-basics • https://www.youtube.com/watch?v=XUOD6pcvnso